How to add custom service worker in react-vite app with react-plugin-pwa?

Question

I want to add a service-worker 'sw.js' in '/src' path to my vite-react-typescript project. I am already using react-plugin-pwa for implementing PWA functionalities. Here is my vite.config.js file content:

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { VitePWA } from 'vite-plugin-pwa';
import compression from 'vite-plugin-compression2';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
    // Load env file based on `mode` in the current working directory.
    // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
    const env = loadEnv(mode, process.cwd(), '');
    return {
        plugins: [
            svgr(),
            react(),
            compression(),
            VitePWA({
                injectRegister: 'auto',
                registerType: 'autoUpdate',
                devOptions: {
                    enabled: env.VITE_ENV === 'local',
                    type: 'module',
                },
                srcDir: 'src',
                filename: 'sw.js',
                /*includeAssets: [
                    'favicon.ico',
                    'apple-touch-icon.png',
                    'mask-icon.svg',
                ],*/
                // strategies: 'injectManifest',

                manifest: {
                    name: 'Safer',
                    short_name: 'Safer',
                    description: 'Safer - invitation only social media',
                    theme_color: '#ffffff',
                    icons: [
                        {
                            src: 'pwa-192x192.png',
                            sizes: '192x192',
                            type: 'image/png',
                        },
                        {
                            src: 'pwa-512x512.png',
                            sizes: '512x512',
                            type: 'image/png',
                        },
                        {
                            src: 'maskable-icon-512x512.png',
                            sizes: '192x192',
                            type: 'image/png',
                            purpose: 'any maskable',
                        },
                    ],
                },
                // add this to cache all the imports
                workbox: {
                    globPatterns: ['**/*'],
                    importScripts: [''],
                    swDest: 'dist/sw.js',
                },
                // add this to cache all the
                // static assets in the public folder
                includeAssets: ['**/*'],
            }),
        ],
        server: {
            port: 3000,
            open: '/',
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
            },
        },
    };
});

When I run the app in local development mode, the app generates its own service-worker. Can anyone tell me what am I doing wrong?

Answer 1

it generate a mix of their service worker with yours because they also needs to include their pwa configuration. I think there is a limit of 1 service worker by application. So if you console log your custom sw.js it should work,but you have to check in the inspector/application if the service worker is correct installed by checking the status