Question

我根据current version的this tutorial编写了一个简单的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');
    }
}

如果您认为问题出在其他地方，我很乐意分享更多代码！

Answer 1

问题出在服务人员之内：

我忘记将服务工作者文件添加到静态资产中。

通过阅读以下问题的答案来找到解决方案：https://stackoverflow.com/a/44482764/7350000。

Answer 2

我有同样的问题。就我而言，问题出在清单中，向start_url添加查询字符串。缓存对此很敏感。您可以在.match中添加一个参数以阻止它，例如：

caches.match(event.request, {ignoreSearch: true})

PWA脱机模式无法从移动浏览器的缓存中加载

2 个答案: