如何与Nuxt PWA一起使用workbox-webpack-plugin

Question

我目前在使用PWA插件（包括工作箱模块）在Nuxt上。但是，如果我没记错的话，此插件不允许将webpack生成的资产添加到预缓存中。

是否可以使用workbox-webpack-plugin仅生成sw.js文件的预缓存部分？如果是这样，怎么办？

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin上有一些文档，但是我不确定如何将其应用于Nuxt PWA上下文。

Answer 1

结果证明这只是版本3中的问题。 目前，我正在使用以下解决方法：

• 创建空文件plugins / sw-precache-register.js
• 使用以下内容创建文件plugins / sw-precache.js：

workbox.precaching.precacheAndRoute(self.__precacheManifest)

• 将以下内容添加到nuxt.config.js：

import { InjectManifest } from 'workbox-webpack-plugin'

...

  workbox: {
    importScripts: ['_nuxt/sw-precache.js'],
    workboxExtensions: ['~/plugins/sw-precache-register.js']
  }

如果有人有更好的解决方案，我会回答这个问题。