我开始尝试渐进式网络应用程序，但当涉及离线缓存时，我要么误解了某些内容，要么做错了一些事情。
我有 2 个相同的 HTML 页面(index.html 和 index2.html)，代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Test PWA</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/assets/app_styles.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/assets/icon1.png" />
</head>
<body>
<header class="header">
<h1>Test web app</h1>
</header>
<nav>
<a href="/index.html">Page 1</a>
<a href="/index2.html">Page 2</a>
</nav>
<script type="text/javascript" src="/assets/app_scripts.js"></script>
</body>
</html>
下面是fetch和install事件方法，以及缓存内容，根据我的理解，如果没有网络，应该返回缓存内容，如果做得不对，请纠正我。
var CacheName = 'TestPWA_Cache';
var CacheContents = [
'/',
'/index.html',
'/index2.html',
'/assets/app_scripts.js',
'/assets/app_styles.css',
'/assets/icon1.png',
'/assets/icon2.png',
'/assets/icon3.png'
];
self.addEventListener('install', function (event) {
event.waitUntil(caches.open(CacheName).then(function (cache) {
console.log("Service worker install sucess.");
return cache.addAll(CacheContents).then(function () {self.skipWaiting(); });
}).catch(function (err) {
console.log("Service worker install failed! "+err);
}));
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
if (response) return response;
return fetch(event.request);
}));
});
我的问题是，当我离线时，它会打开 index.html 页面，但是当我尝试在两个页面之间导航时，它会给出一个错误，提示我已离线，这自然是正确的，但是脱机缓存背后的想法是否不应该以允许我在脱机时在多个缓存页面之间导航的方式缓存文件？
如果是这样，我哪里出错了？
如果没有，那么我看不到 PWA 将如何很快取代 native 应用程序，直到它们提供离线时在缓存页面之间切换的方法。
PS。我在 Windows 和 Android 上使用 Google Chrome 时遇到了这种情况。最佳答案
服务工作线程的 fetch 事件处理程序会针对其控制的客户端发出的导航请求而触发。这绝对是服务 worker 的预期用例之一。
我注意到您没有在 Service Worker 的 activate 事件中调用 self.clients.claim()。这本身不是问题，但它意味着您新安装的服务工作人员将无法控制当前的客户端选项卡/窗口。直到您下次访问 Web 应用时，Service Worker 才会控制页面，并开始触发 fetch 事件处理程序。因此，如果您在安装新的 Service Worker 之后立即测试离线导航，然后在关闭并重新访问该网站之前，这将解释您所看到的情况。
有关使用 self.clients.claim() 的更多信息，请访问 https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim
关于javascript - 渐进式 Web 应用程序 - 离线时在多个缓存页面之间导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41504421/