OfflineWeb
An offline storage extension that records analytics events in indexedDB when offline, and resyncs those events when back online. The extension adds a timestamp to each saved extension under the
timeSaved key.Like all offline storage extensions, this extension expects that you're already storing a connectivity flag in your app's state.
Installation
1
npm install --save @redux-beacon/offline-web
Copied!
Import
1
import OfflineWeb from '@redux-beacon/offline-web';
Copied!
Usage
Step 1
The first step is to track the connection status in your state. Here's an example of how you would do so using browser's in-built offline and online events:
1
const initialState = {
2
isConnected: true, // by default the app is assumed to have a connection
3
}
4
5
function reducer(state = initialState, action) {
6
switch (action.type) {
7
case 'UPDATE_CONNECTIVITY' {
8
return Object.assign({}, state, { isConnected: action.payload });
9
}
10
...
11
default:
12
return state;
13
}
14
}
15
16
window.addEventListener('offline', () => {
17
store.dispatch({
18
type: 'UPDATE_CONNECTIVITY',
19
payload: false,
20
});
21
});
22
23
window.addEventListener('online', () => {
24
store.dispatch({
25
type: 'UPDATE_CONNECTIVITY',
26
payload: true,
27
});
28
});
Copied!
Step 2
Create a connectivity selector that accepts the state, and returns your app's connection status:
1
const isConnected = state => state.isConnected;
Copied!
The connectivity selector should return a boolean:
truewhen the app is onlinefalsewhen the app is offline
Step 3
Initialize the extension and provide it when creating a middleware or meta reducer:
1
import OfflineWeb from '@redux-beacon/offline-web';
2
3
// Pass the connectivity selector from Step 2 as the first parameter
4
const offlineStorage = offlineWeb(isConnected);
5
6
// Create or import an events map and target.
7
// See "getting started" pages for instructions.
8
9
const middleware = createMiddleware(eventsMap, target, { offlineStorage });
10
const metaReducer = createMetaReducer(eventsMap, target, { offlineStorage });
Copied!
Now, whenever your app loses connection, your analytics events will now be saved offline until it regains its connection.
Last modified 4yr ago