javascript - Vue PWA : Use ServiceWorker to cache remote media assets from array of URLs

Question

我正在构建一个 PWA，如果用户愿意，我想有选择地下载和缓存整个应用程序中使用的所有媒体 Assets 。默认的 PWA 行为仅在请求在应用程序中导航时才缓存 Assets 。我需要提供按下按钮、下载 Assets 、离线并使用整个应用程序并缓存所有 Assets 的功能，而无需在在线时访问各种路线和 View 。

对于上下文，当应用程序加载时，Vuex 从我的 API 获取 JSON 内容，将其置于状态，并保存到 IndexedDB。

如果用户单击“下载所有内容”按钮，我想解析 $store.state 中的 JSON，将 URL(图像、PDF 和 MP4)收集到一个数组中，并将该数组传递给 ServiceWorker 以故意缓存所有内容这些 URL 上的 Assets 供离线使用(不超过允许的原始存储限制)。

我使用的是 Vue CLI 和 Vue PWA 插件，所以我有 registerServiceWorker.js 文件并为生产生成了预缓存 list 。

我在互联网上发现关于这个的信息有点令人困惑我正在考虑使用 https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker 概述的方法但我不确定某些细节，也不确定如何以适合 Vue CLI 工作流的方式解决这个问题？

如果可能，您能否在回答中包含以下问题:

1. 我是使用 GenerateSW 还是 InjectManifest？

2. 我是否需要编写自己的 Service Worker，或者我可以挂接到 registerServiceWorker.js 中的生命周期方法(registered()、cached()、updated())吗？

预先感谢您的帮助。

Answer 1

我找到了一种在 Vue 3、Vue CLI PWA 应用程序上缓存远程文件的方法。

1. 在根目录下设置vue.conig.js，如下所示

# vue.config.js
module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: "my-pwa-app",
    themeColor: "#624040",
    msTileColor: "#000000",
    // configure the workbox plugin
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: "service-worker.js", //path to your own service-worker file
      // ...other Workbox options...
    },
  },
};

1. 使用下面的起始代码创建 service-worker.js，添加缓存所需的其他功能

# service-worker.js
// workbox functions from the workbox CDN (version 4.3.1) 
// Vue 3 PWA automatically adds the CDN
const { precacheAndRoute } = workbox.precaching;
const { registerRoute } = workbox.routing;
const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;
const { Plugin: ExpirationPlugin } = workbox.expiration;
const { Plugin: CacheableResponsePlugin } = workbox.cacheableResponse;

workbox.core.setCacheNameDetails({ prefix: "appname" });

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
precacheAndRoute(self.__precacheManifest, {});

// cache image and render from the cache if it exists or go t the network
registerRoute(
  ({ request }) => request.destination === "image",
  new CacheFirst({
    cacheName: "images",
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 2 * 24 * 60 * 60, // cache the images for only 2 Days
      }),
    ],
  })
);

// cache API response and serve from cache if exists or go to the network 
registerRoute(
  ({ url }) => url.pathname.startsWith("https://dog.ceo/api/"),
  new StaleWhileRevalidate()
);

VueJs 采用 service-worker.js 并添加其导入以预缓存 /dist 文件夹中的文件

• 可以找到 Workbox 的文档 here
• 我发现有关 workbox 4.3.1 的注释很有用 here