This is a Vue component that uses Service Workers to enable offline experiences and preloading/caching of assets for improved performance.
Install via npm:
$ npm install vue-offline-preloader
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.jsRegister the component with Vue:
import VueOfflinePreloader from 'vue-offline-preloader';
new Vue({
el: '#app',
components: {
'vue-offline-preloader': VueOfflinePreloader
}
});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)
| 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 |
| 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 |
document.addEventListener('serviceWorker.preloading.asset', () => {
console.log('asset loaded!');
});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
- This package will work through
localhost, however once deployed you will need to have HTTPS as it is a requirement for Service Workers.
- Write tests