laravel-mix-workbox-extension
v0.1.4
Published
Laravel Mix extension for Workbox
Downloads
3
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.