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.
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.
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).
Create your app using
npx startupjs init myapp -v latest
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
Modify project
import './shim' // the first line in the file
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 })
import './shim'
import '@startupjs/offline/lib/offlineThread'
// react-native.config.js
module.exports = {
dependencies: {
'react-native-threads': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
},
},
},
};
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 - joltup/react-native-threads#79
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