2016-01-18 14 views
13

私は接客業に多くのリソースを相談しました:ServiceWorkerの更新後にページを更新する方法はありますか?

しかし、新しいServiceWorkerをインストールした後にページを更新する方法がわかりません。私が何をするにしても、私のページは古いバージョンに固執しており、ハードリフレッシュ(Cmd-Shift-R)だけで修正されます。 1)タブを閉じる、2)クロムを閉じる、3)location.reload(true)を組み合わせると新しいコンテンツが配信されません。

私はsuper simple example appを主に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.0である」)ページの古いバージョンに貼り付けますバージョンを1.0.1または2.0.0に変更します。

私はここでうんざりしています。私はServiceWorkerのバージョン管理(したがって私の使用はrequire('./package.json').version)のエレガントなsemver-yソリューションを探していましたが、現在の実装では、ハードリフレッシュまたは手動で削除しない限り、古いバージョンのページが永久にスタックされますすべてのデータ。 :/

+0

新しいサービスワーカーが確実にインストールされているかどうかを確認できません。あなたは主張しているが、それが本当にインストールされていることを保証していない。 –

答えて

16

はあなたがどんなを避けるために必要–問題を発見 ServiceWorker JSファイル自体のキャッシュヘッダー。max-age=0にキャッシュを設定すると、すぐに問題を解決:ストレート私を設定するためのジェイク・アーチボルドにhttps://github.com/nolanlawson/serviceworker-update-demo/pull/1

乾杯:クロームカナリアでhttps://twitter.com/jaffathecake/status/689214019308224513

+0

max-age = 0何らかの悪影響を及ぼすか? – jasan

+0

ありがとう、私は同じ問題を抱えてきた。私はhttp-server npmパッケージを使用しており、これを読んだ後、デフォルトでmax-age = 2600を設定することを学びました。 '-c-1'を使用してサーバを起動すると、それが無効になり、サービスワーカーがより予測可能に動作します。例えば。 'http-server -c-1 -p 8081' –

3

外部:クロムを使用してサービスワーカーを停止し、登録を解除:// serviceworker-内部/

サービスワーカー自体から内部:https://developer.mozilla.org/en-US/docs/Web/API/Clients/claimhttps://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

+0

私は既にこれをやっています:https://github.com/nolanlawson/serviceworker-update-demo/blob/ba99e52b7a88b3a125352c9b91bae6a0683550f3/sw.js#L48-L52 – nlawson

1

あなたが登録解除などのサービス労働者のプロファイリングと管理のすべての並べ替えを行うことができ、アプリケーションで明確なタブ://デバイス/物理デバイスでデバッグする:クロムであること

enter image description here

ペア。

関連する問題