custom-pwa-webpack-plugin

webpack plugin for development and customization service worker

A plugin to help you create your Progressive Web Apps.

It will suit you if you know what you are doing, and you just need a tool for this.

Usage:

Add this code to the script of your service worker. It will be replaced by the same variables. Only with actual values.

my-service-worker.js

// <version_template
const VERSION = '0.1';
const files = [];
// end_version_template>

// ...

You can use the files to create a query cache. They will be collected relative to the pattern specified in the options.

Next, connect the plugin and specify the desired options.

webpack.config.js

var path = require('path');
var CustomPwaWebpackPlugin = require('custom-pwa-webpack-plugin');

module.exports = {
    // You config
    entry: path.join(__dirname, './src/index.js'),
    output: {
        filename: 'bundle.js'
    },
    // ...

    plugins: [
        new CustomPwaWebpackPlugin({
            entry: path.join(__dirname, 'my-service-worker.js'),
            dist: path.join(__dirname, 'dist'), 
            version: require('./package').version,
            name: 'service-worker.js',
            file_pattern: /\.(js|css|html)$/
        })
    ]
}

Parameters	Default	Required	Description
entry		true	The file from which to start the build script (absolute path)
run	true	false	If you don't need create service worker
dist		false	The folder to save the script (absolute path)
version		false	Version to create the cache
name	'service-worker.js'	false	File name
file_pattern	/\.(js|css|html)$/i	false	Regular expression for file caching
file_prefix	'/'	false	Prefix path for files
add	[]	false	The list of paths added manually
replace_names	{}	false	Replace full path name for files,
mode	'production'	false	Service Worker build file mode
num_runned	1	false	HACK for webpack <4 and Nuxt
dev	false	false	true - if watch mode

num_runned - Need if you start multiple processes, and only one need to run. Then specify the number. For Nuxt is 1.

---

Options

replace_names

webpack.config.js

var path = require('path');
var CustomPwaWebpackPlugin = require('custom-pwa-webpack-plugin');

module.exports = {
    // You config
    entry: path.join(__dirname, './src/index.js'),
    output: {
        filename: 'bundle.js'
    },
    // ...

    plugins: [
        new CustomPwaWebpackPlugin({
            entry: path.join(__dirname, 'my-service-worker.js'),
            replace_names: {
                // key is will be replaced with value
                '/_nuxt/index.spa.html': '/'
            }
        })
    ]
}

---

Tips for NuxtJs

// nuxt.config.js

module.exports = {
    build: {
        plugins: [
            new CustomPwaWebpackPlugin({
                entry: path.join(__dirname, 'sw/src/index.js'),
                dist: path.join(__dirname, 'static'),
                version: require('./package').version,
                file_pattern: /\.(html|js|css|woff|woff2|ttf|eot|svg)$/i,
                file_prefix: '/_nuxt/',
                num_runned: 1 // for "npm run generate"
            })
        ]
    }
}

In layout/default.vue add

<script type="text/javascript">
(function() {
    'use strict';
    // Check to make sure service workers are supported in the current browser,
    // and that the current page is accessed from a secure origin. Using a
    // service worker from an insecure origin will trigger JS console errors.
    const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
        // [::1] is the IPv6 localhost address.
        window.location.hostname === '[::1]' ||
        // 127.0.0.1/8 is considered localhost for IPv4.
        window.location.hostname.match(
            /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
        )
    );

if ('serviceWorker' in navigator &&
    (window.location.protocol === 'https:' || isLocalhost)) {
    navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
            // updatefound is fired if service-worker.js changes.
            registration.onupdatefound = function() {
                // updatefound is also fired the very first time the SW is installed,
                // and there's no need to prompt for a reload at that point.
                // So check here to see if the page is already controlled,
                // i.e. whether there's an existing service worker.
                if (navigator.serviceWorker.controller) {
                    // The updatefound event implies that registration.installing is set
                    const installingWorker = registration.installing;
                    installingWorker.onstatechange = function() {
                        switch (installingWorker.state) {
                            case 'installed':
                                // At this point, the old content will have been purged and the
                                // fresh content will have been added to the cache.
                                // It's the perfect time to display a "New content is
                                // available; please refresh." message in the page's interface.
                                break;
                            case 'redundant':
                                throw new Error('The installing ' +
                                    'service worker became redundant.');
                            default:
                                // Ignore
                        }
                    };
                }
            };
        }).catch(function(e) {
            console.error('Error during service worker registration:', e);
        });
    }
})();
</script>