Question

我最近使用由Google节点模块“sw-precache”生成的服务工作者创建了我的第一个渐进式Web应用程序（我在demo中使用了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;
        });
    });

渐进式Web应用程序脱机刷新不起作用

1 个答案: