Введение

В этой статье демонстрируется использование Service Workers для отображения настраиваемого автономного представления, когда веб-браузер не подключен к сети. Сервисные работники являются ключом к прогрессивным веб-приложениям, веб-сайтам, которые можно установить на домашний экран в виде приложения.

Проблемы

Несколько. Эта функция не предназначена для развертывания новичками. Поддержка сервис-воркеров остается неравномерной, но если браузер не поддерживает ее, веб-сайт будет работать нормально. Устранение неполадок может быть затруднено, если вы не знаете, как принудительно перезагрузить браузер. Пользовательский автономный вид Другими словами, вы будете думать, что развернули обновление, хотя на самом деле предыдущий сервис-воркер остается активным.

Наконец, поскольку мы эффективно вставляем посредника между браузером и сетью, в браузеры встроены меры безопасности, которые генерируют множество вводящих в заблуждение ошибок, если наш сервис-воркер не реализован правильно.

Настройка и установка

Установите сервисного работника, файл javascript, через обычный JavaScript вашего веб-сайта. Вы захотите проверить поддержку браузера перед установкой работника службы, как показано ниже.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}

Примечания по JavaScript сервисного работника

Стоит отметить пару ключевых особенностей. Любой просматриваемый файл автоматически добавляется в кэш в дополнение к файлам, указанным в массиве. Обновление CACHE_NAME указывает браузеру переоценить кэшированные файлы и удалить лишние файлы. Кроме того, мы должны установить режим перенаправления интерфейса запроса Fetch API на «ручной». Без этой настройки пользовательская страница автономного статуса не будет отображаться.

Сервисный работник JavaScript

Сценарий ниже устанавливает массив файлов в кеш браузера. Это делает эти файлы доступными даже в случае сбоя в сети. Ваш массив файлов может отличаться. Настройте свой сценарий соответствующим образом.

var CACHE_NAME = "htt-cache-v007";
var OFFLINE_URL = "/offline";
var REQUIRED_FILES = [
    "/offline",
    "/app.min.css",
    "/app.min.js",
    "/favicons/android-chrome-192x192.png",
    "/favicons/android-chrome-512x512.png",
    "/favicons/apple-touch-icon.png",
    "/favicons/browserconfig.xml",
    "/favicons/favicon-16x16.png",
    "/favicons/favicon-32x32.png",
    "/favicons/favicon.ico",
    "/favicons/manifest.json",
    "/favicons/mstile-150x150.png",
    "/favicons/safari-pinned-tab.svg",
    "/media/logo.png"
];
self.addEventListener('install', function(event) {
    event.waitUntil(caches.open(CACHE_NAME).then(function(cache) {
        return Promise.all(REQUIRED_FILES.map(function(url) {
            return fetch(new Request(url, { redirect: 'manual' })).then(function(res) {
                return cache.put(url, res);
            });
        }));
    }));
});
self.addEventListener('fetch', function(event) {
    if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        if(event.request.url.includes("your-domain-name.com")){
            event.respondWith (
                caches.match (event.request, {cacheName: CACHE_NAME}).then(function(resp) {
                    return resp || fetch(event.request).then(function(response) {
                        let responseClone = response.clone();
                        caches.open(CACHE_NAME).then(function(cache) {
                            cache.put(event.request, responseClone);
                        });
                        return response;
                    });
                }).catch(function(error) {
                    return caches.open(CACHE_NAME).then(function (cache) {
                        return cache.match(OFFLINE_URL);
                    });
                })
            );
        }
    }
});
self.addEventListener('activate', function(event) {
    var cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (cacheWhitelist.indexOf(key) === -1) {
                    console.log('Deleting out of date cache:', CACHE_NAME);
                    return caches.delete(key);
                }
            }));
        })
    );
});

Поиск неисправностей

Одна проблема, которую я понял, заключалась в том, как работать с чистыми URL-адресами, т. Е. URL-адресами, где расширение файла удаляется веб-сервером. Например, многие веб-сайты настроены так, чтобы скрывать расширение файла «.html» или «.php» в URL-адресе. Расширение файла очень важно при использовании сервис-воркеров. Включайте файлы в сервис-воркер так, как они появляются на вашем веб-сайте. Если вашему серверу требуется расширение файла, включите его в сценарий сервисного работника. Если ваш сервер удаляет расширение файла, не включайте расширение файла в сценарий сервисного работника.

Не забудьте протестировать автономный просмотр в разных браузерах. Используйте инструменты разработчика (Ctrl+Shift+i), чтобы отслеживать состояние кеша браузера и сервисного работника.