1

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

我想要做的是缓存用户以前没有访问过的各种页面（路由），以便他们在离线时可以访问。

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

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

提前致谢

4

1 回答 1

3

要将您的网站“转换”为 PWA，您只需要几个步骤。您需要知道 service worker 没有在主线程上运行，并且您无法访问例如他内部的 DOM。

  1. 首先创建一个 serviceworker。

例如，转到项目的根目录并添加一个名为serviceworker.jsthis 的 javascript 文件，这将是您的 service worker。

  1. 注册服务工作者。

要注册 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

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

每次您发出网络请求时，您的请求都会首先通过这里的服务工作者获取处理程序运行。你需要回应event.respondWith()

下一步是您首先打开您的缓存调用mycache_v1并查看内部是否与您的请求匹配。

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

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

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

这被称为cache-first方法，因为您首先查看缓存内部，如果没有匹配，您将回退到网络。

catch()实际上，您可以通过在 fetch中添加 a 来更进一步，如下所示：

        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被预先缓存。

我建议阅读谷歌的“网络基础”：https ://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook

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

老实说，我不知道路由如何与 SPA 一起使用，因为 SPA 只是发送给客户端的 1 个 index.html 文件，并且路由由 javascript 处理，您需要检查一下，这是您应用程序的最佳策略.

于 2020-06-25T12:12:06.723 回答