Напоследък проучвам използването на Service Workers в уеб приложения. Случаите на използване включват „предварително извличане на съдържание в мащаб“, „ускоряване на уебсайта ви“, „обработка на откази“ и вероятно много други. Един от проблемите, с които непрекъснато се сблъсквам, е необходимостта да коригирам моя сервизен работник според рамката, не повече. Да видим какво злато изрових миналата седмица по-долу 👇🏻
Къде започна?
Опитвах се да настроя персонализиран service worker с Angular 11 и ръководството https://angular.io/guide/service-worker-getting-started ме помоли да инсталирам модул angular/pwa, прочетете https:/ /angular.io/guide/service-worker-communications и след това се адаптира към начина на angular за създаване на service worker. Е, изглеждаше ми като много работа, така че се заех да създам агностичен от рамка процес за добавяне на персонализиран работник на услугата. Като се замисля назад, мисля, че беше „доста по-лесно с Vue 2 и 3“, но се чувствах като хакерски начин.
Покажи ми решението!
Стъпка 0. Инсталирайте esbuild
Стъпка 1. Създайте workbox-config.js:
Научете повече за това какво има в конфигурацията на работната кутия тук:
Стъпка 2. Създайте compile_sw.js:
Стъпка 3.Компилирайте и инжектирайте:
Стъпка 4. Регистрирайте Service Worker ✨
Това е всичко, наслаждавайте се! Надявам се това да помогне!
