pwa 相关

To implement a custom service worker in a Next.js 14 application without using the next-pwa package, you can follow these steps. This approach allows you to write your service worker code in a sw.ts file and ensure it is compiled to sw.js in the root directory after the build process.

Step-by-Step Implementation

1. Create the Service Worker File:

   • In your Next.js project, create a file named sw.ts in the root directory. This file will contain your service worker logic.

   // sw.ts
   self.addEventListener('install', (event) => {
       console.log('Service Worker installing...');
   });
   
   self.addEventListener('activate', (event) => {
       console.log('Service Worker activating...');
   });
   
   self.addEventListener('fetch', (event) => {
       event.respondWith(
           caches.match(event.request).then((response) => {
               return response || fetch(event.request);
           })
       );
   });

2. Configure Next.js to Build the Service Worker:

   • You need to modify your next.config.js to ensure that TypeScript files are compiled correctly. You can use a custom Webpack configuration to handle this.

   // next.config.js
   const path = require('path');
   
   module.exports = {
       webpack: (config, { isServer }) => {
           if (isServer) {
               config.module.rules.push({
                   test: /\.ts$/,
                   include: path.resolve(__dirname, 'sw.ts'),
                   use: {
                       loader: 'ts-loader',
                       options: {
                           transpileOnly: true,
                       },
                   },
               });
           }
           return config;
       },
   };

3. Register the Service Worker:

   • You need to register the service worker in your application. This is typically done in the _app.js or _app.tsx file.

   // pages/_app.js
   import { useEffect } from 'react';
   
   function MyApp({ Component, pageProps }) {
       useEffect(() => {
           if ('serviceWorker' in navigator) {
               navigator.serviceWorker.register('/sw.js')
                   .then((registration) => {
                       console.log('Service Worker registered with scope:', registration.scope);
                   })
                   .catch((error) => {
                       console.error('Service Worker registration failed:', error);
                   });
           }
       }, []);
   
       return <Component {...pageProps} />;
   }
   
   export default MyApp;