Vue PWA提前缓存路由

我希望有人能告诉我，如果我是树皮错误的树。我已经建立了一个基本的网络应用程序使用Vue CLI和包括PWA支持。一切似乎工作正常，我得到安装提示等。
我想做的，是缓存各种网页（路线），用户以前没有访问过，但这样他们就可以离线时。
这里的原因是，我计划建立一个航空公司的应用程序，该应用程序的一部分将作为飞行杂志，让用户阅读各种文章，但飞机没有wifi，所以用户需要在登机区下载应用程序，我的目标是然后预缓存说，前10篇文章，以便他们可以在飞行中阅读它们.
这可能吗？PWA缓存是正确的方法吗？以前有人做过这样的事情吗？

要把你的网站转换成PWA，你只需要几个步骤。你需要知道服务工人不是在主线程上运行的，你不能访问他里面的DOM。
1.首先创建一个服务工人。
例如，转到项目的根目录并添加名为serviceworker.js的javascript文件，这将是您的服务工作线程。
1.对维修人员进行登记。
要注册服务人员，您需要检查是否可以在此浏览器中注册，然后注册他：

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()钩子中。
如果您运行这段代码，它会说service worker已经成功注册，即使我们没有在serviceworker.js中编写任何代码
1.获取处理程序
在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;
        });
      });
    })
  );
});

每次发出网络请求时，您的请求首先会通过这里的服务工作者获取处理程序运行。
下一步是首先打开名为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。
这仅仅意味着：打开你的缓存，该高速缓存中添加路由。现在如果你注册你的软件，你的offline.html是预先缓存的。
我建议阅读“网络基础”从谷歌的家伙：https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook
还有其他策略，如：network-first
老实说，我不知道SPA的路由是如何工作的，因为SPA只是一个发送到客户端的index.html文件，路由是由javascript处理的，你需要检查一下，这是你的应用程序的最佳策略。

Vue PWA提前缓存路由

1条答案

相关问题

热门标签

最新问答