相关疑难解决方法(0)

检测服务工作者中脱机状态的最佳实践

我有一个服务工作者,offline.html如果客户端没有网络连接,它应该缓存显示的页面.但是,它有时会认为导航器即使不是离线也是脱机的.就是这样navigator.onLine === false.这意味着offline.html即使在线,用户也可以获得而不是实际内容,这显然是我想避免的.

这是我在我的注册服务工作者的方式main.js:

// Install service worker for offline use and caching
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {scope: '/'});
}
Run Code Online (Sandbox Code Playgroud)

我目前service-worker.js:

const OFFLINE_URL = '/mysite/offline';
const CACHE_NAME = 'mysite-static-v1';

self.addEventListener('install', (event) => {
  event.waitUntil(
    // Cache the offline page when installing the service worker
    fetch(OFFLINE_URL, { credentials: 'include' }).then(response =>
      caches.open(CACHE_NAME).then(cache => cache.put(OFFLINE_URL, response)),
    ),
  );
});

self.addEventListener('fetch', (event) => {
  const requestURL = new URL(event.request.url);

  if (requestURL.origin …
Run Code Online (Sandbox Code Playgroud)

javascript offline service-worker progressive-web-apps

18
推荐指数
1
解决办法
1万
查看次数