移动浏览器上的服务工作者 JavaScript 问题答案

【问题标题】：Problem with service worker JavaScript on mobile browsers移动浏览器上的服务工作者 JavaScript 问题
【发布时间】：2021-12-25 13:04:03
【问题描述】：

这快把我逼疯了。我一直在尝试为网站实现推送通知，并且找到了解决方案（Javacript API 通知）。问题是：通知在移动设备上不起作用。

我阅读了有关服务人员的信息，并且一直在使用此代码向用户请求许可和所有内容，但它仍然无法正常工作。我不确定我是否做错了什么。我读到它必须是一个 https 站点，但这似乎不是问题。我也尝试了 push.js 插件plugin.js，但到目前为止没有成功（即使它在他们网站上的那个插件的演示在我的移动浏览器上运行）这是网站 >>> https://park-inside.nl/test/

“设置通知”按钮用于在等待时间低于所选时间时显示通知。因此，要对此进行测试，只需单击“设置通知”，然后选择大于“Wachttijd”列的分钟数并刷新页面。应该会出现通知。它适用于桌面浏览器，但不适用于移动设备。有什么想法或建议吗？我很乐意并感谢任何帮助。

注意：我在 Android 9 (go) 上使用 Chrome 94

请求用户许可的代码：

Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
            registration.showNotification('Notification with ServiceWorker');
        });
    }
});

【问题讨论】：

标签： javascript api mobile notifications

【解决方案1】：

请参阅 Web 通知的浏览器支持表：https://caniuse.com/notifications。

它们仅适用于 Android 上的 Chrome，而不适用于现有的 Android 浏览器。

此外，请务必注册一个 Service Worker，即使它是一个空的，如下所示：https://stackoverflow.com/a/31787926/10551293。

此处提供了通知的演示：https://serviceworke.rs/push-payload_demo.html。

Google 还提供了一个分步代码实验室：https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0

【讨论】：

我在 Android 上使用 Chrome。不是股票浏览器。
您使用的是哪个版本的 Chrome？
我在 Android 上使用的是 94 版。
您是否将应用保存为 PWA？在 Android Chrome 中，应该有一个将页面保存到主屏幕的选项。我认为这是通知工作所必需的。
它对你有用吗？我刚刚尝试过，但没有发生任何事情。您的意思是 PWA 是通过“添加到主屏幕”设置添加页面吗？

【解决方案2】：

显然，我必须先这样做才能注册一个 Service Worker：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
}

我不太确定，但我试图使用sw.js 文件的路由，如下所示：js/sw.js。一旦我将该文件放在项目的根目录中，它就可以工作了。

另外，我将此代码添加到该文件以将一些事件记录到控制台：

self.addEventListener('install', (event) => {
    console.log('Installed');
});

self.addEventListener('activate', (event) => {
    console.log('Activated');
});

self.addEventListener('fetch', (event) => {
    console.log('Fetch request');
});

感谢swift-lynx 提供一些文档的链接，我在其中找到了解决方案：

https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

【讨论】：