Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-offline
Advanced tools
vue-offline - npm Package Compare versions
Comparing version 1.0.204 to 2.0.0
| { | ||
| "name": "vue-offline", | ||
| "version": "1.0.204", | ||
| "description": "Online/Offline events and directives for vue application", | ||
| "main": "index.js", | ||
| "version": "2.0.0", | ||
| "description": "Offline states and storage for Vue.js apps and Progressive Web Apps", | ||
| "main": "lib/vue-offline.js", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| "build": "webpack --env dev && webpack --env build && npm run test", | ||
| "dev": "webpack --progress --colors --watch --env dev" | ||
| }, | ||
@@ -14,11 +15,33 @@ "repository": { | ||
| "keywords": [ | ||
| "vue", | ||
| "pwa", | ||
| "offline", | ||
| "online", | ||
| "vue", | ||
| "vuejs", | ||
| "state" | ||
| "offline storage" | ||
| ], | ||
| "author": "Filip Rakowski (@filrak)", | ||
| "license": "MIT" | ||
| "author": "Filip Rakowski", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/filrak/vue-offline/issues" | ||
| }, | ||
| "homepage": "https://github.com/filrak/vue-offline", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.0.0-beta.51", | ||
| "@babel/core": "^7.0.0-beta.51", | ||
| "@babel/preset-env": "^7.0.0-beta.51", | ||
| "babel-eslint": "^8.0.3", | ||
| "babel-loader": "^8.0.0-beta.4", | ||
| "babel-plugin-add-module-exports": "^0.2.1", | ||
| "babel-preset-env": "^7.0.0-beta.3", | ||
| "babel-register": "^7.0.0-beta.3", | ||
| "chai": "^4.1.2", | ||
| "eslint": "^5.0.1", | ||
| "eslint-loader": "^2.0.0", | ||
| "jsdom": "11.11.0", | ||
| "jsdom-global": "3.0.2", | ||
| "mocha": "^4.0.1", | ||
| "uglifyjs-webpack-plugin": "^1.2.7", | ||
| "webpack": "^4.12.2", | ||
| "webpack-cli": "^3.0.8", | ||
| "yargs": "^10.0.3" | ||
| } | ||
| } |
162
README.md
@@ -1,19 +0,20 @@ | ||
| [](https://opensource.org/licenses/MIT) | ||
| # Vue Offline | ||
| # Offline/online states for Vue applications | ||
| 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. | ||
| This plugins notifies your application when online/offline status changes and allows to conditionally display components depending on the network status. Supports SSR. | ||
| **TL;DR** Adds `isOnline` `isOffline` data properties, `online`, `offline` events via global mixin and enables offline storage via `Vue.$offlineStorage` based on Local Storage | ||
| # Installation | ||
| - [Installation](https://github.com/filrak/vue-offline#installation) | ||
| - [Capabilities](https://github.com/filrak/vue-offline#capabilities) | ||
| - [VueOfflineMixin](https://github.com/filrak/vue-offline#vueofflinemixin) | ||
| - [VueOfflineStorage](https://github.com/filrak/vue-offline#vueofflinestorage) | ||
| ```` | ||
| ## Installation | ||
| To install this package as a plugin just type: | ||
| ```` | ||
| npm install vue-offline --save | ||
| ```` | ||
| There are two ways to use this plugin: | ||
| <b>Global</b> - if you register the plugin globally all features will be immediately avvailable in all of your components | ||
| and add it into your application with | ||
| ````js | ||
| import Vue from 'vue' | ||
| import VueOffline from 'vue-offline' | ||
@@ -23,50 +24,125 @@ | ||
| ```` | ||
| <b>Local for specific components </b>- if you need online/offline features only in specific components you can inject them as a mixins. This approach could save a little bit of performance. | ||
| Add vue-offline mixin inside components that you want to have features listed below: | ||
| ## Capabilities | ||
| This plugin contains two features: | ||
| ### VueOfflineMixin | ||
| Global mixin that'll add following properties to every component in your application: | ||
| - `isOnline` & `isOffline` data properties | ||
| ````html | ||
| <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> | ||
| ```` | ||
| ````js | ||
| import VueOfflineMixin from 'vue-offline/mixin' | ||
| export default { | ||
| name: 'MyComponent', | ||
| computed: { | ||
| networkStatus () { | ||
| return this.isOnline ? 'My network is fine' : 'I am offline' | ||
| } | ||
| } | ||
| } | ||
| ```` | ||
| - `online` and `offline` events in every component | ||
| ````js | ||
| 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`. | ||
| ````js | ||
| Vue.use(VueOffline, { | ||
| mixin: false | ||
| }) | ||
| ```` | ||
| You can still make use of `VueOfflineMixin` by injecting it directly into your components: | ||
| ````js | ||
| import { VueOfflineMixin } from 'vue-offline' | ||
| export default { | ||
| mixins: [VueOfflineMixin] | ||
| 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 storaga that uses [local storage][https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage] 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: | ||
| ````js | ||
| 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) | ||
| ````js | ||
| import { VueOfflineStorage } from 'vue-offline' | ||
| const cachedData = VueofflineStorage.get('cached-data') | ||
| # Features | ||
| ```` | ||
| ### Additional configuration | ||
| * `OnlineOnly` data property available for each component - `true` only when online | ||
| * `OfflineOnly` data property available for each component - `true` only when offline | ||
| * `online` event - available in every component, emitted when user changes from offline to online | ||
| * `offline` event - available in every component, emitted when user changes from online to offline | ||
| By default `VueofflineStorage` reference is included into every Vue component. You can disable this behavior by setting plugin option `storage` to `false`. | ||
| ````js | ||
| Vue.use(VueOffline, { | ||
| storage: false | ||
| }) | ||
| ```` | ||
| # Example | ||
| You can still make use of `VueOfflineStorage` by importing it directly into your components: | ||
| ````js | ||
| import { VueOfflineStorage } from 'vue-offline' | ||
| ````html | ||
| <template> | ||
| <div id="app"> | ||
| <div v-show="OnlineOnly">This part is visible only when user is online</div> | ||
| <div v-show="OfflineOnly">This part is visible only if user is offline</div> | ||
| <div> {{ onlineState }} </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| onlineState: navigator.onLine | ||
| 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') | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| created () { | ||
| this.$on('online', function () { | ||
| this.onlineState = "I'm online now!" | ||
| }) | ||
| this.$on('offline', function () { | ||
| this.onlineState = "I'm offline now!" | ||
| }) | ||
| } | ||
| } | ||
| </script> | ||
| ```` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3460.92%
227222
- Number of package files
- increased by150%
10
- Lines of code
- increased by172.73%
300
- Number of low maintenance alerts
- decreased by-50%
1
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by107.04%
147
Worsened metrics
- Dev dependency count
- increased byInfinity%
18
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes