vue-offline-preloader v0.0.5

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

Events

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