Laravel Mix extension for Workbox
npm install laravel-mix-workboxThis extension provides instant Workbox support to your Mix (v4.0 and up) builds.
First, install the extension.
```
npm install laravel-mix-workbox --save-dev
Then, require it within your webpack.mix.js file, like so:
`js
// webpack.mix.js
let mix = require('laravel-mix');
require('laravel-mix-workbox');
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:
`html`
or using workbox-window module:
`js
// 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:
`js
// webpack.mix.js
let mix = require('laravel-mix');
require('laravel-mix-workbox');
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.
You can also use the InjectManifest plugin like so:
`js
// resources/js/service-worker.js
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST || []);
`
`js
// webpack.mix.js
let mix = require('laravel-mix');
require('laravel-mix-workbox');
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.