├── .editorconfig ├── .gitignore ├── .travis.yml ├── example.js ├── index.js ├── license ├── package.json ├── readme.md └── test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'stable' 4 | -------------------------------------------------------------------------------- /example.js: -------------------------------------------------------------------------------- 1 | const html = require('choo/html') 2 | const offline = require('./') 3 | const choo = require('choo') 4 | 5 | const app = choo() 6 | 7 | app.model({ 8 | state: { 9 | count: 0 10 | }, 11 | reducers: { 12 | increment: (action, state) => ({ count: state.count + 1 }), 13 | /** 14 | * If you turn off your internet connection, then the button of the example 15 | * app will decrement instead of increment the count, 16 | * keep in mind that the increment reducer get called too. 17 | */ 18 | decrement: (action, state) => ({ count: state.count - 2 }) 19 | } 20 | }) 21 | 22 | app.router(route => [ 23 | route('/', (state, prev, send) => html` 24 |
25 |

${state.count}

26 | 27 |
28 | `)]) 29 | 30 | offline((offline) => { 31 | app.use(offline) 32 | const tree = app.start() 33 | document.body.appendChild(tree) 34 | }) 35 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global navigator */ 2 | const xtend = require('xtend') 3 | const isOnline = require('is-online') 4 | var localforage = {} 5 | const assert = require('assert') 6 | 7 | function offline (opts, cb) { 8 | if (!cb) { 9 | cb = opts 10 | opts = {} 11 | } 12 | 13 | assert.equal(typeof opts, 'object', '[choo-offline] opts should be an object') 14 | assert.equal(typeof cb, 'function', '[choo-offline] cb should be a function') 15 | 16 | if ('serviceWorker' in navigator && opts.serviceWorker) { 17 | assert.equal(typeof opts.serviceWorker, 'string', '[choo-offline] opts.serviceWorker should be a string') 18 | 19 | if (opts.serviceWorker !== '') { 20 | navigator.serviceWorker.register(opts.serviceWorker).then(function (reg) { 21 | reg.onupdatefound = function () { 22 | var installingWorker = reg.installing 23 | 24 | installingWorker.onstatechange = function () { 25 | switch (installingWorker.state) { 26 | case 'installed': 27 | if (navigator.serviceWorker.controller) { 28 | console.log('New or updated content is available.') 29 | } else { 30 | console.log('Content is now available offline!') 31 | } 32 | break 33 | 34 | case 'redundant': 35 | console.error('The installing service worker became redundant.') 36 | break 37 | } 38 | } 39 | } 40 | }).catch(function (e) { 41 | console.error('Error during service worker registration:', e) 42 | }) 43 | } 44 | } 45 | 46 | if (!window.indexedDB) { 47 | return cb({}) 48 | } else { 49 | localforage = require('localforage') 50 | } 51 | if (opts.dbConfig) { 52 | assert.equal(typeof opts.dbConfig, 'object', '[choo-offline] opts.dbConfig should be an object') 53 | localforage.config(opts.dbConfig) 54 | } 55 | 56 | const onStateChange = (data, state, prev, createSend) => { 57 | localforage.setItem('app', state).then(value => { 58 | // Do other things once the value has been saved. 59 | }).catch(err => { 60 | // This code runs if there were any errors 61 | console.log(err) 62 | }) 63 | } 64 | const onAction = (data, state, name, caller, createSend) => { 65 | isOnline(function (online) { 66 | // if we are offline and also have a backup function, dispatch that backup function 67 | if (!online && data._backup) { 68 | const backupEffect = data._backup 69 | delete data._backup 70 | const send = createSend(backupEffect, true) 71 | send(backupEffect, data, false) 72 | } 73 | }) 74 | } 75 | localforage.getItem('app').then(localState => { 76 | cb({ 77 | onStateChange, 78 | onAction, 79 | wrapInitialState: function (appState) { 80 | // if there is nothing in the database, but initial local state is defined 81 | // set initial data for indexedDB as initial app state 82 | // this will be hit only once, because in future calls 83 | // localState will be defined 84 | if (!localState && appState) { 85 | localforage.setItem('app', appState) 86 | } 87 | return xtend(appState, localState) 88 | } 89 | }) 90 | }).catch(err => { 91 | throw err 92 | }) 93 | } 94 | 95 | module.exports = offline 96 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 YerkoPalma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "choo-offline", 3 | "description": "offline first support for choo apps", 4 | "author": "YerkoPalma", 5 | "version": "0.1.3", 6 | "main": "index.js", 7 | "files": [ 8 | "index.js" 9 | ], 10 | "scripts": { 11 | "test": "standard --verbose | snazzy && ava", 12 | "start": "budo example.js --open --pushstate --host 0.0.0.0 --port 8080 --" 13 | }, 14 | "repository": "YerkoPalma/choo-offline", 15 | "keywords": [ 16 | "choo", 17 | "offline", 18 | "service-worker", 19 | "local-storage" 20 | ], 21 | "license": "MIT", 22 | "dependencies": { 23 | "assert": "^1.4.1", 24 | "is-online": "^5.1.2", 25 | "localforage": "^1.4.2", 26 | "xtend": "^4.0.1" 27 | }, 28 | "devDependencies": { 29 | "ava": "*", 30 | "budo": "^9.2.0", 31 | "choo": "^3.3.0", 32 | "snazzy": "^6.0.0", 33 | "standard": "^8.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # choo-offline [![Build Status](https://secure.travis-ci.org/YerkoPalma/choo-offline.svg?branch=master)](https://travis-ci.org/YerkoPalma/choo-offline) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard) 2 | 3 | > offline first support for choo apps 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install --save choo-offline 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```javascript 14 | const choo = require('choo') 15 | const offline = require('choo-offline') 16 | 17 | const app = choo() 18 | 19 | offline(offline => { 20 | app.use(offline) 21 | 22 | const tree = app.start() 23 | document.body.appendChild(tree) 24 | }) 25 | ``` 26 | 27 | ## API 28 | 29 | ### `offline([opts], fn())` 30 | 31 | Function that wraps the choo `start` and `use` methods, only needed for this plugin, other plugins can be registered before. 32 | It can take two parameters. 33 | 34 | #### `opts` 35 | 36 | Type: `Object` 37 | 38 | Optional configuration object for the plugin, can take the following options: 39 | 40 | - `serviceWorker` (String): A string with the relative path to a service worker file, if not provided, it will not install a service worker. Defaults: `''`. 41 | - `dbConfig` (Object): An object with [localforage config](https://github.com/localForage/localForage#configuration). 42 | 43 | #### `fn` 44 | 45 | Type: `Function` 46 | 47 | Required function that get as the only argument, the offline plugin object. The object use the following hooks: 48 | 49 | - `onStateChange`: To update the app state locally with localforage. 50 | - `onAction`: To check if the app is offline and, if it is, use a backup action. Use the backup function when you have actions that depend on network availability, 51 | just define a `_backup` option in your `send()` data, the `_backup` option must be a string calling an effect or reducer from your model. For example 52 | 53 | ```javascript 54 | send('xhrEffect', { foo: bar, _backup: 'nonXhrBackup' }) 55 | ``` 56 | 57 | The above statement will call `xhrEffect` normally, but when offline, it will call the `nonXhrBackup` effect|reducer, passing the same data, excluding the _backup strings. 58 | - `wrapInitialState`: To get the initial local state. 59 | 60 | ## License 61 | 62 | MIT 63 | 64 | Crafted with <3 by [YerkoPalma](https://github.com/YerkoPalma) . 65 | 66 | *** 67 | 68 | > This package was initially generated with [yeoman](http://yeoman.io) and the [p generator](https://github.com/johnotander/generator-p.git). 69 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import test from 'ava' 2 | import offline from './' 3 | 4 | test('choo-offline assertions', t => { 5 | t.plan(1) 6 | 7 | t.throws(() => { offline() }) 8 | }) 9 | --------------------------------------------------------------------------------