Service Worker通知点击失效：需适配桌面与移动端浏览器

Hey there! Let's fix that service worker notification click issue you're facing—this is a common gotcha, so I’ll walk you through the key fixes step by step:

The most likely culprit is that your service worker isn’t listening for the notificationclick event. You need to add this logic directly in sw.js to handle clicks:

self.addEventListener('notificationclick', (event) => {
  // First, close the notification
  event.notification.close();

  // Then, handle navigation: focus an existing tab or open a new one
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
      // Look for an already open tab matching your target URL
      for (const client of clientList) {
        if (client.url === '/' && 'focus' in client) {
          return client.focus();
        }
      }
      // If no tab exists, open a new one
      if (clients.openWindow) {
        return clients.openWindow('/'); // Replace with your desired URL
      }
    })
  );
});

This code ensures that when a user clicks the notification, it either focuses an existing instance of your app or opens a new tab to your specified page.

Your displayNotification function was cut off, but it’s critical to send notifications through the service worker’s registration—not using the native new Notification() constructor. Here’s a complete, working version:

function displayNotification() {
  // Check if notifications are allowed
  if (Notification.permission === 'granted') {
    // Wait for the service worker to be ready, then send the notification
    navigator.serviceWorker.ready.then((registration) => {
      registration.showNotification('Hello!', {
        body: 'Your notification content here',
        icon: '/path/to/your/icon.png', // Required for mobile/desktop consistency
        tag: 'notification-tag' // Optional: reuse this tag to replace old notifications
      });
    });
  } else if (Notification.permission !== 'denied') {
    // Request permission if it's not yet granted
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        displayNotification();
      }
    });
  }
}

Using registration.showNotification ensures the service worker can capture the click event—direct Notification instances won’t trigger the service worker listener.

Double-check your service worker registration to make sure it’s active and has the correct scope:

• If your sw.js is in a subdirectory, explicitly set the scope to cover your entire app:

  navigator.serviceWorker.register('sw.js?v=12', { scope: '/' })
  

• In Chrome DevTools > Application > Service Workers, confirm the service worker is marked as Activated (not "Waiting"). If it’s waiting, refresh the page to activate it.

Service workers and notifications only work over HTTPS (localhost is exempt for development). If you’re testing on an HTTP server, these APIs will be disabled, and click events won’t fire.

• Enable "Update on reload" in Chrome DevTools > Application > Service Workers to ensure you’re always using the latest version of your sw.js.
• Check the service worker’s console logs: in DevTools > Console, select the "Service Worker" context from the dropdown to see any errors or log messages.
• When you click a notification, verify the notificationclick event fires by adding a console.log('Notification clicked!') inside the listener in sw.js.

Try these steps, and your notification clicks should start working as expected. Let me know if you run into any roadblocks!

内容的提问来源于stack exchange，提问作者balraj parmar