重新联机时后台同步不刷新页面答案

【问题标题】：Background sync doesn't refresh page when back online重新联机时后台同步不刷新页面
【发布时间】：2019-08-11 18:09:49
【问题描述】：

最近我开始学习服务工作者、后台同步...我实现了服务工作者并在安装步骤中缓存了一些我想在离线时显示的文件。

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => {
        return cache.addAll([navigationIcon, offlineImage, offlineFallbackPage]);
      })
  );
});

我正在监听 fetch 事件，以便在没有互联网连接时进行捕捉，这样我可以在那时显示离线页面。

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate' || (event.request.method === 'GET'
    && event.request.headers.get('accept')
      .includes('text/html'))) {
    event.respondWith(
      fetch(event.request.url)
        .catch(() => {
          // Return the offline page
          return caches.match(offlineFallbackPage);
        })
    );
  } else {
    event.respondWith(caches.match(event.request)
      .then((response) => {
        return response || fetch(event.request);
      }));
  }
});

我还添加了后台同步，所以我可以在有互联网连接时重新上网。

  .then(swRegistration => swRegistration.sync.register('backOnline'))

我在我的 service worker 中监听同步事件。

当我离线并重新在线时，没有任何反应。但是当我删除我的 fetch 事件（不显示以前缓存的离线页面）时，页面会自行恢复在线（当我有 fetch 事件时我想这样做）

有谁知道我应该添加什么才能让我的页面自行重新上线？

【问题讨论】：

标签： service-worker offline-caching background-sync

【解决方案1】：

您可以使用导航器，将其包含在缓存的主 js 文件或 service-worker js 文件中，只需确保它已缓存

let onlineStatus = locate => { 
  if(navigator.onLine){
    location.replace(locate)
  }
}
let isOfflinePage = window.location.pathname == offlineFallbackPage ? true : false;

// kindly edit isOfflinePage to return true if it's offline page

if(isOfflinePage){
  onlineStatus('index.html')
}

你可以简单地使用 location.reload() 来代替

【讨论】：