Question

我正在关注有关渐进式Web应用程序的Internet教程，其中包含以下示例（重要文件的MWE）：

service-worker.js：

var dataCacheName = 'template-pwa';
var cacheName = 'template-pwa';
var filesToCache = [
  './',
 "./fonts",
 "./fonts/roboto",
 "./fonts/roboto/Roboto-Bold.woff",
 "./fonts/roboto/Roboto-Bold.woff2",
 "./images",
 "./images/icons",
 "./images/icons/icon-128x128.png",
 "./index.html",
 "./manifest.json",
 "./scripts",
 "./scripts/app.js",
 "./scripts/jquery-3.3.1.js",
 "./scripts/materialize.js",
 "./service-worker.js",
 "./styles",
 "./styles/materialize.css",
 "./styles/style.css"
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    }).catch(reason => console.error(reason))
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

manifest.json：

{
  "name": "Template PWA",
  "short_name": "Template PWA",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, 
    }],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

app.js：

(function() {
  'use strict';

  window.onload = function() {
    let message = localStorage.getItem("message") || 'Your message will display here';
    $('#message').html(message);
    $('#display').html(message);
  }

  $('#button').click(() => {
    console.log('click')
    let message = $('#message').val();
    console.log(message);
    $('#display').html(message);
    localStorage.setItem("message", message);
  });

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }
})();

当我在网站上运行PWA时，请使用智能手机访问PWA并将PWA添加到主屏幕中，这样我就可以按预期使用它了。脱机（飞行模式）时，我仍然可以按预期使用PWA。但是，当我向下拖动屏幕（刷新）时，PWA显示“无法访问站点”。

渐进式Web应用程序是否应该被完全缓存以供离线使用？

Answer 1

关于如何调试PWA支持的文档并不多，因为它是一个相对较新的领域，没有太多可以跟进的示例。我建议您看看Rajat S Building a Search-Engine Optimized PWA with Angular — Part 2

所做的一些示例

尤其是最后一部分，详细解释了如何实现PWA。我建议您阅读整个教程，以了解应用程序实施过程的细微细节。

要使应用程序成为真正的“ PWA”，它应该能够轻松地处理“刷新”请求；否则，它不是PWA。

这是这种行为的另一个可能原因： PWA offline error

Answer 2

这是因为您没有将PWA（SPA）的后备时间设置为刷新时的后备时间。

刷新尝试重新加载您的路线，但需要从头开始（index.html）

因此，您需要在配置中添加fallbackUrl，并在刷新时告诉应用程序默认情况下回退到index.html

请阅读：https://github.com/GoogleChromeLabs/sw-precache/issues/166

这帮助了我和你一样的职位

在飞行模式下刷新时，PWA不缓存

2 个答案: