В последнее время я изучаю использование Service Workers в веб-приложениях. Варианты использования включают предварительную загрузку контента в масштабе, ускорение работы вашего веб-сайта, обработку отказоустойчивости и, возможно, многое другое. Одна из проблем, с которой я постоянно сталкиваюсь, — это необходимость подгонять моего сервис-воркера в соответствии с фреймворком, не более того. Давайте посмотрим, какое золото я накопал на прошлой неделе ниже 👇🏻
Где это началось?
Я пытался настроить пользовательский сервис-воркер с Angular 11, и руководство https://angular.io/guide/service-worker-getting-started попросило меня установить модуль angular/pwa, читайте https:/ /angular.io/guide/service-worker-коммуникации, а затем адаптироваться к способу создания сервис-воркера в angular. Что ж, мне показалось, что работы много, поэтому я решил создать независимый от фреймворка процесс добавления пользовательского работника службы. Оглядываясь назад, я думаю, что это было довольно проще с Vue 2 и 3, но это было похоже на хакерство.
Покажи мне решение!
Шаг 0. Установите esbuild
Шаг 1. Создайте workbox-config.js:
Узнайте больше о том, что есть в конфигурации рабочего ящика, здесь:
Шаг 2. Создайте compile_sw.js:
Шаг 3. Скомпилируйте и внедрите:
Шаг 4. Зарегистрируйте Service Worker ✨
Вот и все, наслаждайтесь! Надеюсь, это поможет!
