在 PWA 中运行离线 Service Worker 和 OneSignal

Question

我有一个 PWA，我正在尝试同时运行 OneSignal（用于网络推送通知订阅）和我自己的离线 Service Worker。他们都各自工作。如果我同时启用它们，离线服务工作人员将继续工作，但 OneSignal 订阅/取消订阅功能将停止工作。我已经尝试了几次迭代，其中一种工作或另一种工作水平不同，但这是我设法获得的最接近的结果。任何帮助或提示将非常感激。谢谢。

这是我的 html 头部部分的脚本：

#我的离线 Service Worker 实现（我首先加载）

<script>
    if (typeof navigator.serviceWorker !== 'undefined') {
        navigator.serviceWorker.register('sw.js?v=18')
        .then(function(registration) {
            console.log('Offline Service Worker registered with scope:', registration.scope);
        })
        .catch(function(error) {
            console.error('Offline Service Worker registration failed:', error);
        });
    }
</script>

#Then OneSignal，由他们的 Web 仪表板提供（尽管我在此处添加了额外的 serviceWorkerParam 来设置范围）

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(async function(OneSignal) {
        await OneSignal.init({
            appId: "9fe83875-6838-4bae-9bb8-cc3bd9d684ea",
            serviceWorkerParam: { scope: "/push/oneSignal/" },
        });
    });
</script>

这是我的 sw.js 文件的内容

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

const CACHE = "pwabuilder-page";

const offlineFallbackPage = "offline.html";

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

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => {
        return cache.add(offlineFallbackPage).catch(error => {
          console.error('Failed to cache the offline page:', error);
        });
      })
  );
});

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

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

Answer 1

我通过以下更改得到了这个工作：

首先加载 OneSignal（不带 serviceWorkerParam），然后在页面的头部加载我的离线服务工作人员（serviceworker.js）

//Initialise OneSignal
<script src = "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js"defer ></script> 
<script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
        appId: "<App-Id>"
    });
}); 
</script> 

//Initialise offline service worker
<script >
    if (typeof navigator.serviceWorker !== 'undefined') {
        navigator.serviceWorker.register('serviceworker.js?v=22')
            .then(function(registration) {
                console.log('Offline Service Worker registered with scope:', registration.scope);
            })
            .catch(function(error) {
                console.error('Offline Service Worker registration failed:', error);
            });
    } 
</script>

并使用以下设置更新 OneSignal 仪表板/ui 上的第 5 节（高级推送设置）：

Customize service worker paths and filenames (enabled)
Path to service worker files: /
Main service worker filename: OneSignalSDKWorker.js
Updater service worker filename: OneSignalSDKWorker.js
Service worker registration scope: /onesignal (or whatever you would like your scope to be)

现在 OneSignal 订阅和离线页面都适用于我的 PWA。