sw.js for workbox-webpack-plugin.InjectManifest 应该包括什么？

Question

我正在尝试使用 workbox-webpack-plugin.InjectManifest，我找到的所有示例都类似于下面的代码，但我找不到 src/sw.js 应该是什么样子的示例。我尝试搜索 service worker 文件的示例，感觉我可能正在开始一种鹅追逐的学习方式，更多地了解我需要的 service workers，而实际上并没有得到一个例子。我想要做的就是将我的清单设置包含在我的服务人员中。我想我可以做到这一点，考虑到函数的名称叫做 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",
      type: "image/png",
    },
  ],
  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);

Answer 1

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

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

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

sw.js for workbox-webpack-plugin.InjectManifest 应该包括什么？

What is sw.js for workbox-webpack-plugin.InjectManifest supposed to include?

manifest

webpack

service-worker

workbox

workbox-webpack-plugin