Introducing offline-first enablement for the Feathers framework

FeathersJS offline-first logo
Feathers acts as the API layer between any frontend and any backend
<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=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js”> </script>
<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/client@^1.0/dist/feathersjs-offline-client.min.js”></script>
<script src=”client.js”></script>
</body>
</html>
// …// Use localStorage to store our login token
client.configure(feathers.authentication());
// Wrap ‘messages’ to support the own-data offline-first principle
client.use(‘messages’, memory());
feathersjsOfflineClient.owndataWrapper(client, ‘messages’, {});
// or if we connect to a service on at Feathers server
client.use(‘messages’, feathersjsOfflineClient.Owndata({}));
// …
<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=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js”></script>
<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/client@^1.0/dist/feathersjs-offline-client.min.js”></script>
<script src=”client.js”></script>
</body>
</html>
// …// Use localStorage to store our login token
client.configure(feathers.authentication());
// Wrap ‘messages’ to support the own-net offline-first principle
client.use(‘messages’, memory());
feathersjsOfflineClient.ownnetWrapper(client, ‘messages’, {}));
// or if we connect to a service on at Feathers server
client.use(‘messages’, feathersjsOfflineClient.Ownnet({}));
// …
// …import { owndataWrapper } from ‘@feathersjs-offline/client’;// …// Wrap the service; use the own-data principle
app.use(‘messages’);
owndataWrapper(app, ‘messages’);
// …import { realtimeWrapper } from ‘@feathersjs-offline/server’;// …// Wrap the service; supports both own-data/own-net principles
app.use(‘messages’, Messages());
realtimeWrapper(app, ‘messages’, {});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Hillerström

Michael Hillerström

Particularly interested in leadership, development, virtualization, consolidation, automation, and applied artificial intelligence. Loves wine and playing golf