【发布时间】：2017-01-06 11:10:14
【问题描述】：
我开始尝试使用渐进式网络应用程序，但是当涉及到离线缓存时，我要么误解了某些东西，要么做错了。
我有 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>
然后下面是获取和安装事件方法，以及缓存内容，据我了解，如果没有网络，应该返回缓存内容，如果做错了，请纠正我。
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 将如何很快取代原生应用，直到它们提供一种在离线时在缓存页面之间切换的方法。
PS。我在 Windows 和 Android 上使用 Google Chrome 时遇到了这种情况。
【问题讨论】：
-
您仍然需要在您仍然在线时获取每个页面的内容；你能显示实际填充缓存的代码吗？
-
@Claies 我编辑包含安装事件。
-
查看service workers。他们为离线的东西做了很棒的工作。
-
@NikhilRaghavendra 上面的 javascript，是 service worker 的代码。服务人员也在做我的缓存。我只是对它的缓存方式有疑问。
-
我的坏我的坏...所以你只需要你的网站可以离线导航吗？你只能打开index.html，不能去index2.html，这就是你的意思，我说的对吗？
标签： javascript html google-chrome caching progressive-web-apps