progressive-web-application with webpack.js - progressive-web-apps

Question

In webpack.js version 5 I wanted to use PWA which according to their webpack documentation:
https://webpack.js.org/guides/progressive-web-application/
I was told to use Workbox, but Workbox is only used for Offline mode, for example, if I want to use other features such as Notifications, IndexedDB, etc., what code should I add in webpack.config.js and also how to use manifest.json With webpack?

Answer 1

Assuming you want the precaching behavior described in https://webpack.js.org/guides/progressive-web-application/ and you want to customize your service worker, the cleanest approach would be to use the InjectManifest workbox-webpack-plugin, and pass in the path to your custom service worker file as the swSrc option.
The InjectManifest plugin will take care of bundling your swSrc file, and it will replace self.__WB_MANIFEST with a precache manifest based on your webpack compilation's assets.
// webpack.config.js
const path = require('path');
const {InjectManifest} = require('workbox-webpack-plugin');
module.exports = {
// Your other webpack config goes here.
plugins: [
new InjectManifest({
swSrc: './service-worker.js',
swDest: 'service-worker.js',
// Any other config if needed.
}),
],
};
// service-worker.js
import {precacheAndRoute} from 'workbox-precaching';
// Add in additional imports here as needed.
// This line of code ensures that everything in your webpack
// compilation gets precache and served.
precacheAndRoute(self.__WB_MANIFEST);
// Your custom service worker code goes here.