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

Question

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

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

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

Answer 1

事实证明这只是第3版中的一个问题。现在我使用以下解决方法：

• 创建空文件插件/ sw-precache-register.js
• 创建具有以下内容的文件插件/ 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']
  }

如果有人有更好的解决方案，我会接受这个答案。