如何运行离线“渐进式Web应用程序（Progressive Web Apps）”?

Question

我是一名新手，正在进行渐进式Web应用程序开发。我想实现渐进式Web应用程序。因此，我已经实现了一个演示页面，在有网络连接的情况下，该页面可以正常工作，但在没有网络连接的情况下无法使用。

我想要在没有任何互联网连接（离线）的情况下打开我的渐进式网站。我看到了一个链接https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/。我已经实现了服务工作者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中打开此链接，然后在没有互联网连接的情况下打开它。

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

- Varun Sharma

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);
        })
    );
});

- Lukasz Wiktor

---

是的，这是你在service-worker.js中的代码。我只是添加了一个条件event.request.mode === 'navigate' - 这是用于初始请求的。 - Lukasz Wiktor

我最近也在尝试使用渐进式Web应用程序。我使用UpUp构建了两个简单的PWA - 这是一个简化PWA实现的库。你可以在这里找到我的源代码：https://github.com/toolity/toolity.github.io - Lukasz Wiktor

更清晰的选项可能是将 cacheAll 中的 './index.html' 更改为 './'。 - abraham

哪种UI框架适合渐进式Web应用程序（例如Bootstrap、Materialize或其他）？ - Varun Sharma