# Offline-first adapter
If the Feathers Offline-first API does not suit your needs you could take a look at @feathersjs-offline/localforage
(opens new window) which is an Feathers Offline-first database adapter for the client.
# @feathers-offline/localforage
(opens new window) (opens new window) (opens new window) (opens new window) (opens new window)
@feathersjs-offline/localforage (opens new window)is a database service adapter enabling the ordinary Feathers functions for WebSQL
, IndexedDB
, and LocalStorage
by extending the localForage
package as described in localForage (opens new window).
$ npm install --save @feathersjs-offline/localforage
Important: @feathersjs-offline/localforage
supports the Feathers Common database adapter API and querying syntax thus simplifying your use of the browser storage by exposing one common, well known, and well documented interface.
# API
# service(options)
Returns a new service instance initialized with the given options.
const LocalForage = require('@feathersjs-offline/localforage');
app.use('/messages', LocalForage({
storage: ['WebSQL', 'IndexedDB', 'localStorage' ],
name: 'MySpecialClientDB'
}));
Options:
The adapter supports these options:
storage
(optional, default['INDEXEDDB','WEBSQL','LOCALSTORAGE']
): - Determines which storage backend to use. If given an array (like in the default) the driver will use the first found backend, otherwise it will use the one given or fall-back to'LOCALSTORAGE'
.name
(optional, default'feathers'
) - This is the localForagestoreName
- kind of like table name in SQL.size
(optional, default:4980736
) - The maximum storage size to use. Default is just shy of 5MB (maximum for browsers without getting a prompt).version
(optional, default:1.0
) - This is currently the only allowable version.id
(optional) - The name of the id field property (usually set by default to id or _id).startId
(optional, default:0
) - An id number to start with that will be incremented for new record not containing a valid id. The id field of the record must be either of typeString
orNumber
.events
(optional) - A list of custom service events sent by this service.paginate
(optional) - A pagination object containing a default and max page size.multi
(optional, default:false
) - Allow create with arrays and update and remove with id null to change multiple items. Can be true for all methods or an array of allowed methods (e.g. [ 'remove', 'create' ]).
# Methods
@feathersjs-offline/localforage
implements all the standard service methods as described in Services.
# Example
# Browser
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<title>FeathersJS chat</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="//unpkg.com/feathers-chat@4.0.0/public/base.css">
<link rel="stylesheet" href="//unpkg.com/feathers-chat@4.0.0/public/chat.css">
</head>
<body>
<div id="app" class="flex flex-column"></div>
<script src="//unpkg.com/@feathersjs/client@^4.3.0/dist/feathers.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="//unpkg.com/@feathersjs-offline/localforage@^2.0/dist/feathersjs-offline-localforage.min.js"></script>
<script type="text/javascript">
var app = feathers().use('/messages', feathersOfflineLocalforage.Service({ name: 'messages', store: 'LOCALSTORAGE' }));
var messages = app.service('messages');
messages.on('created', function(message) {
console.log('Someone created a message', message);
});
messages.create({
text: 'A message created and stored in browser'
});
</script>
</body>
</html>
</script>
# Want to know more?
As @feathersjs-offline/client
utilises @feathersjs-offline/localforage
you can see this adapter live in an example using service handles and showing the inner workings of offline-first wrappers here (opens new window).