Я обновил свое угловое приложение в PWA, так как мне нужно предварительно загрузить все ресурсы при первом запуске (в приложении много изображений, которые используются для пользовательского интерфейса).Вот почему я хотел бы показать некоторую полосу вращения / загрузки во время события установки сервисного работника и скрыть его, когда это будет сделано.Итак, первый вопрос - возможно ли обработать это событие из компонента?
Я нашел этот пример и попытался добавить его в первый компонент, который загружается при запуске приложения, но не получает никаких журналов.Так что, вероятно, это не сработает.
ngOnInit() {
self.addEventListener('install', event => {
this.log("INSTALLING ");
const installCompleted = Promise.resolve()
.then(() => this.log("INSTALLED"));
event.waitUntil(installCompleted);
});
self.addEventListener('activate', event => {
this.log("ACTIVATING");
const activationCompleted = Promise.resolve()
.then((activationCompleted) => this.log("ACTIVATED"));
event.waitUntil(activationCompleted);
});
self.addEventListener('fetch', event => {
this.log("HTTP call intercepted - " + event.request.url);
return event.respondWith(fetch(event.request.url));
});
}
log(message) {
console.log(message);
}
Также у меня есть вопрос по поводу кэширования ресурсов.В моем ngsw-config.json я использую следующую настройку:
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
, но когда я открываю первую страницу, в кэше не отображаются все изображения и папки из / assets.Не бывает половина из них.Это нормально, и он не должен показывать все изображения, которые кэшируются?Возможно ли, что проблема в том, что я использую ленивые загрузочные модули и сервисный работник начинает кэширование при загрузке каждого модуля?С другой стороны, когда я переключаю страницы, на вкладке Сеть отображается, что каждое изображение загружается из сервисного работника ...
Спасибо