如何离线运行“Progressive Web Apps”？

Question

我是渐进式 Webs 应用程序开发的新手。我想实现渐进式网络应用程序。所以我已经实现了一个演示页面，这个页面在网络连接的情况下工作正常，但没有网络（离线）它不起作用。

我想在没有任何互联网连接（离线）的情况下打开我的渐进式网站。我看过一个链接https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/。我已经实现了 service worker javascript 文件。

我会一步一步解释：

第一步：

我正在使用 Web 服务器 chrome：

第二步： index.html

  // Register the service worker if available.
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js').then(function(reg) {
  console.log('Successfully registered service worker', reg);
  }).catch(function(err) {
  console.warn('Error whilst registering service worker', err);
  });
  }

  window.addEventListener('online', function(e) {
  // Resync data with server.
  console.log("You are online");
  Page.hideOfflineWarning();
  Arrivals.loadData();
  }, false);

  window.addEventListener('offline', function(e) {
  // Queue up events for server.
  console.log("You are offline");
  Page.showOfflineWarning();
  }, false);

  // Check if the user is connected.
  if (navigator.onLine) {
  Arrivals.loadData();
  } else {
  // Show offline message
  Page.showOfflineWarning();
  }

  // Set Knockout view model bindings.
  ko.applyBindings(Page.vm);

Service-worker.js

// Use a cacheName for cache versioning
  var cacheName = 'v1:static';

  // During the installation phase, you'll usually want to cache static assets.
  self.addEventListener('install', function(e) {
  // Once the service worker is installed, go ahead and fetch the resources to make this work offline.
  e.waitUntil(
  caches.open(cacheName).then(function(cache) {
  return cache.addAll([
  './index.html',
  './screen.css',
  './script.js',
  './styles/app.css',
  './styles/font.css',
  './styles/header.css',
  './styles/hidden.css',
  './styles/list.css',
  './styles/page.css',
  './styles/suggest.css',
  './styles/tags.css', 

  ]).then(function() {
  self.skipWaiting();
  });
  })
  );
  });

  // when the browser fetches a URL…
  self.addEventListener('fetch', function(event) {
  // … either respond with the cached object or go ahead and fetch the actual URL
  event.respondWith(
  caches.match(event.request).then(function(response) {
  if (response) {
  // retrieve from cache
  return response;
  }
  // fetch as normal
  return fetch(event.request);
  })
  );
  });

第三步 签入网络：

签入申请：
Service-worker.js 文件运行良好，您可以在屏幕截图中看到：

但是当我点击离线复选框时，我的网站无法正常工作。如果所有这些事情都以正确的方式进行，那么它必须离线打开。

如果有任何遗漏，请告诉我。请不要拒绝这个问题。如果有人有想法，请分享。

如果有人有疑问，请查看此链接https://pwa.rocks/。你可以 在 chrome 中打开此链接，然后在没有互联网连接的情况下打开它 将打开。

如果需要解释，请向我询问。

Answer 1

在处理fetch 事件时，您需要为根请求/ 提供额外条件：

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});