Meta PR: Implement offline support

.nvmrc

@@ -1 +1 @@
-16
+18

README.md

@@ -11,6 +11,7 @@ This notably includes the possiblity to run client-side konnectors, to get your
 - [iOS only] Install XCode 
 - [Android only] Install Android Studio (or Android SDK)
 - [Android only] Java 11
+- [Android only] Install NDK (21.4.7075529) and CMake (3.10.2) from Android Studio's SDK Manager
 - [Android only] Copy the Android's `debug.keystore` from Cozy's password-store into `android/app/debug.keystore`
   - Run `pass show app-amirale/Certificates/debug.keystore > android/app/debug.keystore`
   - If you don't have access to Cozy's password-store, just generate a new `debug.keystore` file

__mocks__/react-native-performance-mock.ts

@@ -0,0 +1,10 @@
+import RNPerformance from 'react-native-performance'
+
+export const mockRNPerformance: jest.Mocked<typeof RNPerformance> = {
+  mark: jest.fn(),
+  measure: jest.fn(),
+  default: {
+    mark: jest.fn(),
+    measure: jest.fn(),
+  }
+} as unknown as jest.Mocked<typeof RNPerformance>

__tests__/jest.config.js

@@ -13,7 +13,7 @@ const config = {
       '<rootDir>/__tests__/transformer/imageTransformer.js'
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?|p-timeout?|p-wait-for?|@notifee?)|@fengweichong/react-native-gzip?/)'
+    'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?|p-timeout?|p-wait-for?|@notifee?)|@fengweichong/react-native-gzip|@craftzdog/*?/)'
   ],
   rootDir: '../'
 }

__tests__/jestSetupFile.js

@@ -13,6 +13,7 @@ import { mockRNBackgroundGeolocation } from '../__mocks__/react-native-backgroun
 import { mockRNFS } from '../__mocks__/react-native-fs-mock'
 import { mockRNIAP } from '../__mocks__/react-native-iap-mock'
 import { mockRNInAppBrowser } from '../__mocks__/react-native-inappbrowser-reborn-mock'
+import { mockRNPerformance } from '../__mocks__/react-native-performance-mock'
 
 jest.mock('react-native-device-info', () => mockRNDeviceInfo)
 
