Question

我有我的PWA应用，该应用在main.css文件中包含此代码。

npm i -g typescript@latest

当添加到主屏幕并以全屏模式启动时（在manifest.json中设置），按需禁用了“推入刷新”功能。

但是，在TWA中：

当我使用https://github.com/GoogleChromeLabs/bubblewrap创建签名的APK时不会禁用“强制刷新”行为。

对此有什么解决办法吗？

Answer 1

最终解决了JavaScript问题：

首先，我在build.gradle文件中更新了 twaManifest 。

以下行：

launchUrl: '/?utm_source=twa'

并且我添加了这段js，以便在检测到twa查询参数时将CSS类添加到body元素：

export const disablePullToRefreshTWA = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get('utm_source');
    if (myParam === 'twa') {
        document.body.classList.add('twa-app');
    }
};

我的main.css现在有：

body.twa-app {
  overscroll-behavior: none;
}

编辑：我保留了PWA（显示模式）媒体查询，以将PWA添加到HomeScreen案例中

Answer 2

仅此而已

body {
overscroll-behavior: contain;
}

如何禁用可信网络活动（TWA）中的刷新刷新行为？

2 个答案: