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

Question

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

我有 2 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的事件方法，还有缓存的内容，我的理解应该return在没有网络的情况下缓存的内容，不对的地方指正。

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.

上使用 Google Chrome 遇到了这个问题

Answer 1

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

我注意到您没有在服务人员的 activate 事件中调用 self.clients.claim()。这本身不是问题，但这意味着您新安装的 service worker 将无法控制当前客户端 tab/window。直到 下一次 访问 Web 应用程序时，服务人员才会控制页面，并开始触发 fetch 事件处理程序。因此，如果您在安装新的 service worker 后立即测试离线导航，然后关闭并重新访问该站点，这将解释您所看到的内容。

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

上有关于使用 self.clients.claim() 的更多信息

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

Progressive Web Apps - Navigating between multiple cached pages while offline

html

javascript

caching

google-chrome

progressive-web-apps