Service Workers に関する多くのリソースを調べました。
- ServiceWorker の更新
- ServiceWorker: Web プラットフォームの革命
- Jake Archibald の素敵なSVGOMG。
ただし、新しい ServiceWorker がインストールされた後にページを更新する方法を理解することはできません。何をしても、私のページは古いバージョンのままで、ハード リフレッシュ (Cmd-Shift-R) だけが修正されます。1) タブを閉じる、2) Chrome を閉じる、または 3)location.reload(true)を組み合わせても、新しいコンテンツは提供されません。
主にSVGOMGに基づいた非常に単純なサンプルアプリがあります。インストール時に、 を使用して一連のリソースをキャッシュします。また、現在のバージョンのメジャー バージョン番号がアクティブなバージョンの番号と一致しない場合cache.addAll()にも行いますskipWaiting()(IndexedDB ルックアップに基づく)。
self.addEventListener('install', function install(event) {
event.waitUntil((async () => {
var activeVersionPromise = localForage.getItem('active-version');
var cache = await caches.open('cache-' + version);
await cache.addAll(staticContent);
var activeVersion = await activeVersionPromise;
if (!activeVersion ||
semver.parse(activeVersion).major === semver.parse(version).major) {
if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
self.skipWaiting();
}
}
})());
});
私は、メジャー バージョン番号が新しい ServiceWorker を古い ServiceWorker にホットスワップできないことを示す、semver にインスパイアされたシステムを使用しています。これは ServiceWorker 側で機能します。v1.0.0 から v1.0.1 へのバンプでは、ワーカーは更新時にすぐにインストールされますが、v1.0.0 から v2.0.0 では、タブが閉じられて再度開かれるまで待機します。インストールされています。
メインスレッドに戻って、登録後に ServiceWorker を手動で更新しています。そうしないと、ServiceWorker の新しいバージョンが利用可能であるというメモがページに表示されません (奇妙なことに、ServiceWorker の文献のどこにもこれについての言及はほとんどありません)。
navigator.serviceWorker.register('/sw-bundle.js', {
scope: './'
}).then(registration => {
if (typeof registration.update == 'function') {
registration.update();
}
});
ただし、メイン スレッドに提供されるコンテンツは、バージョンを 1.0.1 にインクリメントするか 2.0.0 にインクリメントするかに関係なく、ページの古いバージョン (「私のバージョンは 1.0.0」) で常に停止します。
私はここで困惑しています。私はServiceWorkerのバージョニングに対するエレガントなsemver-yソリューションを見つけたいと思っていました（したがって、私の使用require('./package.json').version）が、現在の実装では、ハードリフレッシュするか手動ですべてをクリアしない限り、ユーザーは永久にページの古いバージョンにとどまります彼らのデータ。:/