feat: Display an error message when opening unsupported offline cozy-app

Cozy-apps can be opened offline only when they support this mode but
also when they have been opened at least one time to retrieve necessary
data to make them run offline

When those conditions are not met, we want to display an error message
to explain the user why the app cannot be opened

For now this message is in an Alert form, but later we may want to
improve the UI for this part

src/components/webviews/CozyProxyWebView.functions.js

@@ -1,9 +1,10 @@
-import { Platform } from 'react-native'
+import { Alert, Platform } from 'react-native'
 
 import Minilog from 'cozy-minilog'
 
 import { checkOauthClientsLimit } from '/app/domain/limits/checkOauthClientsLimit'
 import { showOauthClientsLimitExceeded } from '/app/domain/limits/OauthClientsLimitService'
+import { routes } from '/constants/routes'
 import { IndexInjectionWebviewComponent } from '/components/webviews/webViewComponents/IndexInjectionWebviewComponent'
 import { updateCozyAppBundleInBackground } from '/libs/cozyAppBundle/cozyAppBundle'
 import { getCookie } from '/libs/httpserver/httpCookieManager'
@@ -18,7 +19,9 @@ export const initHtmlContent = async ({
   href,
   client,
   dispatch,
-  setHtmlContentCreationDate
+  setHtmlContentCreationDate,
+  navigation,
+  t
 }) => {
   const cookieAlreadyExists = (await getCookie(client)) !== undefined
   log.debug(`Check cookie already exists: ${cookieAlreadyExists}`)
@@ -34,6 +37,22 @@ export const initHtmlContent = async ({
   const { html: htmlContent, source: htmlSource } =
     await httpServerContext.getIndexHtmlForSlug(slug, client)
 
+  if (htmlSource === 'offline') {
+    log.debug(
+      `Stop loading HTML because cozy-app ${slug} is not available for offline mode`
+    )
+    Alert.alert(
+      t('errors.offline_unsupported_title'),
+      t('errors.offline_unsupported_message'),
+      undefined,
+      {
+        cancelable: true
+      }
+    )
+    navigation.navigate(routes.home)
+    return
+  }
+
   if (
     !cookieAlreadyExists &&
     (await doesOauthClientsLimitPreventsLoading(client, slug, href))

src/components/webviews/CozyProxyWebView.js

@@ -1,4 +1,4 @@
-import { useFocusEffect } from '@react-navigation/native'
+import { useFocusEffect, useNavigation } from '@react-navigation/native'
 import React, { useCallback, useState, useEffect } from 'react'
 import { AppState, KeyboardAvoidingView, Platform, View } from 'react-native'
 
@@ -9,6 +9,7 @@ import { RemountProgress } from '/app/view/Loading/RemountProgress'
 import { initHtmlContent } from '/components/webviews/CozyProxyWebView.functions'
 import { CozyWebView } from '/components/webviews/CozyWebView'
 import { useHttpServerContext } from '/libs/httpserver/httpServerProvider'
+import { useI18n } from '/locales/i18n'
 
 import { styles } from '/components/webviews/CozyProxyWebView.styles'
 
@@ -23,6 +24,7 @@ export const CozyProxyWebView = ({
   wrapperStyle,
   ...props
 }) => {
+  const { t } = useI18n()
   const client = useClient()
   const httpServerContext = useHttpServerContext()
   const [state, dispatch] = useState({
@@ -34,6 +36,7 @@ export const CozyProxyWebView = ({
   const [htmlContentCreationDate, setHtmlContentCreationDate] = useState(
     Date.now()
   )
+  const navigation = useNavigation()
 
   const reload = useCallback(() => {
     log.debug('Reloading CozyProxyWebView')
@@ -73,7 +76,9 @@ export const CozyProxyWebView = ({
             href,
             client,
             dispatch,
-            setHtmlContentCreationDate
+            setHtmlContentCreationDate,
+            navigation,
+            t
           })
         } else {
           dispatch({
@@ -86,7 +91,7 @@ export const CozyProxyWebView = ({
     }
 
     void init()
-  }, [client, httpServerContext, slug, href])
+  }, [client, httpServerContext, navigation, slug, href])
 
   useFocusEffect(
     useCallback(() => {

src/locales/en.json

@@ -13,6 +13,8 @@
     "badUnlockPassword": "The credentials you entered are incorrect, please try again.",
     "badUnlockPin": "The PIN you entered is incorrect, please try again",
     "contactUs": "A problem, a suggestion? Contact us at",
+    "offline_unsupported_title": "Unable to load",
+    "offline_unsupported_message": "This application is not available offline",
     "unknown_error": "An unexpected error occurred, please try again.",
     "reset": "Return to home",
     "showDetails": "Show error details",

src/locales/fr.json

@@ -13,6 +13,8 @@
     "badUnlockPassword": "Les identifiants que vous avez saisis sont incorrects, veuillez ré-essayer.",
     "badUnlockPin": "Le code PIN que vous avez saisi est incorrect, veuillez ré-essayer",
     "contactUs": "Un problème, une suggestion ? Contactez-nous à",
+    "offline_unsupported_title": "Chargement impossible",
+    "offline_unsupported_message": "Cette application n'est pas disponible hors connexion",
     "unknown_error": "Une erreur inattendue s'est produite, veuillez ré-essayer.",
     "reset": "Revenir à l'accueil",
     "showDetails": "Voir les détails de l'erreur",