Question

我开始尝试使用渐进式网络应用，但是当它涉及离线缓存时，我要么误解了某些内容，要么做错了。

我有两个相同的HTML页面（index.html和index2.html），代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Test PWA</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="/assets/app_styles.css" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="shortcut icon" href="/assets/icon1.png" />
</head>
<body>
    <header class="header">
        <h1>Test web app</h1>
    </header>
    <nav>
        <a href="/index.html">Page 1</a>
        <a href="/index2.html">Page 2</a>
    </nav>
    <script type="text/javascript" src="/assets/app_scripts.js"></script>
</body>
</html>

然后下面是fetch和install事件方法，以及缓存内容，根据我的理解，如果没有网络，应该返回缓存的内容，如果操作不正确则纠正我。

var CacheName = 'TestPWA_Cache';
var CacheContents = [
    '/',
    '/index.html',
    '/index2.html',
    '/assets/app_scripts.js',
    '/assets/app_styles.css',
    '/assets/icon1.png',
    '/assets/icon2.png',
    '/assets/icon3.png'
];

self.addEventListener('install', function (event) {
    event.waitUntil(caches.open(CacheName).then(function (cache) {
        console.log("Service worker install sucess.");
        return cache.addAll(CacheContents).then(function () {self.skipWaiting(); });
    }).catch(function (err) {
        console.log("Service worker install failed! "+err);
    }));
});

self.addEventListener('fetch', function (event) {
    event.respondWith(caches.match(event.request).then(function (response) {
        if (response) return response;
        return fetch(event.request);
    }));
});

我的问题是，当我离线时，它会打开index.html页面但是当我尝试在两个页面之间导航时，它会给我一个错误，说我离线了，自然是真的，但离线缓存背后的想法是不应该以这样的方式缓存文件，这样我可以在我离线时在多个缓存页面之间导航？

如果是的话，我哪里错了？

如果没有，那么我就不会看到PWA将如何很快取代原生应用，直到他们提供在离线时在缓存页面之间切换的方法。

PS。我在Windows和Android上使用谷歌浏览器体验了这一点。

Answer 1

为从其控制的客户端发出的导航请求触发服务工作者的fetch事件处理程序。这绝对是服务工作者的预期用例之一。

我注意到您未在服务工作者的self.clients.claim()事件中调用activate。这本身并不是问题，但这意味着新安装的服务工作者将无法控制当前的客户端选项卡/窗口。直到 next 时间，您访问Web应用程序时服务工作者才会控制该页面，并开始触发fetch事件处理程序。因此，如果您在安装新服务工作者之后立即测试离线导航，则在关闭然后重新访问该网站之前，这将解释您所看到的内容。

有关在https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim

使用self.clients.claim()的更多信息

渐进式Web应用程序 - 在脱机时在多个缓存页面之间导航

1 个答案: