Chrome 未安装应用程序时PWA推送通知不起作用

6ljaweal  于 2023-08-01  发布在  Go
关注(0)|答案(2)|浏览(160)

推送通知是否应该仅在安装PWA时才起作用?如果我在android chrome浏览器中加载应用程序,推送通知根本不会显示(后台或打开网站),即使它们通过电线来。
如果我安装了应用程序,所有通知都会正确显示(后台或焦点应用程序)。
这是一种正常的行为,还是在执行过程中出现了问题?

zbsbpyhn

zbsbpyhn1#

这是意料之中的。
service worker运行在与应用程序所用线程不同的线程上。这就是为什么即使您(或您的用户)当前未访问网站,您的Web应用程序仍然可以接收和显示通知的原因。
因此,如果未安装PWA(意味着软件未在客户端运行),则没有代码等待传入通知。
I wrote an article about service workers,如果您想深入PWAs主题。

更新

  • 有一个article specifically from OneSignal关于在Android上不接收推送通知,也许你可以找到一些提示。如果你检查OneSignal Jmeter 板,你能看到你的客户在那里注册吗?
  • [此点供其他用户登陆此问题]

如果您的浏览器不显示网络通知,您可以在“我可以使用”网站上验证您的浏览器版本是否支持通知和推送API,并最终更新它。

prdp8dxp

prdp8dxp2#

总之,这是不正常的,无论是否安装了PWA,只要注册了service worker,推送通知就应该起作用。您需要注意的是service worker注册和推送事件处理。
Service Worker Push API
对于接收推送消息的应用程序,它必须具有活动的service worker。当service worker处于活动状态时,它可以使用PushManager.subscribe()订阅推送通知。

// example of service-worker.js 
// can receive push notification from server even PWA not installed

self.addEventListener('push', (event) => {
    // Parse the notification payload (assuming it's in JSON format)
    const { toPage, title, body, icon } = event.data.json();
    let iconResult
    const options = {
        // Customize the notification here

        actions: [
            { action: toPage, title: 'Visit ' + toPage.toUpperCase() },
        ],
        icon: icon || undefined,
        body, // The content of the notification
        title, // The title of the notification
        vibrate: [200, 100, 200], // Vibration pattern for supported devices (optional)
        toPage
        // Other options like actions, renotify, requireInteraction, etc.
    };

    // Show the notification to the user
    event.waitUntil(self.registration.showNotification(title, options));
});
self.addEventListener('notificationclick', (event) => {
    // Get the URL to navigate to (in this case, '/home')
    const urlToOpen = new URL(`${event.action || 'index'}.html`, self.location.origin).href;

    // Prevent other listeners from handling the event
    event.notification.close();

    // Open a new window/tab with the specified URL
    event.waitUntil(clients.openWindow(urlToOpen));
});

字符串

相关问题