Using workbox to implement PWA in webpack

Using workbox to implement PWA in webpack

Explain

Important document version

  • "workbox-webpack-plugin": "^3.0.0"
  • "webpack": "^3.11.0"

Webpack provides workbox plug-in workbox webpack plugin

Used in webpack

Use in production version configuration

1. Import in the entry html template

<!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
      <title>webpack-react-template</title>
      <!-- Introduce manifest file -->
      <link rel="manifest" href="./manifest.json">
   </head>

   <body>
      <div id="app"></div>
      <script>
        // Register service writer
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker
                    .register('./service-wroker.js')
                    .then(registration => {
                        console.log('SW registered: ', registration);
                    })
                    .catch(registrationError => {
                        console.log('SW registration failed: ', registrationError);
                    });
            });
        }
      </script>
   </body>

</html>

2. Configure webpack in webpack.prod.config.js

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    // ... omit other configuration
    plugins: [
        // ... omit other configuration

        /*
            You can also use WorkboxPlugin.InjectManifest({}) configuration here
            But you need to configure swSrc to indicate the template service worker file
            WorkboxPlugin.GenerateSW({}) Service worker files can be generated directly
         */
        new WorkboxPlugin.GenerateSW({
            cacheId: 'webpack-pwa', // Set prefix
            skipWaiting: true, // Force Service Worker in wait to be activated
            clientsClaim: true, // Make Service Worker get page control right immediately after being activated
            swDest: 'service-wroker.js', // Output Service worker file
            globPatterns: ['**/*.{html,js,css,png.jpg}'], // Matching files
            globIgnores: ['service-wroker.js'], // Ignored files
            runtimeCaching: [
                // Configure route request cache
                {
                    urlPattern: /.*\.js/, // Matching file
                    handler: 'networkFirst' // Network priority
                }
            ]
        })
    ]
});

Note: to configure the routing request cache, see Another article

3. Transfer manifest.json and the required pictures

I use the copy webback plugin plug-in here for file transfer

new CopyWebpackPlugin([
    {
        from: 'src/manifest.json',
        to: 'manifest.json'
    },
    {
        from: 'src/icon.png',
        to: 'static/imgs/icon.png'
    }
]);

4. Service worker file generated after compilation

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js'
);

importScripts('/test/precache-manifest.14cde9ce3f3a728b83652a5461e9fd24.js');

workbox.core.setCacheNameDetails({ prefix: 'webpack-pwa' });

workbox.skipWaiting();
workbox.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerRoute(
    /.*\.js/,
    workbox.strategies.networkFirst(),
    'GET'
);

Relevant

Other related

Keywords: Webpack JSON network IE

Added by Telemachus on Sat, 04 Apr 2020 11:07:19 +0300

Popular Keywords

©2024 Programming VIP