渐进式web app脱机刷新不工作

Question

我最近用Google节点模块“sw-precache”生成的服务工作者制作了我的第一个渐进式web应用程序（我在演示中使用了Gulp任务）。一切工作良好，我能够导航通过网页应用当我离线使用Chrome在移动或使用Chrome创建的图标使用“添加到主屏幕”选项（我的渐进式网页应用）。

我只有一个奇怪的问题：如果我离线了，我用Chrome刷新页面，它仍然可以工作，但如果我用pwa做同样的事情，它会显示恐龙和“你离线了”消息（通过向上滚动刷新）。但如果我在不刷新页面的情况下浏览应用程序，那就不是恐龙了。

Answer 1

从表面上看，你只使用了sw-precache。服务工作者似乎没有一个事件处理程序来侦听在页面未缓存时要执行的操作。您可以使用sw-toolbox来处理未来访问的缓存，并处理脱机页面。这是密码

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
    });