Я пытаюсь создать прогрессивное веб-приложение.
Когда я впервые захожу в приложение, все в порядке.манифест загружен успешно, также служащий сделал. манифест в порядке IMG
Я обнаружил еще одну проблему переполнения стека.Подсказка заключалась в том, чтобы попробовать запустить страницу в Chrome DevTools Audits.И я получил почти превосходный результат (также HTTP-трафик к HTTPS зеленый, игнорируйте восклицательный знак. Это из-за localhost. На домене все в порядке) devTools audit ok IMG
Проблема в следующем:Когда страница загружается из кэша, и я пытаюсь обновить страницу с помощью Ctrl + R или кнопки обновления или перенаправить страницу (например, выйти из системы), я получил неопределенное сообщение в окне приложения. browser err IMG
А в консоли devTools просто бессмысленная ошибка (потому что я не использую favicon.ico во всем приложении) favicon.ico err IMG
В тот момент, когда появляется эта ошибка, манифест также не обнаруживается.Я думаю, что это может быть проблемой.Но я не знаю, как это решить. Ошибка манифеста IMG
Я обнаружил, что когда я очищаю хранилище в приложении devTools и снова обновляю страницу, все снова в порядке.Но когда я пытаюсь перенаправить, снова происходит то же самое.
У кого-нибудь есть совет?Большое спасибо.
manifest.json
{
"prefer_related_applications": false,
"short_name": "test",
"name": "test test",
"icons": [
{
"src": "images/resources/main/logo-icon-red.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/resources/main/logo-icon-red.png",
"sizes": "512x512",
"type": "image/png"
}
],
"background_color": "#eaeaea",
"theme_color": "#2e7d97",
"start_url": "/edsa-test/test.sign/in",
"orientation": "portrait",
"display": "standalone",
"scope": "/"
}
serviceworker.js
var cache_name = 'test-cache-v12';
var cached_urls = [
'css/style_login.css',
'css/style_body.css',
'css/style_header.css',
'css/style_config.css',
'css/style_uni.css',
'css/checkboxes.css',
'css/responsive.css'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cache_name)
.then(cache => cache.addAll(cached_urls))
);
});
self.addEventListener('fetch', function(event) {
//console.log('Fetch event for ', event);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
//console.log('Found ', event.request.url, ' in cache');
return response;
}
//console.log('Network request for ', event.request.url);
return fetch(event.request).then(function(response) {
if (response.status === 404) {
return caches.match('css/style_body.css');
}
return caches.open(cached_urls).then(function(cache) {
cache.put(event.request.url, response.clone());
return response;
});
});
}).catch(function(error) {
console.log('Error, ', error);
return caches.match('offline.html');
})
);
});
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheNames) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
console.log("removing cache")
return true
}).map(function(cacheNames) {
return caches.delete(cacheNames);
})
);
})
);
});
self.addEventListener('message', function (event) {
if (event.data.action === 'skipWaiting') {
self.skipWaiting();
}
});
layout.latte (index) - часть с вызывающим манифестом и serviceworker
<link rel="manifest" href="{$basePath}/manifest.json">
<script>
$(document).ready(function(){
let newWorker;
function showUpdateBar() {
let snackbar = document.getElementById('snackbar');
snackbar.className = 'show';
}
if ('serviceWorker' in navigator) {
//window.addEventListener('load', function() {
navigator.serviceWorker.register({$basePath} + "/serviceworker.js").then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
newWorker = registration.waiting;
//console.log("before -- newworker:", newWorker, "registration:", registration, "waiting:", registration.waiting, "installing:", registration.installing)
if(newWorker) {
console.log("new worker found, continue")
//newWorker.addEventListener('statechange', () => {
// Has network.state changed?
console.log("state", newWorker.state)
switch (newWorker.state) {
case 'installed': {
if (navigator.serviceWorker.controller) {
// new update available
console.log("already installed")
showUpdateBar();
}
// No update available
break;
}
default: {
console.log(newWorker.state)
}
}
} else {
console.log("no new worker found")
}
console.log("after -- newworker:", newWorker, "registration:", registration, "waiting:", registration.waiting, "installing:", registration.installing)
});
let refreshing
console.log("refreshing located:", refreshing)
navigator.serviceWorker.addEventListener('controllerchange', function () {
console.log("service worker controller change", refreshing)
if (refreshing) return;
console.log("is refreshing")
window.location.reload();
refreshing = true;
});
}
document.getElementById('reload').addEventListener('click', function(){
console.log("clicked reload");
console.log(newWorker.postMessage({ action: 'skipWaiting' }))
//newWorker.postMessage({ action: 'skipWaiting' });
console.log("after click:", newWorker)
});
})