Question

我希望有人能告诉我我是否吠错了树。我已经使用Vue CLI构建了一个基本的Web应用程序，并包含了PWA支持。一切似乎都正常，我得到安装提示等。

我想做的是缓存用户以前从未访问过的各种页面（路线），以便它们在脱机时可以访问。

这里的原因是我打算为航空公司构建一个应用程序，并且该应用程序的一部分将充当飞行杂志，允许用户阅读各种文章，但是飞机没有wifi，因此用户需要在登机区下载该应用程序，我的目标是预先缓存说出前10篇文章，以便他们在飞行中可以阅读它们。

这可能吗？ PWA缓存是正确的方法吗？以前有人做过这种事情吗？

预先感谢

Answer 1

要将网站“转换”为PWA，您只需要几个步骤。您需要知道服务工作者不在主线程上运行，并且您无法访问其内部的DOM。

首先创建一个服务人员。

例如，转到您项目的根目录并添加一个名为serviceworker.js的javascript文件，这将是您的服务人员。

注册服务人员。

要注册服务工作者，您将需要在此浏览器中检查其是否可行，然后注册他：

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

每次您发出网络请求时，您的请求都会首先通过此处的service worker提取处理程序运行。您需要使用event.respondWith()

进行回复

下一步是您首先打开名为mycache_v1的缓存，如果与您的请求匹配，请查看内部。

请记住：如果没有匹配项，cache.match()不会被拒绝，因为返回语句中有一个undefined运算符，它只会返回||。

如果有可用的匹配项，则将匹配项从缓存中移出，如果没有，则fetch()事件请求。

在fetch()中，您将响应保存在缓存中，并将响应返回给用户。

这称为cache-first方法，因为您首先要查看缓存内部，并且在不匹配的情况下回退到网络。

实际上，您可以通过以下操作进一步增加catch()：

        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone());
          return response;
        })
        .catch(err => {
           return fetch("/offline.html")
        });

如果缓存中没有任何内容，并且您也没有网络错误，则可以使用离线页面进行响应。

您可能会问自己：“好吧，没有可用的缓存，也没有Internet，用户应该如何查看离线页面，它也需要Internet连接才能正确显示？”

在这种情况下，您可以预缓存一些页面。

首先，使用要缓存的路由创建一个数组：

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专家们的“网络基础知识”：https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook

还有其他一些策略，例如：network-first

说实话，我不知道路由与SPA的确切关系，因为SPA只是传送给客户端的1个index.html文件，并且路由是由javascript处理的，因此您需要检查一下，这是最好的策略为您的应用程序

提前Vue PWA缓存路线

1 个答案: