Я пытаюсь разобраться с кэшированием работника сервиса для приложения Ionic Angular.
Моя цель - сделать всплывающее предупреждение: «Доступно новое обновление, нажмите, чтобы перезагрузить приложение»,
Я полагаю, что я следовал всем правильным правилам, основанным на моем чтении, но мне чего-то не хватает, так как я не могу получить оповещение, чтобы всплыть после обновления. Это всплывет, но может занять до 24 часов - это исключение?
Я использую четыре файла:
- сервис-worker.js
- index.html
- myapp.page.ts
- .htaccess
В service-worker.js I:
- назовите кеш
- установить CACHE_VERSION для использования при обновлении
- использовать панель инструментов для установки приоритета сети / кэша
.
'use strict';
importScripts('./build/sw-toolbox.js');
self.toolbox.options.cache = {
name: 'my-cache'
};
const CACHE_VERSION = 1;
self.toolbox.router.get('assets/*', self.toolbox.cacheFirst);
self.toolbox.router.get('build/*', self.toolbox.networkFirst);
self.toolbox.router.get('/', self.toolbox.networkFirst);
self.toolbox.router.get('manifest.json', self.toolbox.networkFirst);
В index.html I:
- создайте обещание, чтобы мы могли подключиться к onupdate, найденному работником сервиса, из myapp.page.ts
.
<script>
// make the whole serviceworker process into a promise so later on we can
// listen to it and in case new content is available a toast will be shown
window.isUpdateAvailable = new Promise(function(resolve, reject) {
// checks if serviceWorker is supported and disable service workers while developing
if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
// register service worker file
navigator.serviceWorker.register('service-worker.js')
.then(reg => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
console.log("new update available");
resolve(true);
} else {
// no update available
resolve(false);
console.log("up to date");
}
break;
}
};
};
})
.catch(err => console.error('[SW ERROR]', err));
}
});
</script>
В myapp.page.ts я подписался на эту статью: https://medium.com/progressive-web-apps/pwa-create-a-new-update-available-notification-using-service-workers-18be9168d717:
- слушайте обещание, которое мы создали в index.html
- всплывающее предупреждение
- когда пользователь нажимает перезагрузить, удаляет кеш и перезагружает страницу
.
public ngOnInit () {
// listen to the service worker promise in index.html to see if there has been a new update.
// condition: the service-worker.js needs to have some kind of change - e.g. increment CACHE_VERSION.
window['isUpdateAvailable']
.then(isAvailable => {
if (isAvailable) {
console.log('Update is available');
const alert = this.alertController.create({
title: 'New Update available!',
message: 'Please reload the app to continue.',
buttons: [
{
text: 'Reload',
handler: () => {
caches.delete("my-cache");
location.reload(true);
}
}]
});
alert.present();
}
});
}
В .htaccess I:
- установить заголовки для service-worker.js, чтобы он не кэшировался:
.
<Files service-worker.js>
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
</Files>
Затем я увеличиваю значение const CACHE_VERSION, чтобы вызвать изменение в файле service-worker.js.
Я ожидаю, что когда я увеличу значение CACHE_VERSION и вернусь к уже открытой версии (вкладке) приложения или открою новую вкладку приложения, должно появиться предупреждение или, по крайней мере, консольный журнал об обновлении. Это происходит не сразу, а может занять один день.
Это ожидаемое поведение или я что-то упустил? Спасибо!