如何在PWA Service Worker中监听按钮/锚点点击？

嘿，这个问题其实是因为Service Worker的运行机制导致的——它运行在独立于页面的后台上下文里，没有window对象，也不能直接访问页面中的DOM元素，所以直接在Service Worker里给按钮或锚点加点击监听器是行不通的。不过我们可以通过两种方式解决，分场景来看：

场景1：页面中的按钮/锚点 #

这种情况需要在主页面的JavaScript里监听点击事件，再通过消息通信的方式通知Service Worker执行对应的逻辑：

步骤1：在页面JS中监听点击并发送消息 #

// 主页面的脚本文件
document.getElementById('your-button-id').addEventListener('click', async () => {
  // 确保Service Worker已注册并激活
  if ('serviceWorker' in navigator) {
    const swReg = await navigator.serviceWorker.ready;
    // 给Service Worker发送消息，携带操作类型和数据
    swReg.active.postMessage({
      type: 'PAGE_BUTTON_CLICK',
      data: { /* 这里可以传递需要的参数，比如用户ID、操作内容等 */ }
    });
  }
});

步骤2：在Service Worker中监听消息并处理逻辑 #

// my.serviceworker.js
self.addEventListener('message', (event) => {
  // 判断消息类型，执行对应逻辑
  if (event.data.type === 'PAGE_BUTTON_CLICK') {
    console.log('收到页面按钮点击的消息，开始处理:', event.data.data);
    // 这里可以执行Service Worker能做的操作，比如：
    // 1. 触发推送通知
    self.registration.showNotification('按钮触发通知', {
      body: '这是通过页面按钮触发的Service Worker通知',
      icon: '/icons/icon-192x192.png'
    });
    // 2. 更新缓存
    // 3. 调用后台API等
  }
});

场景2：推送通知中的操作按钮 #

如果是想给推送通知里的按钮加点击逻辑，那可以在创建通知时定义actions，然后在Service Worker里监听notificationclick事件：

步骤1：创建带操作按钮的通知（可以在页面或Service Worker中触发） #

// 比如在Service Worker中触发通知
self.registration.showNotification('新的待办事项', {
  body: '点击按钮标记完成或查看详情',
  actions: [
    {
      action: 'MARK_DONE',
      title: '标记完成',
      icon: '/icons/check-icon.png'
    },
    {
      action: 'VIEW_DETAILS',
      title: '查看详情',
      icon: '/icons/detail-icon.png'
    }
  ],
  requireInteraction: true // 让通知保持显示直到用户操作
});

步骤2：在Service Worker中监听通知点击事件 #

// my.serviceworker.js
self.addEventListener('notificationclick', (event) => {
  // 先关闭通知
  event.notification.close();

  // 根据点击的按钮action执行逻辑
  switch(event.action) {
    case 'MARK_DONE':
      console.log('用户点击了标记完成按钮');
      // 比如调用API更新状态，或更新缓存
      break;
    case 'VIEW_DETAILS':
      // 打开详情页面
      event.waitUntil(
        clients.openWindow('/todo-details')
      );
      break;
    default:
      // 用户点击了通知主体，打开主页
      event.waitUntil(
        clients.openWindow('/')
      );
  }
});

总结一下：Service Worker不能直接操作页面DOM，所以页面元素的点击逻辑要靠页面JS中转，通知内的按钮则通过notificationclick事件处理。

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