1. Добро пожаловать
В этой лабораторной работе вы возьмете существующее веб-приложение и заставите его работать в автономном режиме. Это первая из серии сопутствующих лабораторных работ для семинара по прогрессивным веб-приложениям . В этой серии есть еще семь кодлабов.
Что вы узнаете
- Написать Service Worker вручную
- Добавьте Service Worker в существующее веб-приложение
- Используйте Service Worker и Cache Storage API, чтобы сделать ресурсы доступными в автономном режиме.
То, что вы должны знать
- Базовый 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 Dev Tools
- Перейдите на вкладку Приложение
- Перейдите в раздел Service Workers
- Установите флажок «Не в сети»
- Обновите страницу, не закрывая Chrome Dev Tools
Поскольку сайт протестирован и успешно не загружается в автономном режиме, пришло время добавить некоторые онлайн-функции! Снимите флажок «Не в сети» и перейдите к следующему шагу.
4. Отключите его от сети
Пришло время добавить базового сервис-воркера! Это произойдет в два этапа: регистрация сервис-воркера и кэширование ресурсов.
Зарегистрировать сервисного работника
Там уже есть пустой файл сервис-воркера, поэтому, чтобы убедиться, что изменения отображаются, давайте зарегистрируем его в нашем приложении. Для этого добавьте следующий код в начало js/main.js :
import swURL from 'sw:../service-worker.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 {
const reg = await navigator.serviceWorker.register(swURL);
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Объяснение
Этот код регистрирует пустой файл service-worker.js после загрузки страницы и только в том случае, если сайт поддерживает сервис-воркеры.
Ресурсы предварительного кэширования
Чтобы веб-приложение работало в автономном режиме, браузер должен иметь возможность отвечать на сетевые запросы и выбирать, куда их направлять. Для этого добавьте в 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 , соответствующие различным событиям в сервис-воркере!
Затем снова отключитесь и обновите сайт. Вы должны увидеть, что он загружается, даже если вы не в сети!
Объяснение
Во время события установки сервис-воркера именованный кеш открывается с помощью Cache Storage API. Файлы и маршруты, указанные в precacheResources , затем загружаются в кеш с помощью метода cache.addAll . Это называется предварительным кэшированием , потому что оно упреждающе кэширует набор файлов во время установки, а не кэширует их, когда они необходимы или запрашиваются.
Как только сервис-воркер начинает контролировать сайт, запрошенные ресурсы проходят через сервис-воркера, как через прокси. Каждый запрос запускает событие выборки, которое в этом сервис-воркере ищет совпадение в кеше, и, если есть совпадение, отвечает кэшированным ресурсом. Если совпадения нет, ресурс запрашивается в обычном режиме.
Кэширование ресурсов позволяет приложению работать в автономном режиме, избегая сетевых запросов. Теперь приложение может отвечать кодом состояния 200 в автономном режиме!
5. Поздравляем!
Вы узнали, как перевести веб-приложение в автономный режим с помощью сервисных рабочих и API хранилища кеша.
Следующая лаборатория в этой серии — Работа с Workbox.