/vue-offline-preloader

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

Primary LanguageJavaScriptMIT LicenseMIT

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

Register the component with Vue:

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