Chrome требуется обновление вручную для Service Worker для обслуживания кэшированного содержимого? - PullRequest
Новая
       5

Chrome требуется обновление вручную для Service Worker для обслуживания кэшированного содержимого?

0 голосов
/ 10 января 2019

Я внедряю Service Worker на одностраничном веб-сайте, который кэширует html и все необходимые ресурсы, чтобы его можно было просматривать в автономном режиме.

Я впервые открыл страницу в Safari или Firefox, а затем переключился в автономный режим. Я все еще могу обновить страницу, и она отображается нормально.

Однако в Chrome мне нужно один раз обновить страницу до перехода в автономный режим. Я получаю обычную ошибку Chrome: «Возможно, веб-страница временно недоступна или постоянно перемещена».

Может быть, полезно знать, что, когда я включаю свое Wi-Fi-соединение при открытой странице ошибки, страница автоматически перезагружается. После этого я могу перейти в автономный режим, и кэшированная версия обслуживается в обычном режиме.

Что я делаю не так?

/ index.html (Эта часть находится в конце тела.) 

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/service-worker.js')
                .then(registration => {
                    console.log('SW registered with scope:', registration.scope);
                })
                .catch(err => {
                    console.error('Registration failed:', err);
                });
        });
    }
</script>

/ сервис-worker.js 

self.addEventListener('install', event => {
    console.log('Service worker installing...');
    event.waitUntil(
        caches.open('campingcomfort-v2').then(function(cache) {
            return cache.addAll(
                [
                    '/app/index.html',
                    '/css/app/app.css',
                    '/js/app/app.js',
                    '/fonts/vendor/onsenui/css/material-design-iconic-Material-Design-Iconic-Font.woff',
                    '/fonts/vendor/onsenui/css/material-design-iconic-Material-Design-Iconic-Font.woff2?a4d31128b633bc0b1cc1f18a34fb3851',
                    '/fonts/vendor/onsenui/css/material-design-iconic-Material-Design-Iconic-Font.ttf'
                ]
            );
        })
    );
});
self.addEventListener('activate', event => {
    console.log('Service worker activating...');
});
self.addEventListener('fetch', function(event) {
    console.log('Fetching:', event.request.url);
    event.respondWith(
        caches.open('campingcomfort-v2').then(function(cache) {
            return cache.match(event.request).then(function (response) {
                return response || fetch(event.request).then(function(response) {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

Вход в консоль при первой загрузке: 

SW registering with scope: https://www.campingcomfort.app/
Service worker installing...
Service worker activating...

Регистрация Conole после автоматического обновления при включении интернета 

Fetching: https://www.campingcomfort.app/css/app/app.css
Fetching: https://www.campingcomfort.app/js/app/js.css
Fetching: https://www.campingcomfort.app/fonts/vendor/etc...
SW registered with scope: https://www.campingcomfort.app/

Живая версия вышеупомянутого может быть проверена здесь: https://www.campingcomfort.app/app/index.html

...