Повторюсь, в интернете статьи очень разрозненные и в некоторых код нерабочий, мне больше всего помогли: MDN и вот эта статья с готовыми примерами.
Финальный код, скрипт подключения. Позволяет мгновенно открывать страницу из кеша, в фоне загружать новый контент и обновлять его в рантайме.
Заметки.
Типы нужно подключать явно так:
/// <reference lib="webworker" />
При этом
addEventListener(“fetch”, (event) => …) все равно не выводит event, проставляем явно ExtendableEvent.caches.match(request) не делаем! Используем только определенную версию caches.open(CACHE).then((cache) => cache.match(request)) что бы можно было ее поменять в случае какой-то ошибки или большой миграции.Положить в кеш данные браузерного экстеншена нельзя, поэтому их нужно явно скипать
!request.url.startsWith('http'), что бы не сыпались ошибки.При создании
BroadcastChannel нужно не забывать что евенты могут прилетать и от других воркеров, обязательно типизируем их.Тк получение нового контента sw может произойти И до старта скрипта апдейта на странице И позже, нужна простая версия хендшейка - отправляем апдейт сразу и на
'client-ready’, все это в промисе на waitUntil, при этом не забываем фолбек таймаут на клинап что бы промис не завис, на случай быстрого закрытия страницы (до окончания загрузки) и тп.На клиенте получить новый контент и сравнить с текущим можно как-то так:
new DOMParser()
.parseFromString(data.text, 'text/html')
.querySelector('main')
.innerHTML
===
document.querySelector('main').innerHTML
Скрипт подключения воркера и апдейта контента нужно вынести отдельно и не кешировать.