Vue Offline Preloader

This is a Vue component that uses Service Workers to enable offline experiences and preloading/caching of assets for improved performance.

Installation and Usage (macOS/Linux/Unix-like)

Step 1: Install Package

Install via npm:

$ npm install vue-offline-preloader

Step 2: Install Service Worker

In your project's public root, create a symbolic link to worker.js found in the package src folder:

ln -s ./node_modules/vue-offline-preloader/src/worker.js worker.js

Step 3: Register the Component

import VueOfflinePreloader from 'vue-offline-preloader';

new Vue({
    el: '#app',
    components: {
        'vue-offline-preloader': VueOfflinePreloader
    }
});

Step 4: Add Component to Template

Add component to your template:

<vue-offline-preloader 
    v-bind:assets="[
        '/',
        'images/logo.svg',
        'images/profile.png'
    ]"
></vue-offline-preloader>

Note: In order to enable an offline experience you'll need to include "/" in the assets array (see above example)

Props

Prop	Type	Default	Required	Description
assets	Array<string>		required	Collection of asset files to be cached
namespace	string	"vue"	optional	Namespace for resource cache
version	string	"v1"	optional	Version of resource cache
scope	string	"/"	optional	Scope of the Sevice Worker's control
worker	string	"/worker.js"	optional	Location of the Service Worker file. Defaults to app's public root
showPreloaderBar	boolean	true	optional	Display progress bar
backgroundColor	string	"#29d"	optional	Background colour of progress bar
debug	boolean	false	optional	Flag to display console.log debugging messages from Service Worker

Events

Event	Description
serviceWorker.register.success	The service worker has been successfully registered
serviceWorker.register.error	There was a problem registering the service worker
serviceWorker.preloading.asset	An asset has been preloaded successfully
serviceWorker.preloading.complete	Asset preloading is complete

Basic Event Example

document.addEventListener('serviceWorker.preloading.asset', () => {
    console.log('asset loaded!');
});

Browser Support

This package requires Service Worker support which currently includes Firefox 52+, Chrome 49+, Opera 45+, Chrome for Android 59+.

For an current list of browsers please see: Can I Use

Notes

This package will work through localhost, however once deployed you will need to have HTTPS as it is a requirement for Service Workers.

Todo

Write tests

marktalbot/vue-offline-preloader