Question

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

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

我将逐步解释：

第一步：

我正在使用网络服务器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);

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

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

1 个答案: