feat: Handle offline mode in Flagship app

manifest.webapp

@@ -33,6 +33,7 @@
     "screenshots/fr/screenshot01.png"
   ],
   "langs": ["en", "fr"],
+  "offline_support": true,
   "permissions": {
     "apps": {
       "description": "Required by the cozy-bar to display the icons of the apps",

package.json

@@ -14,7 +14,8 @@
     "test": "env NODE_ENV=test cs test --verbose --coverage",
     "cozyPublish": "cozy-app-publish --token $REGISTRY_TOKEN --prepublish downcloud --postpublish mattermost --space beta_tests",
     "version": "yarn version:manifest",
-    "version:manifest": "replace '\\d+\\.\\d+\\.\\d+' $npm_package_version ./manifest.webapp"
+    "version:manifest": "replace '\\d+\\.\\d+\\.\\d+' $npm_package_version ./manifest.webapp",
+    "postinstall": "patch-package"
   },
   "repository": {
     "type": "git",
@@ -59,15 +60,17 @@
     "chart.js": "3.7.1",
     "classnames": "2.3.2",
     "cozy-bar": "^12.2.4",
-    "cozy-client": "^50.4.0",
-    "cozy-device-helper": "^3.0.0",
+    "cozy-client": "^58.1.0",
+    "cozy-device-helper": "^3.8.0",
+    "cozy-devtools": "^1.3.0",
     "cozy-flags": "^3.2.2",
     "cozy-intent": "^2.27.0",
     "cozy-logger": "^1.14.0",
     "cozy-minilog": "^3.7.0",
     "cozy-ui": "^113.0.0",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",
+    "patch-package": "^8.0.0",
     "react": "18.3.1",
     "react-chartjs-2": "4.1.0",
     "react-dom": "18.3.1",

patches/@fastify+deepmerge+2.0.2.patch

@@ -0,0 +1,27 @@
+diff --git a/node_modules/@fastify/deepmerge/index.js b/node_modules/@fastify/deepmerge/index.js
+index e3ba232..e733358 100644
+--- a/node_modules/@fastify/deepmerge/index.js
++++ b/node_modules/@fastify/deepmerge/index.js
+@@ -65,11 +65,11 @@ function deepmergeConstructor (options) {
+     return result
+   }
+
+-  const getKeys = options?.symbols
++  const getKeys = (options && options.symbols)
+     ? getSymbolsAndKeys
+     : Object.keys
+
+-  const cloneProtoObject = typeof options?.cloneProtoObject === 'function'
++  const cloneProtoObject = (options && typeof options.cloneProtoObject === 'function')
+     ? options.cloneProtoObject
+     : undefined
+
+@@ -161,7 +161,7 @@ function deepmergeConstructor (options) {
+     return result
+   }
+
+-  return options?.all
++  return (options && options.all)
+     ? _deepmergeAll
+     : _deepmerge
+ }

src/components/AppProviders.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import { BarProvider } from 'cozy-bar'
 import { CozyProvider } from 'cozy-client'
-import { WebviewIntentProvider } from 'cozy-intent'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
@@ -27,23 +26,21 @@ const generateClassName = createGenerateClassName({
 
 const AppProviders = ({ client, lang, polyglot, children }) => {
   return (
-    <WebviewIntentProvider>
-      <StylesProvider generateClassName={generateClassName}>
-        <CozyProvider client={client}>
-          <BarProvider>
-            <I18n lang={lang} polyglot={polyglot}>
-              <CozyTheme>
-                <BreakpointsProvider>
-                  <AccountProvider>
-                    <AlertProvider>{children}</AlertProvider>
-                  </AccountProvider>
-                </BreakpointsProvider>
-              </CozyTheme>
-            </I18n>
-          </BarProvider>
-        </CozyProvider>
-      </StylesProvider>
-    </WebviewIntentProvider>
+    <StylesProvider generateClassName={generateClassName}>
+      <CozyProvider client={client}>
+        <BarProvider>
+          <I18n lang={lang} polyglot={polyglot}>
+            <CozyTheme>
+              <BreakpointsProvider>
+                <AccountProvider>
+                  <AlertProvider>{children}</AlertProvider>
+                </AccountProvider>
+              </BreakpointsProvider>
+            </CozyTheme>
+          </I18n>
+        </BarProvider>
+      </CozyProvider>
+    </StylesProvider>
   )
 }
 

src/components/AppWrapper.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react'
+import AppProviders from 'src/components/AppProviders'
+import AppRouter from 'src/components/AppRouter'
+import setupApp from 'src/targets/browser/setupApp'
+
+import { isFlagshipApp } from 'cozy-device-helper'
+import CozyDevtools from 'cozy-devtools'
+import flag from 'cozy-flags'
+import { useWebviewIntent, WebviewIntentProvider } from 'cozy-intent'
+
+const Wrapper = () => {
+  const webviewIntent = useWebviewIntent()
+  const [appContext, setAppContext] = useState(undefined)
+
+  useEffect(() => {
+    if (isFlagshipApp() && !webviewIntent) return
+
+    const newAppContext = setupApp(webviewIntent)
+
+    setAppContext(newAppContext)
+  }, [webviewIntent])
+
+  if (!appContext) {
+    return null
+  }
+
+  const { client, lang, polyglot } = appContext
+
+  return (
+    <AppProviders client={client} lang={lang} polyglot={polyglot}>
+      <AppRouter />
+      {flag('debug') && <CozyDevtools />}
+    </AppProviders>
+  )
+}
+
+export const AppWrapper = () => {
+  return (
+    <WebviewIntentProvider>
+      <Wrapper />
+    </WebviewIntentProvider>
+  )
+}

src/targets/browser/index.jsx

@@ -5,22 +5,15 @@ import 'cozy-bar/dist/stylesheet.css'
 
 import 'src/styles/index.styl'
 import React from 'react'
-// import { render } from 'react-dom'
-import AppProviders from 'src/components/AppProviders'
-import setupApp from 'src/targets/browser/setupApp'
-import AppRouter from 'src/components/AppRouter'
-import CozyDevtools from 'cozy-client/dist/devtools'
-import flag from 'cozy-flags'
+import { createRoot } from 'react-dom/client'
+
+import { AppWrapper } from 'src/components/AppWrapper'
 
 const init = function () {
-  const { root, client, lang, polyglot } = setupApp()
+  const container = document.querySelector('[role=application]')
+  const root = createRoot(container)
 
-  root.render(
-    <AppProviders client={client} lang={lang} polyglot={polyglot}>
-      <AppRouter />
-      {flag('debug') && <CozyDevtools />}
-    </AppProviders>
-  )
+  root.render(<AppWrapper />)
 }
 
 document.addEventListener('DOMContentLoaded', () => {

src/targets/browser/setupApp.jsx

@@ -1,8 +1,8 @@
 import memoize from 'lodash/memoize'
-import { createRoot } from 'react-dom/client'
 import schema from 'src/doctypes'
 
-import CozyClient from 'cozy-client'
+import CozyClient, { WebFlagshipLink } from 'cozy-client'
+import { isFlagshipApp, isFlagshipOfflineSupported } from 'cozy-device-helper'
 import flag from 'cozy-flags'
 import { initTranslation } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -13,11 +13,14 @@ import manifest from '../../../manifest.webapp'
  * @param {HTMLElement} container - application container
  * @returns {import('cozy-client/types/CozyClient').default} cozy client instance
  */
-const makeClient = container => {
+const makeClient = (container, intent) => {
   const data = JSON.parse(container.dataset.cozy)
   const protocol = window.location.protocol
   const cozyUrl = `${protocol}//${data.domain}`
 
+  const shouldUseWebFlagshipLink =
+    isFlagshipApp() && isFlagshipOfflineSupported()
+
   const client = new CozyClient({
     uri: cozyUrl,
     token: data.token,
@@ -26,9 +29,13 @@ const makeClient = container => {
       version: manifest.version
     },
     schema,
-    store: true
+    links: shouldUseWebFlagshipLink
+      ? [new WebFlagshipLink({ webviewIntent: intent })]
+      : null
   })
 
+  client.registerPlugin(flag.plugin)
+
   return client
 }
 
@@ -38,16 +45,14 @@ const getDataOrDefault = (data, defaultData) =>
 /**
  * Memoize this function in its own file so that it is correctly memoized
  */
-const setupApp = memoize(() => {
+const setupApp = memoize(intent => {
   const container = document.querySelector('[role=application]')
-  const root = createRoot(container)
-  const client = makeClient(container)
+  const client = makeClient(container, intent)
   const locale = JSON.parse(container.dataset.cozy)?.locale
   const lang = getDataOrDefault(locale, 'en')
   const polyglot = initTranslation(lang, lang => require(`locales/${lang}`))
-  client.registerPlugin(flag.plugin)
 
-  return { root, client, lang, polyglot }
+  return { client, lang, polyglot }
 })
 
 export default setupApp