startupjs offline
description
Startupjs offline creates an additional Thread (a la WebWorker) in background.
This thread has (we will call it offline backend):
- sharedb backend
- mingo
- async-storage (to store data)
Client sharedb connection is also modified. It can communicate with regular web server (via websocket) and with the thread offline-"backend". So, if web-server is available the client connects to the web-server otherwise it connects to offline server. Moreover going offline the socket copy all the current client sharedb data into the offline-server. Reconnecting it synchronizes data back from 'offline'-server to 'online'.
Also the offline-backend allows to have "readonly collections". F.e. it could be metadata about games, stages, exercises etc. To have the data prefetched on the client in case the user is offline.
Possible scenarios
Serverless app
We can create mobile apps without server storing all the data in the "offline"-backend. Pros here is that we can use our tech-stack without any changes: sharedb, mongo etc.
App with offline mode
We can design our app for full featured offline mode. The main task is to design it the way to have all the necessary data in offline. So, developer should decide which data should be read-only (usually it's necessary resources like game/stage/exercise metadata) and provide sincronization/update code (see example int the last section).
installation
step 0
Create your app using
npx startupjs init myapp -v latest
step 1
Install offline required packages
yarn add @startupjs/offline @react-native-community/async-storage http://github.com/zag2art/react-native-threads/tarball/rn61-fixes
npx rn-nodeify --hack --install "stream,buffer,process" --yarn
step 2
Modify project
add to index.js in the root of your app
import './shim' // the first line in the file
add to App.js
import offlineInitPlugin from '@startupjs/offline/lib/offlineInitPlugin'
/**
* All params are optional
*
* @param subscribeDoc fn take collectionName, docId - we need this to count refs and load/unload docs correctly
* @param unsubscribeDoc fn take collectionName, docId - we need this to count refs and load/unload docs correctly
* @param options.readOnlyCollections [String] - an array of names of collections with readonly data
*/
const socketParams = {
// ...
}
init({ baseUrl: BASE_URL, orm, plugins: [offlineInitPlugin], socketParams })
create worker.thread.js in the root of your app
import './shim'
import '@startupjs/offline/lib/offlineThread'
create react-native.config.js in the root of your app
// react-native.config.js
module.exports = {
dependencies: {
'react-native-threads': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
},
},
},
};
step 3
Manually link react-native-threads for android
Open up android/app/src/main/java/[...]/MainApplication.java:
Add the lines
import com.reactlibrary.RNThreadPackage;
import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
to the imports at the top of the file
Add packages.add(new RNThreadPackage(mReactNativeHost, new AsyncStoragePackage()));
to getPackages method before return.
Append the following lines to android/settings.gradle:
include ':react-native-threads'
project(':react-native-threads').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-threads/android')
Insert the following lines inside the dependencies block in android/app/build.gradle:
implementation project(':react-native-threads')
Just in case take a look here - https://github.com/joltup/react-native-threads#android-1 and here - https://github.com/joltup/react-native-threads/issues/79
How to upload/update readonly collections into thread
const collections = {
'games': {
'id1': { /* */ }, /** doc as in mongo like in the comment
'id2': { /* */ } /**
}
}
// doc example
// {
// "_id" : "65e74553-c7d7-4ace-9e1a-68b4e4600e62",
// "name" : "",
// "title" : "",
// "_type" : "http://sharejs.org/types/JSONv0",
// "_v" : 1,
// "_m" : {
// "ctime" : 1560842384760,
// "mtime" : 1560842384760
// },
// "_o" : ObjectId("5d089090b49a8f7740f4a77d")
// }
// rm all the previous content of "games" and fill it with the new docs
await model.socket.rpc.run('updateDocumentsFull', collections )
or
// await model.connection.socket....
// need to check