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.js
Register 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