1. Добро пожаловать
В этой лабораторной работе вы возьмете существующее веб-приложение и настроите его на работу в автономном режиме. Это первая из серии дополнительных лабораторных работ к семинару по прогрессивным веб-приложениям . В этой серии еще семь лабораторных работ.
Что вы узнаете
- Напишите от руки "Работник сферы услуг"
- Добавьте Service Worker в существующее веб-приложение.
- Используйте Service Worker и API кэширования, чтобы сделать ресурсы доступными в автономном режиме.
Что вам следует знать
- Основы HTML и JavaScript
Что вам понадобится
- Браузер, поддерживающий сервис-воркеры.
2. Настройка
Для начала клонируйте или скачайте исходный код, необходимый для выполнения этого практического задания:
Если вы клонируете репозиторий, убедитесь, что вы находитесь в starter ветке. В zip-архиве также содержится код для этой ветки.
Для работы этого кода требуется Node.js версии 14 или выше. После загрузки кода запустите команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем запустите npm start , чтобы запустить сервер разработки для этого проекта.
В файле README.md исходного кода содержится пояснение ко всем распространяемым файлам. Кроме того, в ходе этой практической работы вы будете работать со следующими ключевыми существующими файлами:
Ключевые файлы
-
js/main.js- Основной JavaScript-файл приложения -
service-worker.js— файл сервис-воркера приложения
3. Тестирование в автономном режиме
Прежде чем вносить какие-либо изменения, давайте проверим, не работает ли веб-приложение в автономном режиме. Для этого либо отключите компьютер от сети и перезагрузите веб-приложение, либо, если вы используете Chrome:
- Откройте инструменты разработчика Chrome.
- Перейдите на вкладку «Приложение».
- Перейти в раздел «Работники сферы услуг»
- Установите флажок «Офлайн».
- Обновите страницу, не закрывая инструменты разработчика Chrome.
После тестирования сайта и подтверждения отсутствия загрузки в офлайн-режиме, пришло время добавить онлайн-функциональность! Снимите флажок «Офлайн» и перейдите к следующему шагу.
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 workers.
Предварительное кэширование ресурсов
Для работы веб-приложения в автономном режиме браузер должен уметь отвечать на сетевые запросы и выбирать, куда их перенаправлять. Для этого добавьте следующий код в файл 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 хранилища кэша. Затем файлы и маршруты, указанные в precacheResources , загружаются в кэш с помощью метода cache.addAll . Это называется предварительным кэшированием, потому что набор файлов кэшируется заранее во время установки, а не по мере необходимости или запроса.
Как только сервис-воркер начинает управлять сайтом, запрашиваемые ресурсы проходят через него как через прокси. Каждый запрос запускает событие fetch, которое в этом сервис-воркере ищет совпадение в кэше; если совпадение найдено, он отправляет кэшированный ресурс. Если совпадения нет, ресурс запрашивается обычным способом.
Кэширование ресурсов позволяет приложению работать в автономном режиме, избегая сетевых запросов. Теперь приложение может отвечать кодом состояния 200, находясь в автономном режиме!
5. Поздравляем!
Вы научились переводить веб-приложение в автономный режим с помощью сервис-воркеров и API кэширования.
Следующая практическая работа в этой серии посвящена работе с Workbox.