web-dev-qa-db-ja.com

サービスワーカーが更新しない

私は自分のWebサイトにService Workerをインストールしていますが、キャッシュされたファイルに更新をプッシュする場合を除いて、すべてが正常に機能します。それらは永久にキャッチされたままであり、 `chrome：// serviceworker-internals /からワーカーをサブスクライブしない限り、キャッシュを無効にできないようです

_const STATIC_CACHE_NAME = 'static-cache-v1';
const APP_CACHE_NAME = 'app-cache-#VERSION';

const CACHE_APP = [
    '/',
    '/app/app.js'
]
const CACHE_STATIC = [
    'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700',
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css'
]

self.addEventListener('install',function(e){
    e.waitUntil(
        Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){
            var static_cache = storage[0];
            var app_cache = storage[1];
            return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]);
        })
    );
});

self.addEventListener('activate', function(e) {
    e.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) {
                        console.log('deleting',cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch',function(e){
    const url = new URL(e.request.url);
    if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){
        e.respondWith(
            caches.match(e.request).then(function(response){
                if (response) {
                    return response;
                }
                var fetchRequest = e.request.clone();

                return fetch(fetchRequest).then(function(response) {
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }
                    var responseToCache = response.clone();
                    caches.open(STATIC_CACHE_NAME).then(function(cache) {
                        cache.put(e.request, responseToCache);
                    });
                    return response;
                });
            })
        );
    } else if (CACHE_APP.indexOf(url.pathname) !== -1){
        e.respondWith(caches.match(e.request));
    }
});
_

#VERSIONは、コンパイル時にキャッシュ名に追加されるバージョンです。ファイルは永久に静的であると考えられるため、STATIC_CACHE_NAMEは決して変更されないことに注意してください。

また、動作が不安定です。削除機能（ログが記録される部分）をチェックしており、既に削除された（おそらく）削除キャッシュについてログを記録し続けます。 caches.keys().then(function(k){console.log(k)})を実行すると、削除されているはずの古いキャッシュがたくさん集まります。

javascriptweb-workerservice-worker
15
Onza

Udacityに関するいくつかのビデオをグーグルおよび視聴した後、ワーカーの意図された動作は、それが制御するページが閉じられ、新しいサービスワーカーが制御を取り戻すことができるときに再び開かれるまでとどまることです。

解決策は、 https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting に基づいて制御を強制することでした==以下の場合でも問題は解決しました新しいワーカーが変更を反映するために2回の再読み込みが必要です（新しいワーカーが以前のワーカーを置き換える前にアプリが読み込まれるため、これは理にかなっています）。

self.addEventListener('install',function(e){
    e.waitUntil(
        Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){
            var static_cache = storage[0];
            var app_cache = storage[1];
            return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]);
        })
    );
});

self.addEventListener('activate', function(e) {
    e.waitUntil(
        Promise.all([
            self.clients.claim(),
            caches.keys().then(function(cacheNames) {
                return Promise.all(
                    cacheNames.map(function(cacheName) {
                        if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) {
                            console.log('deleting',cacheName);
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});
16
Onza

「サービスワーカーの初心者」として、Chrome Canary。

問題は、/sw/index.jsに作業コードが含まれていて、/sw/index.jsにエラーが発生したことです。エラーが発生したとき、ブラウザは更新されたコードのロードを拒否し、以前の稼働中のService Workerのロードを続行しました。 index.jsのコードを修正してページを更新すると、Service Workerの新しいコードが表示されました。エラーが発生したコードはエラーをスローすると考えていましたが、そうではありませんでした。ブラウザは以前のエラーのないバージョンをロードしました。

0
Bruce Seymour