@@ -29,6 +30,7 @@ jest.mock('@sentry/react-native', () => ({
 jest.mock('react-native-fs', () => mockRNFS)
 jest.mock('react-native-iap', () => mockRNIAP)
 jest.mock('react-native-inappbrowser-reborn', () => mockRNInAppBrowser)
+jest.mock('react-native-performance', () => mockRNPerformance)
 jest.mock('react-native-ios11-devicecheck', () => ({
   getToken: jest.fn()
 }))
@@ -127,3 +129,24 @@ jest.mock('../src/core/tools/env', () => ({
   devlog: jest.fn(),
   shouldDisableAutolock: jest.fn().mockReturnValue(false)
 }))
+
+jest.mock('../src/pouchdb/pouchdb', () => ({}))
+jest.mock('react-native-quick-websql', () => ({}))
+
+class mockPouchLink {
+  constructor() {}
+}
+
+jest.mock('cozy-pouch-link', () => {
+  return jest.fn().mockImplementation(() => {
+    return new mockPouchLink()
+  })
+})
+
+jest.mock('react-native-mail', () => ({
+  mail: jest.fn()
+}))
+
+jest.mock('/app/domain/search/dataproxy-wrapper', () => ({
+  SearchEngine: jest.fn()
+}))

android/app/build.gradle

@@ -143,6 +143,13 @@ android {
         prod {
         }
     }
+
+    packagingOptions {
+        pickFirst 'lib/x86/libcrypto.so'
+        pickFirst 'lib/x86_64/libcrypto.so'
+        pickFirst 'lib/armeabi-v7a/libcrypto.so'
+        pickFirst 'lib/arm64-v8a/libcrypto.so'
+    }
 }
 
 dependencies {

android/app/src/main/java/io/cozy/flagship/mobile/MainApplication.java

@@ -80,15 +80,5 @@ public void onCreate() {
 
     WebView.setWebContentsDebuggingEnabled(true);
     OkHttpClientProvider.setOkHttpClientFactory(new UserAgentClientFactory());
-
-    try {
-      Field field = CursorWindow.class.getDeclaredField("sCursorWindowSize");
-      field.setAccessible(true);
-      field.set(null, 50 * 1024 * 1024); // 50MB
-    } catch (Exception e) {
-      if (BuildConfig.DEBUG) {
-        e.printStackTrace();
-      }
-    }
   }
 }

android/build.gradle

@@ -3,13 +3,15 @@
 buildscript {
     ext {
         buildToolsVersion = "34.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 34
         targetSdkVersion = 34
         androidXBrowser = "1.4.0"
         googlePlayServicesLocationVersion = "20.0.0"
         DocumentScanner_compileSdkVersion = 34
         DocumentScanner_targetSdkVersion = 34
+        QuickBase64_compileSdkVersion = 34
+        QuickBase64_targetSdkVersion = 34
         ndkVersion = "25.1.8937393"
         kotlinVersion = "1.8.0"
         // To solve a conflict between flipper and react-native-background-geolocation

babel.config.js

@@ -8,6 +8,10 @@ module.exports = {
         root: ['./'],
         alias: {
           '^/(.+)': './src/\\1',
+          'pouchdb-collate': '@craftzdog/pouchdb-collate-react-native',
+          crypto: 'react-native-quick-crypto',
+          stream: 'readable-stream',
+          buffer: '@craftzdog/react-native-buffer',
           '@cozy/minilog': 'cozy-minilog'
         },
         extensions: [

docs/README.md

@@ -8,8 +8,12 @@ title: Cozy React Native documentation - Table of contents
 -   [How to install cozy-home in local assets](how-to-install-home.md)
 -   [How to retrieve logs in release mode](how-to-retrieve-logs-in-release.md)
 -   [How to debug cozy-bar in local](how-to-debug-cozy-bar.md)
+-   [How to debug notifications](how-to-debug-notifications.md)
+-   [How to debug Onboarding partner](how-to-debug-onboarding-partner.md)
+-   [How to debug Offline mode](how-to-debug-offline-mode.md)
 
 ## API documentations
 
 -   [FlagshipUI API](/src/app/view/FlagshipUI/README.md)
 -   [White Labels management](/white_label/README.md)
+-   [How to make cozy-apps offline compatible](/how-to-make-cozy-app-offline-compatible.md)

docs/how-to-debug-offline-mode.md

@@ -0,0 +1,44 @@
+# How to debug Offline mode
+
+The Flagship app now handle Offline mode, this means that it can be open and run while the device is offline
+
+This features implies that we can debug the app while using an offline device. This document explains how to do it
+
+## Android emulator
+
+On android, in order to set the device offline, use the top drawer menu, open the `Internet` menu and then disable both the Mobile Data and the Wi-Fi entries 
+
+Since ReactNative 0.72, the ReactNative debug link won't work by default if the emulator is offline. This can be fixing by running the following commands from a terminal while the emulator is running:
+- `adb root`
+- `adb reverse tcp:8081 tcp:8081`
+- `adb shell setprop metro.host "localhost"`
+
+When executed, those commands allow to build, deploy and hot-reload the ReactNative app from an offline emulator. The debug console is also functional
+
+## iOS simulator
+
+iOS simulator seems not to provide a comfortable way to debug the app offline. The only way to set the simulator offline is to set the entire computer offline, but this is not an acceptable solution is we are debuging using a locally running cozy-stack as it will still be reachable by the simulator
+
+## Physical devices
+
+On physical iOS and Android device, it is possible to debug the app by setting the device offline
+
+However this will break build, hot-reload and console debugging features
+
+To mitigate this, it is possible to use Universal Links to extract console logs and DB files from the device
+
+For console logs, please refer to [How to retrieve logs in release mode](how-to-retrieve-logs-in-release.md) documentation
+
+For DB files, it is possible to send them by email using the following link:
+
+- https://links.mycozy.cloud/flagship/senddb or [cozy://senddb](cozy://senddb)
+  - trigger the OS send email intent pre-filled with DB files and Cozy's support email
+
+## Reset local PouchDB
+
+While debugging offline features, it is possible to corrupt the local PouchDB files (i.e. by injecting non valid documents)
+
+It is possible to reset the local PouchDB files using the following link:
+
+- https://links.mycozy.cloud/flagship/resetdb or [cozy://resetdb](cozy://resetdb)
+  - Reset the local PouchDB and restart the app

docs/how-to-debug-performances.md

@@ -0,0 +1,114 @@
+# How to debug performances
+
+Since [#1264](https://github.com/cozy/cozy-flagship-app/pull/1264) it is possible to measure the Flagship App's performances.
+
+This document's goal is to describe how to retrieve measurements, how to read them and how to add new measurements.
+
+The performance measurements are based on `react-native-performances` plugin and are complementary to CozyClient performance API implementation. More about those two concept can be read here:
+- `react-native-performances`: https://github.com/oblador/react-native-performance
+- CozyClient Performance API: https://github.com/cozy/cozy-client/blob/master/docs/performances.md
+
+# Nomenclature
+
+- `PerformanceAPI`: The API provided by CozyClient for measuring timings in the code base
+- `Performance devtools`: Browsers devtools pane dedicated to performance (i.e. [Chrome devtools](https://developer.chrome.com/docs/devtools/performance) and [Firefox profiled](https://profiler.firefox.com/docs/#/))
+- `Flipper performances plugin`: Plugin for Flipper dedicated to performance readings
+- `Mark`: A temporal event
+- `Measure`: A timing measurement between two temporal events
+
+# Retrieve measurements
+
+There are two way to retrieve measurements:
+
+- In realtime using Flipper
+- Asynchronously using Universal Links
+
+## Flipper plugin
+
+Flipper allows to read performance measurements in realtime through the `flipper-plugin-performance` plugin:
+
+- Open Flipper
+- Install the plugin `flipper-plugin-performance`
+- Start the Flagship app in development mode
+- On Flipper, open the `Performance` pane
+
+![Screenshot of the Flipper plugin](./images/performances-flipper.png)
+
+## Universal Links
+
+When it is not possible to use the Flipper plugin, then the Flagship App allows to share performances measurements by email.
+
+To do this:
+
+- Open the Flagship app and do the scenario that needs to be measured
+- Open one of the following links:
+  - https://links.mycozy.cloud/flagship/sendperfs
+  - cozy://sendperfs
+
+When clicked, the Flagship App will upload the performance measurements for the current session in the user's Cozy and then an email intent will allow to send a link to download them.
+
+The measurements are uploaded into the `Settings/AALogs/<current_date>` folder.
+
+# Read the measurements
+
+When downloading the measurements that were generated through Universal Link, then it is possible to read them using Chromium devtools.
+
+To do this:
+
+- Download the measurements file
+- From the `cozy-flagship-app` project, run the following command:
+  - `yarn perf:convert <path_to_downloaded_file>`
+  - This will generate a new file in the same folder as the targeted file, and suffixed with `_converted`
+- In a Chromium browser, open the devtools
+- Open the `Performance` pane
+- In the upper-left of the pane, click on `Load profile...` and selected the `_converted` file
+
+![Screenshot of the Chromium devtools](./images/performances-devtools.png)
+
+# Add new measurements
+
+In order to add new measurements, it is possible to use the API from `/app/domain/performances/measure`.
+
+This API provides `mark()` and `measure()` methods that are the core concept of doing measurements.
+
+Those methods have the same behavior as the ones available in CozyClient. Their API and behaviour are described in [the related documentation](https://github.com/cozy/cozy-client/blob/master/docs/performances.md#mark-method)
+
+## Add new measurements in a method
+
+In order to measure the duration of a methods or part of a methods:
+
+```js
+import rnperformance from '/app/domain/performances/measure'
+
+const someMethod = () => {
+  const markName = rnperformance.mark('someMethod')
+
+  // ... Method code
+
+  rnperformance.measure({ markName })
+}
+```
+
+
+## Add new measurements in a React component
+
+In order to measure the duration of a React component initialization:
+
+```js
+import rnperformance from '/app/domain/performances/measure'
+
+const SomeReactComponent = () => {
+  const [markName] = useState(() => rnperformance.mark('SomeReactComponent'))
+
+  useEffect(() => {
+    rnperformance.measure({
+      markName: markName,
+      measureName: 'Mount <App />'
+    })
+  }, [markName])
+}
+```
+
+## Add new measurements in CozyClient
+
+See [related documentation](https://github.com/cozy/cozy-client/blob/master/docs/performances.md)