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

Question

I started experimenting with progressive web apps but when it concerns offline caching, I am either misunderstanding something, or doing something wrong.我开始尝试渐进式 Web 应用程序，但是当涉及离线缓存时，我要么误解了某些东西，要么做错了什么。

I have 2 HTML pages ( index.html and index2.html ) which are identical, code below:我有 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>

And then below is the fetch and install event methods, as well as the cache contents, which, from my understanding, should return cached contents if there is no network, correct me if done incorrectly.然后下面是获取和安装事件方法，以及缓存内容，根据我的理解，如果没有网络，应该返回缓存的内容，如果做得不正确，请纠正我。

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);
    }));
});

My issue is, when I go offline, it'll open the index.html page but when I try to navigate between the two pages, it gives me an error saying I'm offline, which is naturally true, but is the idea behind offline caching not supposed to cache the files in such a way that'll allow me to navigate between multiple cached pages while I'm offline?我的问题是，当我离线时，它会打开index.html页面，但是当我尝试在两个页面之间导航时，它给我一个错误，说我离线，这自然是正确的，但背后的想法离线缓存不应该以允许我在离线时在多个缓存页面之间导航的方式缓存文件？

If so, where am I going wrong?如果是这样，我哪里出错了？

If not, then I don't see how PWA's will replace native apps anytime soon, until they provide a method of switching between cached pages while offline.如果没有，那么我看不到 PWA 将如何在短期内取代本机应用程序，直到它们提供一种离线时在缓存页面之间切换的方法。

PS.附注。 I'm experiencing this using Google Chrome on Windows and on Android.我在 Windows 和 Android 上使用 Google Chrome 遇到了这个问题。

Answer 1

A service worker's fetch event handler is triggered for navigation requests made from the clients that it controls. Service Worker 的fetch事件处理程序被它控制的客户端发出的导航请求触发。 That's definitely one of the intended use cases for service workers.这绝对是服务工作者的预期用例之一。

I notice that you're not calling self.clients.claim() within your service worker's activate event.我注意到您没有在 service worker 的activate事件中调用self.clients.claim() 。 That's not a problem in and of itself, but it means that your newly installed service worker won't control the current client tab/window.这本身不是问题，但这意味着您新安装的 Service Worker 将无法控制当前的客户端选项卡/窗口。 It won't be until the next time that you visit your web app that the service worker will control the page, and start triggering the fetch event handler.直到您下次访问 Web 应用程序时，Service Worker 才会控制页面并开始触发fetch事件处理程序。 So if you're testing offline navigations immediately after installing a fresh service worker, prior to closing and then revisiting the site, that would explain what you're seeing.因此，如果您在安装新的 Service Worker 后立即测试离线导航，然后再关闭站点然后重新访问该站点，这将解释您所看到的内容。

There's more information about using self.clients.claim() at https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim有关使用self.clients.claim()的更多信息，请访问https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#clientsclaim

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-01-06 16:03:39

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-01-06 16:03:39

解决方案1
2 已采纳 2017-01-06 16:03:39