工作箱-后台同步-離線發布-重播瀏覽器重新聯機時的事件

Question

我正在使用Workbox v4.3.1向Web應用程序的用戶提供脫機功能。

雖然所有功能都可以在Chrome中正常運行，就像您希望PWA可以正常工作一樣（即，所有內容都在本地緩存，但來自應用程序的所有更新都捕獲在IndexedDB中，並在應用程序重新聯機時同步回服務器。

但是，對我而言，主要用例是為iOS Safari和PWA提供支持。

盡管所有頁面都使用Safari中的Service Worker在本地緩存，並且所有脫機更新也都捕獲在索引數據庫中，如下所示，

但是，當連接返回聯機狀態時，同步事件不會由瀏覽器（在這種情況下為Safari）觸發。 盡管Safari本身不支持后台同步，但我希望刷新頁面時，如果SW初始化在索引數據庫中發現一些要刷新到服務器的數據，則應該手動觸發sync事件。

但這沒有發生，我嘗試手動監聽“消息”-“ replayRequests”，然后重播請求-效果不佳。

在這里的任何幫助，將不勝感激。 這是服務人員代碼供參考。

// If we're not in the context of a Web Worker, then don't do anything
if ("function" === typeof importScripts) {
  importScripts(
    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
  );

  //Plugins
  // Background Sync Plugin.
  const bgSyncPlugin = new workbox.backgroundSync.Plugin("offlineSyncQueue", {
    maxRetentionTime: 24 * 60
  });

  // Alternate method for creating a queue and managing the events ourselves.
  const queue = new workbox.backgroundSync.Queue("offlineSyncQueue");
  workbox.routing.registerRoute(
    matchCb,
    workbox.strategies.networkOnly({
      plugins: [
        {
          fetchDidFail: async ({ request }) => {
            await queue.addRequest(request);
          }
        }
      ]
    }),
    "POST"
  );
  // CacheKeyControlPlugin
  const myCacheKeyPlugin = {
    cacheKeyWillBeUsed: async ({ request, mode }) => {
      normalizedUrl = removeTimeParam(request.url);
      return new Request(normalizedUrl);
    }
  };

  if (workbox) {
    console.info("SW - Workbox is available and successfully installed");
  } else {
    console.info("SW - Workbox unavailable");
  }

  //Intercept all api requests
  var matchCb = ({ url, event }) => {
    // Filter out the presence api calls
    return url.pathname.indexOf("somethingidontwanttocache") == -1;
  };

  function removeTimeParam(urlString) {
    let url = new URL(urlString);
    url.searchParams.delete("time");
    return url.toString();
  }
  /* //Pre cache a page and see if it works offline - Temp code
  workbox.precaching.precache(getPageAPIRequestURLs(), {
    cleanUrls: false
  }); */
  workbox.routing.registerRoute(
    matchCb,
    new workbox.strategies.CacheFirst({
      cacheName: "application-cache",
      plugins: [myCacheKeyPlugin]
    })
  );

  self.addEventListener("message", event => {
    if (event.data === "replayRequests") {
      queue.replayRequests();
    }
  });
}

Answer 1

每當服務工作者進程啟動時， workbox-background-sync都會通過重播排隊的請求來模擬缺少本機支持的瀏覽器中的后台同步功能。 服務工作者進程本來應該是輕量級的，並且生命周期短，並且在一段時間內沒有任何事件時會被猛烈殺死，然后響應於其他事件而再次啟動。

重新加載網頁可能會導致Service Worker進程啟動，前提是該進程先前已停止。 但是，如果服務工作者仍在運行，則重新加載頁面只會導致在現有進程上觸發fetch事件。

服務工作者進程在被殺死之前可以保持空閑的時間間隔取決於瀏覽器。

Chrome的DevTools提供了一種檢查服務人員狀態並按需啟動/停止狀態的方法，但是我不認為Safari的DevTools提供了該功能。 如果您想證明服務工作者已停止然后再啟動，請退出Safari，重新打開它，然后導航回您的Web應用程序。