Я написал простой PWA ( текущая версия ) на основе этого урока от Vaadin .Он работает нормально, протестирован в Chrome, а также в автономном режиме.
При использовании его на мобильном устройстве возникают проблемы:
- После сохранения PWA, его однократного запуска и запускахорошо.
- затем после закрытия, включения режима полета и перезапуска PWA, я получаю системное сообщение о том, что у меня нет подключения к Интернету -> нет проблем, я могу игнорировать этот
- после игнорированияприложение не загружает статические ресурсы, как я ожидал, но показывает пустую страницу, говоря, что браузер не может загрузить страницу, поскольку у меня нет подключения к Интернету.
Я думал, чтоесть, для чего хорош PWA?Почему он не загружает статические активы?Я думаю, что с моим работником службы все в порядке:
const staticAssets = [
'./',
'./styles.css',
'./app.js',
'./images',
'./fallback.json',
'./images/system/offline.png'
]
self.addEventListener('install', async event => {
const cache = await caches.open('static-assets');
cache.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
const req = event.request;
const url = new URL(req.url);
if(url.origin === location.origin){
event.respondWith(cacheFirst(req));
}else{
event.respondWith(networkFirst(req));
}
});
async function cacheFirst(req){
const cachedResponse = await caches.match(req);
return cachedResponse || fetch(req);
}
async function networkFirst(req){
const cache = await caches.open('dynamic-content');
try{
const res = await fetch(req);
cache.put(req, res.clone());
return res;
}catch(err){
const cachedResponse = await cache.match(req);
return cachedResponse || caches.match('./fallback.json');
}
}
Я с удовольствием поделюсь большим количеством кода, если вы думаете, что проблема в другом месте!