Прогрессивные веб-приложения: Service Worker включает

1. Добро пожаловать

В этой лабораторной работе вы добавите к существующему веб-приложению ответ на потоковый маршрут для повышения производительности. Это седьмая из серии сопутствующих практических работ в рамках семинара Progressive Web App . Предыдущая лабораторная работа была посвящена расширению возможностей вашего PWA . В этой серии есть ещё одна.

Чему вы научитесь

• Добавить потоковый ответ сервисному работнику

Что вам следует знать

• JavaScript

Что вам понадобится

• Браузер, поддерживающий Service Workers и Streams

2. Подготовка

Начните с клонирования или загрузки начального кода, необходимого для выполнения этой лабораторной работы:

Клонировать репозиторий

Загрузить Zip

Если вы клонируете репозиторий, убедитесь, что вы находитесь на ветке pwa06--service-worker-includes . ZIP-архив также содержит код для этой ветки.

Для этой кодовой базы требуется Node.js 14 или выше. После того, как код будет готов, выполните команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем выполните npm start , чтобы запустить сервер разработки для этой кодовой лаборатории.

Файл README.md исходного кода содержит пояснения ко всем распространяемым файлам. Кроме того, ниже перечислены основные существующие файлы, с которыми вы будете работать в ходе этой лабораторной работы:

Ключевые файлы

• js/preview.js — JavaScript-файл страницы предварительного просмотра
• service-worker.js — файл сервисного работника PWA

3. Предварительный просмотр потоковой передачи

Страницу предварительного просмотра можно разделить на три чётких части: голова, скомпилированное тело и стопа. В настоящее время скомпилированное тело визуализируется на стороне клиента, но в этом нет необходимости. Давайте перенесём его в Service Worker.

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

Для этого сначала очистите содержимое js/preview.js чтобы убедиться, что он больше не участвует в компиляции. Затем в service-worker.js выполните следующие действия:

• Импортируйте именованную strategy экспорта из workbox-streams как streamsStrategy
• Импортируйте именованный экспорт openDB и из idb и импортируйте именованный экспорт marked из marked
• Перед регистрацией маршрута для навигации добавьте новую регистрацию маршрута
  • Необходимо проверить, что pathname URL-адресу — /preview
  • Он должен использовать стратегию потоковой передачи, которая
    1. Ответить содержимым preview/index.html через содержимое main тега
    2. Ответьте функцией, которая открывает settings-store IndexedDB, получает содержимое из хранилища объектов settings и возвращает отрисованную в формате Markdown версию этого содержимого.
    3. Ответьте закрывающими тегами main , body и html .

Обязательно регистрируйте маршрут для потоковой передачи данных перед регистрацией обычной навигации. Регистрация маршрутов выполняется в том порядке, в котором они включены в сервис-воркер. Если сделать наоборот, маршрут для потоковой передачи данных не будет выполнен, поскольку запрос уже будет обработан.

После настройки потокового ответа вернитесь и откройте предварительный просмотр сайта в браузере. Вы увидите, что содержимое страницы теперь отображается непосредственно сервис-воркером, без необходимости написания клиентского кода!

Если вы не видите изменений, убедитесь, что ваш новый Service Worker используется вашей страницей, проверив активный Service Worker на вкладке Service Workers на панели Applications в Chrome DevTools.

4. Поздравляем!

Вы узнали, как перевести веб-приложение в автономный режим с помощью Service Worker и API хранилища кэша.

Следующая лабораторная работа в серии — « Работа с работниками».