web-dev-qa-db-ja.com

ServiceWorkerの更新後にページを更新する方法は？

サービスワーカーに関する多くのリソースを調べました。

ただし、新しいServiceWorkerがインストールされた後にページを更新する方法を理解することはできません。私が何をしようとも、ページは古いバージョンのままで、ハードリフレッシュ（Cmd-Shift-R）だけで修正されます。 1）タブを閉じる、2）Chromeを閉じる、または3）location.reload(true)を組み合わせて新しいコンテンツを提供することはできません。

私は 超シンプルなサンプルアプリ を主にSVGOMGに基づいています。インストール時に、cache.addAll()を使用して一連のリソースをキャッシュします。また、現在のバージョンのメジャーバージョン番号がアクティブなバージョンの番号と一致しない場合（IndexedDBルックアップに基づく）にもskipWaiting()を実行します）：

_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側で機能します。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のバージョニングのエレガントなソリューションを見つけたいと思っていましたが（require('./package.json').versionを使用しているため）、現在の実装では、ユーザーは難しい場合を除いて、古いバージョンのページにとどまります。 -すべてのデータを更新または手動で消去します。 ：/

javascriptservice-workerprogressive-web-apps
21
nlawson

問題が見つかりました– ServiceWorker JSファイル自体のanyキャッシュヘッダーを回避する必要があります。キャッシュをmax-age=0に設定すると、問題はすぐに解決しました： https://github.com/nolanlawson/serviceworker-update-demo/pull/1

私を正直に設定してくれたJake Archibaldに乾杯： https://Twitter.com/jaffathecake/status/68921401930822451

25
nlawson

外部：chrome：// serviceworker-internals /を使用してService Workerを停止し、登録を解除します

Service Worker自体の内部： https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim および https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

4
gleb bahmutov

Chrome Canaryでは、登録解除などのあらゆる種類のService Workerプロファイリングと管理を実行でき、[アプリケーション]タブでクリアします：

enter image description here

これをchrome：// devices /とペアにして、物理デバイスでデバッグします。

2
Elise Chant