workbox-webpack-plugin.InjectManifest 的 sw.js 应该包括啥？

Posted 2023-03-10

【中文标题】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);

【参考方案1】：

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

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

import  precacheAndRoute  from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);