Skip to content
Offline states and storage for Vue PWA
JavaScript
Branch: master
Clone or download
Latest commit 1217707 May 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib v 2.0.8 Mar 23, 2019
src fix ssr issue Mar 22, 2019
.gitignore babel presets corrected to appropaite version Nov 20, 2018
LICENSE Update LICENSE Nov 18, 2018
README.md just add a comma in README to work Apr 11, 2019
package-lock.json Release 2.0 Nov 18, 2018
package.json v 2.0.8 Mar 23, 2019
webpack.config.js babel presets corrected to appropaite version Nov 20, 2018
yarn.lock Bump lodash from 4.17.4 to 4.17.5 May 23, 2019

README.md

Vue Offline

This library allows you to enhance offline capabilities of your Vue.js application. It's especially useful when you're building offline-first Progressive Web Apps or just want to inform your users that they lost internet connection.

TL;DR Adds isOnline isOffline data properties, online, offline events via global mixin and enables offline storage via Vue.$offlineStorage based on Local Storage

Initially made for Vue Storefront

Installation

To install this package as a plugin just type:

npm install vue-offline --save

and add it into your application with

import VueOffline from 'vue-offline'

Vue.use(VueOffline)

Capabilities

This plugin contains two features:

VueOfflineMixin

Global mixin that'll add following properties to every component in your application:

  • isOnline & isOffline data properties
<template>
    <p v-if="isOnline">This part will be visible only if user is online</p>
    <p v-if="isOffline">This part will be visible only if user is offline</p>
</template>
export default {
    name: 'MyComponent',
    computed: {
        networkStatus () {
            return this.isOnline ? 'My network is fine' : 'I am offline'
        }
    }
}
  • online and offline events in every component
export default {
    name: 'MyComponent',
    mounted () {
        this.$on('offline' () => {
            alert('You are offline! The website will not work')
        })
    }
}

Additional configuration

By default VueOfflineMixin is injected into every component which may be a cause of potential performance problems. You can disable this behavior by setting plugin option mixin to false.

Vue.use(VueOffline, {
    mixin: false
})

You can still make use of VueOfflineMixin by injecting it directly into your components:

import { VueOfflineMixin } from 'vue-offline'

export default {
    name: 'MyComponent',
    mixins: [VueofflineMixin],
    computed: {
        networkStatus () {
            return this.isOnline ? 'My network is fine' : 'I am offline'
        }
    },
    mounted () {
        this.$on('offline', () => {
            alert('You are offline! The website will not work')
        })
    }
}

VueOfflineStorage

Offline storage that uses local storage to persist data for offline usage and caching. It's a perfect choice for offline-first PWA. You can use it as a fallback for failed network requests or a local cache.

The storage object has following properties:

  • set(key, value) - puts (or updates if already exists) value into storage under key key.
  • get(key) - returns value stored under key key
  • keys - return array of keys existing in your offline storage

To use this storage inside your app you can either

  • use this.$offlineStorage from Vue instance property in your components:
export default {
    methods: {
        getUserData () {
            if (this.isOnline) {
                // make network request that returns 'userData' object
                this.appData = userData
                this.$offlineStorage.set('user', userData)
            } else {
                this.appData = this.$offlineStorage.get('user')
            }
        }
    }
}
  • import the VueOfflineStorage instance if you want to use it somewhere else (e.g. Vuex store)
import { VueOfflineStorage } from 'vue-offline'

const cachedData = VueOfflineStorage.get('cached-data')

Additional configuration

By default VueofflineStorage reference is included into every Vue component. You can disable this behavior by setting plugin option storage to false.

Vue.use(VueOffline, {
    storage: false
})

You can still make use of VueOfflineStorage by importing it directly into your components:

import { VueOfflineStorage } from 'vue-offline'

export default {
    name: 'MyComponent',
    methods: {
        getUserData () {
            if (this.isOnline) {
                // make network request that returns 'userData' object
                this.appData = userData
                VueOfflineStorage.set('user', userData)
            } else {
                this.appData = VueOfflineStorage.get('user')
            }
        }
    }
}
You can’t perform that action at this time.