Я использую Nodejs и EJs в качестве движка шаблонов для Node.Я новичок в PWA и хочу создать прогрессивное веб-приложение и хочу кэшировать все мои файлы шаблонов ejs в кеше браузера.Как я могу это сделать?Будет ли работать автономно или нет?Я попытался сделать это, и работник службы успешно зарегистрирован.Он также кэширует файлы, но когда я запускаю его в автономном режиме, он автоматически удаляет кеш при получении.Может кто-то помочь мне с этим?Я запускаю его на локальном хосте: 5000 с сервера узла.
Структура каталогов
App/
- css/
- images/
- res/
- sw1.js
- uploads/
- views/
-partials/
-footer.ejs
-index.ejs
-login.ejs
Файл footer.ejs
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw1.js')
.then(() => console.log('Service worker Registered'))
.catch((error) => console.log('some error occurred',error));
}
Файл sw1.js
var cacheName = 'app-cache';
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([./css/main.css', './views/login.ejs', '/']);
})
);
console.log('Service Worker Installed');
});
self.addEventListener('activate', function(e) {
console.log('[Service Worker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(
keyList.map(function(key) {
if (key != cacheName) {
console.log('Removing old cache', key);
return caches.delete(key);
}
})
);
})
);
});
self.addEventListener("fetch", function(event){
if(event.request.url.startsWith("http://localhost:5000/")){
console.log("[Service Worker] Fetch", event.request.url);
caches.open(cacheName).then(function(cache){
return fetch(event.request).then(function(response){
cache.put(event.request, response.clone());
return response;
})
})
}
else{
event.respondWith(
caches.match(event.request).then(function(response){
return response || fetch(event.request);
})
);
}
});