workbox-webpack-plugin.InjectManifest 的 sw.js 应该包括什么？答案

【问题标题】：What is sw.js for workbox-webpack-plugin.InjectManifest supposed to include?workbox-webpack-plugin.InjectManifest 的 sw.js 应该包括什么？
【发布时间】：2021-08-03 03:57:11
【问题描述】：

我正在尝试使用workbox-webpack-plugin.InjectManifest，我发现的所有示例都类似于下面的代码，但我找不到src/sw.js 应该是什么样子的示例。我尝试搜索服务工作者文件的示例，并且觉得我可能正在开始一种追逐学习的方式，更多地了解我需要的服务工作者，而没有实际获得示例。我要做的就是将我的清单设置包含在我的服务人员中。考虑到函数的名称叫做 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);

【问题讨论】：

标签： webpack service-worker manifest workbox workbox-webpack-plugin

【解决方案1】：

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

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

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

【讨论】：