Package Exports

laravel-mix-workbox-extension
laravel-mix-workbox-extension/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (laravel-mix-workbox-extension) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.