Javascript “如何脱机运行”；“渐进式Web应用程序”；？

我是渐进式Web应用程序开发的新手。我想实现渐进式Web应用程序。因此，我实现了一个演示页面，该页面在网络连接下运行良好，但在没有网络的情况下（在脱机状态下）无法运行。

我想在没有任何internet连接（脱机）的情况下打开我的渐进式网站。我看到了一个链接。我已经实现了服务工作者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);

服务工作者.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文件工作正常，您可以在屏幕截图中看到：

但当我点击离线复选框时，我的网站无法运行。如果所有这些事情都做对了，那么它必须在离线状态下打开。

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

如果有人有疑问，请查看此链接。你可以 在chrome中打开此链接，然后在没有internet连接的情况下打开它 将打开

---

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

在处理

获取事件时，您需要根请求
/
的额外条件：

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

是的，这是service-worker.js中的代码。我刚刚添加了'event.request.mode=='navigate'的条件，这是用于初始请求的。最近我还在尝试渐进式Web应用程序。我构建了2个简单的PWA，其中包含一个简化PWA实现的库。您可以在这里找到我的源代码。更干净的选项可能是将
cacheAll
中的
'./index.html'
更改为
'./'
哪个UI框架适合渐进式web应用程序（如引导、物化和任何其他？）