我希望有人能告诉我我是不是找错树了。我使用 Vue CLI 构建了一个基本的 Web 应用程序，并包含了 PWA 支持。一切似乎都正常，我得到了安装提示等。
我想做的是缓存用户以前没有访问过的各种页面（路由），以便他们在离线时可以访问。
这里的原因是我打算为一家航空公司构建一个应用程序，该应用程序的一部分将充当飞行杂志，允许用户阅读各种文章，但是飞机没有wifi，所以用户需要在登机区下载应用程序，我的目标是预先缓存前 10 篇文章，以便他们在飞行期间阅读。
这可能吗？ PWA 缓存是正确的方法吗？以前有人做过这种事吗？
提前致谢
【问题讨论】：
标签： vue.js caching progressive-web-apps vue-pwa
要将您的网站“转换”为 PWA，您只需几个步骤。 您需要知道 service worker 没有在主线程上运行，并且您无法访问例如他内部的 DOM。
例如，转到项目的根目录并添加一个名为 serviceworker.js 的 javascript 文件，这将是您的 service worker。
要注册 service worker，你需要在这个浏览器中检查它是否可能，然后注册他：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope');
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
在 vue.js 中，您可以将其放入 mounted() 或 created() 挂钩中。
如果您运行此代码，即使我们没有在serviceworker.js 中编写任何代码，它也会说服务工作者已成功注册
在serviceworker.js 内部可以创建一个变量，例如CACHE_NAME。这将是保存缓存内容的缓存名称。
var CACHE_NAME = "mycache_v1";
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
每次您发出网络请求时，您的请求都会首先通过此处的服务工作者获取处理程序运行。您需要回复event.respondWith()
下一步是您首先打开名为 mycache_v1 的缓存并查看内部是否与您的请求匹配。
记住：cache.match() 不会在不匹配的情况下被拒绝，它只是返回 undefined 因为在 return 语句中有一个 || 运算符。
如果有可用的匹配，则从缓存中返回匹配，如果没有，则fetch() 事件请求。
在fetch() 中，您将响应保存在缓存中并将响应返回给用户。
这被称为cache-first 方法，因为您首先查看缓存内部，如果没有匹配，您将回退到网络。
实际上，您可以更进一步，在您的 fetch 中添加 catch()，如下所示：
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
})
.catch(err => {
return fetch("/offline.html")
});
如果缓存中没有任何内容并且您也没有网络错误，您可以使用离线页面进行响应。
您可能会问自己：“好吧，没有可用的缓存也没有互联网，用户应该如何看到离线页面，它也需要互联网连接才能看到它吗？”
在这种情况下，您可以预先缓存一些页面。
首先，您创建一个包含要缓存的路由的数组：
var PRE_CACHE = ["/offline.html"];
在我们的例子中，它只是 offline.html 页面。您也可以添加 css 和 js 文件。
现在您需要install 处理程序：
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(PRE_CACHE);
})
);
});
每当注册服务工作者时，install 就会被调用 1x。
这只是意味着：打开你的缓存，在缓存中添加路由。现在，如果您注册 SW，您的 offline.html 将被预先缓存。
我建议阅读 google 人的“Web 基础知识”：https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook
还有其他策略，例如：network-first
老实说，我不知道路由如何与 SPA 一起工作，因为 SPA 只是发送给客户端的 1 个 index.html 文件，并且路由由 javascript 处理，您需要检查一下，这是最好的策略为您的应用程序。
【讨论】：