1. Добро пожаловать
В этой лабораторной работе вы возьмёте существующее веб-приложение и заставите его работать в автономном режиме. Это первая из серии сопутствующих практикумов для семинара Progressive Web App . В этой серии ещё семь практикумов.
Чему вы научитесь
- Напишите Service Worker вручную
- Добавить Service Worker в существующее веб-приложение
- Используйте Service Worker и API Cache Storage, чтобы сделать ресурсы доступными в автономном режиме.
Что вам следует знать
- Базовый HTML и JavaScript
Что вам понадобится
- Браузер, поддерживающий Service Workers
2. Подготовка
Начните с клонирования или загрузки начального кода, необходимого для выполнения этой лабораторной работы:
Если вы клонируете репозиторий, убедитесь, что вы находитесь на starter ветке. ZIP-файл также содержит код для этой ветки.
Для этой кодовой базы требуется Node.js 14 или выше. После того, как код будет готов, выполните команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем выполните npm start , чтобы запустить сервер разработки для этой кодовой лаборатории.
Файл README.md исходного кода содержит пояснения ко всем распространяемым файлам. Кроме того, ниже перечислены основные существующие файлы, с которыми вы будете работать в ходе этой лабораторной работы:
Ключевые файлы
-
js/main.js— Основной файл JavaScript приложения -
service-worker.js— файл сервисного работника приложения
3. Тестирование в автономном режиме
Прежде чем вносить какие-либо изменения, давайте проверим, работает ли веб-приложение в данный момент в автономном режиме. Для этого либо отключите компьютер и перезагрузите веб-приложение, либо, если вы используете Chrome:
- Откройте инструменты разработчика Chrome
- Перейдите на вкладку «Приложение»
- Перейдите в раздел «Service Workers»
- Установите флажок «Оффлайн»
- Обновите страницу, не закрывая Chrome Dev Tools.
После успешного тестирования сайта и отсутствия проблем с загрузкой в автономном режиме пришло время добавить онлайн-функционал! Снимите флажок «Автономный режим» и перейдите к следующему шагу.
4. Перенесите это в офлайн-режим
Пришло время добавить базовый сервис-воркер! Это будет происходить в два этапа: регистрация сервис-воркера и кэширование ресурсов.
Регистрация работника сферы услуг
Файл сервис-воркера уже пустой, поэтому, чтобы изменения отобразились, зарегистрируем его в нашем приложении. Для этого добавьте следующий код в начало файла js/main.js :
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Объяснение
Этот код регистрирует пустой файл service-worker.js service worker после загрузки страницы и только в том случае, если сайт поддерживает service worker.
Предварительное кэширование ресурсов
Чтобы веб-приложение работало офлайн, браузер должен иметь возможность отвечать на сетевые запросы и выбирать, куда их направлять. Для этого добавьте следующий код в service-worker.js
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Теперь вернитесь в браузер, закройте вкладку предварительного просмотра и откройте её снова. Вы должны увидеть console.log , соответствующие различным событиям в сервис-воркере!
Затем снова перейдите в режим офлайн и обновите сайт. Вы увидите, что он загружается, даже если вы офлайн!
Объяснение
Во время установки сервис-воркера открывается именованный кэш с помощью API Cache Storage. Файлы и маршруты, указанные в precacheResources , затем загружаются в кэш с помощью метода cache.addAll . Это называется предварительным кэшированием , поскольку набор файлов кэшируется заранее во время установки, а не по мере необходимости или запроса.
После того, как сервис-воркер получает управление сайтом, запрошенные ресурсы проходят через него как через прокси-сервер. Каждый запрос запускает событие fetch, которое в этом сервис-воркере ищет в кэше совпадение. Если совпадение находится, он возвращает кэшированный ресурс. Если совпадения нет, ресурс запрашивается обычным образом.
Кэширование ресурсов позволяет приложению работать офлайн, избегая сетевых запросов. Теперь приложение может отвечать кодом статуса 200, даже если оно офлайн!
5. Поздравляем!
Вы узнали, как перевести веб-приложение в автономный режим с помощью Service Worker и API хранилища кэша.
Следующая лабораторная работа в серии — «Работа с Workbox».