laravel-mix-workbox-extension

Laravel Mix Workbox

⚠ This is a fork of the original laravel-mix-workbox with a fix for broken output paths introduced in version 0.1.3.

Usage

First, install the extension.

npm install laravel-mix-workbox-extension --save-dev

Then, require it within your webpack.mix.js file, like so:

// webpack.mix.js

let mix = require('laravel-mix');

require('laravel-mix-workbox-extension');

mix
    .js('resources/js/app.js', 'public/js')
    .less('resources/less/app.less', 'public/css')
    .generateSW();

And you're done! Compile everything down with npm run dev.

By default the service worker file will be generated in the public/ folder ad will be set up to precache all the files in your webpack build.

In your web page, you can register this service worker by adding:

<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

or using workbox-window module:

// e.g. app.js

import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js');

  wb.register();
}

You can pass in additional configuration like so:

// webpack.mix.js

let mix = require('laravel-mix');

require('laravel-mix-workbox-extension');

mix
    .js('resources/js/app.js', 'public/js')
    .less('resources/less/app.less', 'public/css')
    .generateSW({
        // Do not precache images
        exclude: [/\.(?:png|jpg|jpeg|svg)$/],

        // Define runtime caching rules.
        runtimeCaching: [{
            // Match any request that ends with .png, .jpg, .jpeg or .svg.
            urlPattern: /\.(?:png|jpg|jpeg|svg)$/,

            // Apply a cache-first strategy.
            handler: 'CacheFirst',

            options: {
                // Use a custom cache name.
                cacheName: 'images',

                // Only cache 10 images.
                expiration: {
                    maxEntries: 10,
                },
            },
        }],

        skipWaiting: true
    });

The full set of available options can be found on the Workbox Webpack module page.

InjectManifest

You can also use the InjectManifest plugin like so:

// resources/js/service-worker.js

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST || []);

// webpack.mix.js

let mix = require('laravel-mix');

require('laravel-mix-workbox-extension');

mix
    .js('resources/js/app.js', 'public/js')
    .less('resources/less/app.less', 'public/css')
    .injectManifest({
      swSrc: './resources/js/service-worker.js'
    });

This will create a precache manifest (a list of webpack assets) and inject it into your service worker file via importScripts().

You can pass the appropriate configuration as properties of an Object.

A full set of configuration options can be found on this reference page.