Я пытаюсь горячо переключить таблицу стилей темы с моим сервисным работником.
Я создал тему для Jekyll (для использования со страницами GitHub) и хотел заменить темную тему на светлую.(«выключите свет») и сделайте это согласованным.
Прямо сейчас это достигается путем сохранения состояния в localstorage и замены элемента темы link в соответствии с этим.
проблема в том, что проверка происходит после извлечения оригинальной белой темы, поэтому пользователь видит вспышку белой темы, даже если localstorage имеет установленную темную тему
вот как она ведет себя в данный момент (кнопки находятся в верхнем правом углу): https://thatkookooguy.github.io/postmortem-demo/postmortem/002
после изменения темы попробуйте перейти на другую страницу.страница загружается с белой темой, и после этого меняется на темную тему
Я думал, что смогу решить эту проблему, переключив скрипт внутри сервисного работника, так как могу addEventListener на fetch событие и замените его в цепочке обещаний другой выборкой.
Но, похоже, код не работает.Если я добавлю точку отладки в обратный вызов события, она никогда не сработает (не для ресурсов и не для фактических выборок страниц)
Заголовок HTML
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Fredoka+One|Righteous'>
<!-- THIS SHOULD BE INTERCEPTED BY THE SERVICE WORKER -->
<link id="bulma-theme" rel="stylesheet prefetch" href="//unpkg.com/bulmaswatch/default/bulmaswatch.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/style.css" />
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('{{ site.baseurl }}/assets/sw.js')
.then(function() {
console.log("Service Worker Registered");
});
}
</script>
</head>
Код работника службы
importScripts('localforage.min.js');
// remember the theme
this.onmessage = function(msg) {
if (!msg.data.theme) {
return;
}
localforage.setItem('theme', msg.data.theme);
}
// replace link fetching with correct theme
this.addEventListener('fetch', function(event) {
console.log(event.request.url);
if (event.request.url.contains('/bulmaswatch/')) {
return localforage.getItem('theme')
.then(function(theme) {
if (theme === 'kb-dark-theme') {
let darkThemeRequest = new Request(request.url.replace('bulmaswatch/default/', 'bulmaswatch/superhero/'), {
method: request.method,
headers: request.headers,
mode: 'same-origin',
credentials: request.credentials,
redirect: 'manual'
});
return fetch(darkThemeRequest);
}
return fetch(event.request);
})
}
});
// Log SW installation
this.addEventListener('install', function(event) {
console.log('[SW]: installing....');
});
// Log SW activation
this.addEventListener('activate', function activator(event) {
console.log('[SW]: activate!');
});
При отладке в Chrome (и Chrome Canary, так как я слышал, что там есть лучшая поддержка отладки сервисных работников), обратный вызов на fetch даже никогда не вызывался.ни одного запроса не было зарегистрировано.
Я вижу работника сервиса, зарегистрированного и активного в инструментах разработчика Chrome.и я вижу, как в консоли регистрируются другие события.
Кроме того, при отладке и установке точки останова в начале скрипта выглядит, что bulmaswatch.min.css уже получен.
anyидея чего мне не хватает?: -)
спасибо