workbox-webpack-plugin.InjectManifest 的 sw.js 应该包含什么？

如何解决workbox-webpack-plugin.InjectManifest 的 sw.js 应该包含什么？

我正在尝试使用 workbox-webpack-plugin.InjectManifest，我找到的所有示例都类似于下面的代码，但我找不到 src/sw.js 应该是什么样子的示例。我尝试搜索 Service Worker 文件的示例，并且感觉我可能正在开始追寻更多有关 Service Worker 的知识，而无需实际获取示例。我要做的就是将我的清单设置包含在我的服务工作者中。我以为我可以做到这一点，考虑到函数的名称叫做 InjectManifest

// Inside of webpack.config.js:
const {InjectManifest} = require('workBox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      swSrc: './src/sw.js',})
  ]
};

---

Manifest.js（额外的，如果有用的话）

const Icon192 = require("../images/icon-192x192.png");
const Icon512 = require("../images/icon-512x512.png")

const manifest = {
  icons: [
    {
      src: Icon192,sizes: "192x192",type: "image/png",},{
      src: Icon512,sizes: "512x512",],name: "My_App",short_name: "My_App",orientation: "portrait",display: "standalone",start_url: "/",theme_color: "    #228B22",background_color: "#ffffff",description: "Any Maskable",start_url: "https://example.com",display: "browser",prefer_related_applications: false
};

module.exports = JSON.stringify(manifest,null,2);

解决方法

这在很大程度上取决于您希望 Service Worker 具有的功能。 Workbox 入门指南的 This section 演练了一些用例，包括预缓存和运行时缓存，随附的代码将出现在您的 sw.js 文件中。

最基本的，如果您感兴趣的只是预缓存 webpack 构建中的所有资产，则可以将以下内容用作您的 sw.js：

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);