1
プログレッシブウェブアプリケーションを試してみましたが、オフラインキャッシュについては誤解しています。プログレッシブウェブアプリケーション - オフライン時に複数のキャッシュされたページ間を移動する
私は、同一の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ページを開くだろう、ですが、私は2つのページ間を移動しようとすると、それが自然に真である、私はオフラインだと言って私にエラーを与えます私がオフラインになっている間に複数のキャッシュされたページ間を移動できるような方法でファイルをキャッシュするはずのオフラインキャッシュの背後にあるアイデアですか？
もしそうなら、どこが間違っていますか？
もしそうでなければ、オフラインでキャッシュされたページを切り替える方法が提供されるまで、いつでもすぐにネイティブアプリケーションを置き換える方法はわかりません。
PS。 WindowsとAndroidでGoogle Chromeを使用しています。
で
self.clients.claim()の使用に関する詳細情報があります。実際にキャッシュにデータを挿入するコードを表示できますか？ – Claies@Claiesインストールイベントを含むように編集しました。 – Anomaly
[サービスワーカー]（https://developers.google.com/web/fundamentals/getting-started/primers/service-workers）を参照してください。彼らはオフラインのもののためにすばらしい仕事をします。 –