无Push服务的PWA通知问题：安卓后台失效、iOS无响应

安卓端后台失效原因 #

当PWA被关闭进入后台后，浏览器会为了节省系统资源终止Service Worker（SW）进程，你当前使用的setInterval依赖SW持续运行，一旦SW被休眠，定时任务就会停止执行，导致后台无法拉取通知。

iOS端完全无触发原因 #

Safari对PWA的后台行为限制远严于安卓：

1. PWA不在前台时，Service Worker会被立即终止，setInterval完全无法生效；
2. iOS目前不支持Periodic Background Sync API（定时后台同步）；
3. 若Web App Manifest配置不满足要求（如display未设为standalone/fullscreen、图标尺寸不足），PWA无法获得完整的原生应用权限；
4. iOS对通知的权限校验更严格，且要求通知图标必须符合尺寸规范。

安卓端：改用Periodic Background Sync API #

这个API是浏览器专门为后台定时同步设计的，能让SW在后台定期被唤醒执行任务，且不受SW休眠影响，符合你15分钟拉取一次的需求。

1. 修改Service Worker代码 #

替换原activate事件中的setInterval为定期同步注册：

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    // 注册定期后台同步
    if ('PeriodicSyncManager' in self.registration) {
      try {
        await self.registration.periodicSync.register('fetch-notifications', {
          minInterval: SYNC_INTERVAL, // 15分钟，浏览器可能会调整为更大的间隔（如30分钟），取决于系统资源
        });
      } catch (err) {
        console.error('定期同步注册失败:', err);
      }
    }
    // 首次激活时立即拉取一次通知
    await fetchNotifications();
  })());
});

2. 前端页面请求同步权限 #

Periodic Sync需要用户授权，在PWA的主页面添加权限请求逻辑：

// 主页面JS代码
async function setupPeriodicSync() {
  if (!('PeriodicSyncManager' in navigator.serviceWorker)) return;

  const swRegistration = await navigator.serviceWorker.ready;
  try {
    await swRegistration.periodicSync.register('fetch-notifications', {
      minInterval: 15 * 60 * 1000,
    });
  } catch (err) {
    // 无权限时引导用户授权
    if (err.name === 'NotAllowedError') {
      const permissionBtn = document.createElement('button');
      permissionBtn.textContent = '允许后台通知同步';
      permissionBtn.style.cssText = 'padding: 10px; margin: 20px;';
      permissionBtn.onclick = async () => {
        await swRegistration.periodicSync.register('fetch-notifications', {
          minInterval: 15 * 60 * 1000,
        });
        permissionBtn.remove();
        alert('已开启后台同步');
      };
      document.body.appendChild(permissionBtn);
    }
  }
}

window.addEventListener('load', setupPeriodicSync);

iOS端：适配Safari限制 #

由于iOS不支持Periodic Sync，只能通过以下方式优化：

1. 完善Web App Manifest配置：
   确保manifest.json包含以下关键字段：

   {
     "name": "你的PWA名称",
     "short_name": "短名称",
     "display": "standalone",
     "start_url": "/",
     "icons": [
       {
         "src": "/icons/icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "/icons/icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       }
     ]
   }
   

2. 引导用户开启后台刷新：
   在PWA内添加提示，引导用户进入iOS「设置」→ 找到你的PWA名称 → 开启「后台刷新」，这能让PWA在后台短暂存活时拉取通知。
3. 前台定时拉取+打开即拉取：
   在PWA前台运行时保留setInterval拉取逻辑，同时确保每次用户打开PWA时立即拉取一次通知（你当前的activate事件已包含首次拉取，iOS下打开PWA会重新激活SW，触发该逻辑）。
4. 校验通知权限与图标：
   在前端页面主动请求通知权限，并确保通知图标尺寸≥48x48（推荐192x192），路径可访问。

通用代码修复 #

删除SW中重复的空fetch事件监听：

// 删掉这行代码
// self.addEventListener('fetch', () => {});

这行代码会覆盖之前的离线页面处理逻辑，导致离线功能失效。

importScripts('/rss/umd.js');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

const CACHE = "pwabuilder-offline-page-v001";
const OFFLINE_PAGE = "offline.html";
const NOTIFICATIONS_API = "/api/notifications";
const ICON_BASE_URL = "/storage/photos/users/";
const SYNC_INTERVAL = 15 * 60 * 1000; // 15 minutes

self.addEventListener("message", (event) => {
  if (event.data?.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(OFFLINE_PAGE))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

workbox.routing.registerRoute(
  new RegExp('/rss/*'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: CACHE
  })
);

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(handleFetchEvent(event));
  }
});

async function handleFetchEvent(event) {
  try {
    const preloadResp = await event.preloadResponse;
    if (preloadResp) return preloadResp;

    const networkResp = await fetch(event.request);
    return networkResp;
  } catch {
    const cache = await caches.open(CACHE);
    const cachedResp = await cache.match(OFFLINE_PAGE);
    return cachedResp;
  }
}

const dbPromise = idb.openDB('notification-store', 1, {
  upgrade(db) {
    if (!db.objectStoreNames.contains('notifications')) {
      db.createObjectStore('notifications', { keyPath: 'id' });
    }
  }
});

async function fetchNotifications() {
  try {
    const response = await fetch(NOTIFICATIONS_API);
    if (!response.ok) throw new Error('Failed to fetch notifications');

    const notifications = await response.json();
    for (const notification of notifications) {
      const sent = await isNotificationSent(notification.id);
      if (!sent) {
        await self.registration.showNotification(notification.name, {
          body: notification.dec,
          icon: `${ICON_BASE_URL}${notification.sender_id}/avatar.jpg`,
          badge: '/icons/badge-72x72.png' // 可选，iOS推荐添加badge图标
        });
        await markNotificationAsSent(notification.id);
      }
    }
  } catch (err) {
    console.error('拉取通知失败:', err);
  }
}

async function isNotificationSent(id) {
  const db = await dbPromise;
  const tx = db.transaction('notifications', 'readonly');
  const store = tx.objectStore('notifications');
  const notification = await store.get(id);
  return !!notification;
}

async function markNotificationAsSent(id) {
  const db = await dbPromise;
  const tx = db.transaction('notifications', 'readwrite');
  tx.objectStore('notifications').put({ id: id });
  await tx.done;
}

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    // 注册定期后台同步（仅支持的浏览器）
    if ('PeriodicSyncManager' in self.registration) {
      try {
        await self.registration.periodicSync.register('fetch-notifications', {
          minInterval: SYNC_INTERVAL,
        });
      } catch (err) {
        console.error('定期同步注册失败:', err);
      }
    }
    // 首次激活时拉取通知
    await fetchNotifications();
  })());
});

self.addEventListener('sync', (event) => {
  if (event.tag === 'fetch-notifications') {
    event.waitUntil(fetchNotifications());
  }
});

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