webpack5环境下PWA扩展功能配置及manifest.json使用问题

1. 支持通知、IndexedDB等额外PWA特性的配置 #

首先明确：通知、IndexedDB属于浏览器原生API，webpack本身不需要特殊配置即可支持，仅需要保证Service Worker的自定义逻辑不被Workbox覆盖即可，推荐使用Workbox的InjectManifest模式替代默认的GenerateSW模式，完整配置流程如下：
首先安装所需依赖：
npm install workbox-webpack-plugin webpack-pwa-manifest html-webpack-plugin --save-dev

webpack.config.js配置代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'PWA应用'
    }),
    // 自定义Service Worker模式，支持写入通知、IndexedDB相关逻辑
    new WorkboxWebpackPlugin.InjectManifest({
      swSrc: './src/custom-sw.js', // 自行编写的Service Worker入口文件
      swDest: 'service-worker.js'
    }),
    // 自动生成manifest.json的配置，见下节
    new WebpackPwaManifest({
      name: '完整功能PWA应用',
      short_name: 'PWA Demo',
      description: '支持离线、通知、本地存储的PWA应用',
      background_color: '#fff',
      theme_color: '#2196F3',
      start_url: '/',
      display: 'standalone',
      icons: [
        {
          src: path.resolve('src/assets/app-icon.png'),
          sizes: [96, 128, 192, 256, 384, 512],
          purpose: 'any maskable'
        }
      ]
    })
  ],
  devServer: {
    static: './dist',
    // 通知等敏感PWA API需要HTTPS环境，开发环境开启HTTPS
    server: 'https',
    hot: true
  }
}

你可以在src/custom-sw.js中直接编写通知事件监听、IndexedDB操作等自定义逻辑，Workbox只会将预缓存列表注入该文件，不会覆盖你编写的业务逻辑。

同时需要在业务入口文件（如src/index.js）中添加Service Worker注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/service-worker.js');
      console.log('Service Worker注册成功', registration);
      // 可在此处申请通知权限、绑定推送事件等
    } catch (error) {
      console.log('Service Worker注册失败', error);
    }
  })
}

2. webpack项目中使用manifest.json的两种方式 #

manifest.json是PWA应用的配置文件，用于定义应用的名称、图标、启动样式等信息，有两种接入方式：

• 自动生成（推荐）
  使用上述配置中的webpack-pwa-manifest插件，插件会根据你填写的配置自动生成manifest.json文件，并且自动注入到HTML模板的head标签中，无需手动引用，打包后直接输出到dist目录即可生效。
• 手动配置
  如果你已经自行编写好了manifest.json文件，可以通过复制插件引入：

1. 安装复制插件：npm install copy-webpack-plugin --save-dev
2. 在webpack.config.js的plugins数组中添加配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他配置保持不变
  plugins: [
    // 其他插件不变
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/manifest.json', to: './' }
      ]
    })
  ]
}

3. 在你的HTML模板的head标签中手动引入manifest：
   <link rel="manifest" href="/manifest.json">

内容的提问来源于stack exchange，提问作者Tayebeh Safdari