feat(mobile): add setting to always open web view on launch (#1500)

packages/mobile/WebFrame/DeviceInterface.template.js

@@ -2,11 +2,12 @@
 class WebProcessDeviceInterface {
   constructor(messageSender) {
     this.appVersion = '1.2.3'
-    this.environment = 1
+    this.environment = 4
     this.databases = []
     this.messageSender = messageSender
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   setApplication() {}
 
   sendMessage(functionName, args) {

packages/mobile/src/AppStack.tsx

@@ -1,18 +1,19 @@
 import { AppStateEventType, AppStateType, TabletModeChangeData } from '@Lib/ApplicationState'
+import { AlwaysOpenWebAppOnLaunchKey } from '@Lib/constants'
 import { useHasEditor, useIsLocked } from '@Lib/SnjsHelperHooks'
 import { ScreenStatus } from '@Lib/StatusManager'
 import { IsDev } from '@Lib/Utils'
-import { CompositeNavigationProp, RouteProp } from '@react-navigation/native'
+import { CompositeNavigationProp, RouteProp, useNavigation } from '@react-navigation/native'
 import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack'
 import { HeaderTitleView } from '@Root/Components/HeaderTitleView'
 import { IoniconsHeaderButton } from '@Root/Components/IoniconsHeaderButton'
 import { Compose } from '@Root/Screens/Compose/Compose'
-import { SCREEN_COMPOSE, SCREEN_NOTES, SCREEN_VIEW_PROTECTED_NOTE } from '@Root/Screens/screens'
+import { SCREEN_COMPOSE, SCREEN_NOTES, SCREEN_VIEW_PROTECTED_NOTE, SCREEN_WEB_APP } from '@Root/Screens/screens'
 import { MainSideMenu } from '@Root/Screens/SideMenu/MainSideMenu'
 import { NoteSideMenu } from '@Root/Screens/SideMenu/NoteSideMenu'
 import { ViewProtectedNote } from '@Root/Screens/ViewProtectedNote/ViewProtectedNote'
 import { Root } from '@Screens/Root'
-import { UuidString } from '@standardnotes/snjs'
+import { ApplicationEvent, StorageValueModes, UuidString } from '@standardnotes/snjs'
 import { ICON_MENU } from '@Style/Icons'
 import { ThemeService } from '@Style/ThemeService'
 import { getDefaultDrawerWidth } from '@Style/Utils'
@@ -123,6 +124,28 @@ export const AppStackComponent = (props: ModalStackNavigationProp<'AppStack'>) =
     [application],
   )
 
+  const navigation = useNavigation<ModalStackNavigationProp<'AppStack'>['navigation']>()
+
+  useEffect(() => {
+    if (!application) {
+      return
+    }
+
+    const removeObserver = application.addEventObserver(async (event) => {
+      if (event === ApplicationEvent.Launched) {
+        const value = (await application.getValue(AlwaysOpenWebAppOnLaunchKey, StorageValueModes.Nonwrapped)) as
+          | boolean
+          | undefined
+        const shouldAlwaysOpenWebAppOnLaunch = value ?? false
+        if (shouldAlwaysOpenWebAppOnLaunch) {
+          navigation.push(SCREEN_WEB_APP)
+        }
+      }
+    })
+
+    return removeObserver
+  }, [application, navigation])
+
   return (
     <DrawerLayout
       ref={drawerRef}

packages/mobile/src/Lib/constants.ts

@@ -1,7 +1,5 @@
-import { IsDev } from '@Lib/Utils'
-
 export enum ErrorMessage {
   GeneralText = 'An error occurred. Please try again later.',
 }
 
-export const WebAppOptionEnabled = IsDev
+export const AlwaysOpenWebAppOnLaunchKey = 'AlwaysOpenWebAppOnLaunch'

packages/mobile/src/MobileWebAppContainer.tsx

@@ -37,7 +37,7 @@ export const MobileWebAppContainer = () => {
   class WebProcessDeviceInterface {
     constructor(messageSender) {
       this.appVersion = '1.2.3'
-      this.environment = 1
+      this.environment = 4
       this.databases = []
       this.messageSender = messageSender
     }

packages/mobile/src/Screens/Settings/Sections/OptionsSection.tsx

@@ -1,4 +1,4 @@
-import { WebAppOptionEnabled } from '@Lib/constants'
+import { AlwaysOpenWebAppOnLaunchKey } from '@Lib/constants'
 import { useSignedIn } from '@Lib/SnjsHelperHooks'
 import { useNavigation } from '@react-navigation/native'
 import { ButtonCell } from '@Root/Components/ButtonCell'
@@ -9,9 +9,9 @@ import { TableSection } from '@Root/Components/TableSection'
 import { useSafeApplicationContext } from '@Root/Hooks/useSafeApplicationContext'
 import { ModalStackNavigationProp } from '@Root/ModalStack'
 import { SCREEN_MANAGE_SESSIONS, SCREEN_SETTINGS, SCREEN_WEB_APP } from '@Root/Screens/screens'
-import { ButtonType, PrefKey } from '@standardnotes/snjs'
+import { ButtonType, PrefKey, StorageValueModes } from '@standardnotes/snjs'
 import moment from 'moment'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Platform } from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import RNFS from 'react-native-fs'
@@ -183,6 +183,18 @@ export const OptionsSection = ({ title, encryptionAvailable }: Props) => {
     )
   }, [application.alertService])
 
+  const [shouldAlwaysOpenWebAppOnLaunch, setShouldAlwaysOpenWebAppOnLaunch] = useState(false)
+
+  useEffect(() => {
+    const getSetting = async () => {
+      const value = (await application.getValue(AlwaysOpenWebAppOnLaunchKey, StorageValueModes.Nonwrapped)) as
+        | boolean
+        | undefined
+      setShouldAlwaysOpenWebAppOnLaunch(value ?? false)
+    }
+    void getSetting()
+  }, [application])
+
   const openWebApp = useCallback(() => {
     navigation.push(SCREEN_WEB_APP)
   }, [navigation])
@@ -226,9 +238,16 @@ export const OptionsSection = ({ title, encryptionAvailable }: Props) => {
         onPress={onExportPress}
       />
 
-      {WebAppOptionEnabled && (
-        <ButtonCell testID="openWebApp" leftAligned title={'Open Web App'} onPress={() => openWebApp()} />
-      )}
+      <ButtonCell testID="openWebApp" leftAligned title="Open Web App" onPress={() => openWebApp()} />
+      <SectionedAccessoryTableCell
+        onPress={() => {
+          const newValue = !shouldAlwaysOpenWebAppOnLaunch
+          setShouldAlwaysOpenWebAppOnLaunch(newValue)
+          void application.setValue(AlwaysOpenWebAppOnLaunchKey, newValue, StorageValueModes.Nonwrapped)
+        }}
+        text="Always Open Web App On Launch"
+        selected={() => shouldAlwaysOpenWebAppOnLaunch}
+      />
 
       {!signedIn && (
         <SectionedAccessoryTableCell

packages/services/src/Domain/Device/Environments.ts

@@ -2,6 +2,7 @@ export enum Environment {
   Web = 1,
   Desktop = 2,
   Mobile = 3,
+  NativeMobileWeb = 4,
 }
 
 export enum Platform {

packages/snjs/lib/Application/Platforms.ts

@@ -33,6 +33,7 @@ export function environmentFromString(string: string) {
     web: Environment.Web,
     desktop: Environment.Desktop,
     mobile: Environment.Mobile,
+    nativeMobileWeb: Environment.NativeMobileWeb,
   }
   return map[string]
 }
@@ -42,6 +43,7 @@ export function environmentToString(environment: Environment) {
     [Environment.Web]: 'web',
     [Environment.Desktop]: 'desktop',
     [Environment.Mobile]: 'mobile',
+    [Environment.NativeMobileWeb]: 'native-mobile-web',
   }
   return map[environment]
 }

packages/snjs/lib/Services/ComponentManager/ComponentManager.ts

@@ -291,11 +291,15 @@ export class SNComponentManager
     }
 
     const isWeb = this.environment === Environment.Web
+    const isMobileWebView = this.environment === Environment.NativeMobileWeb
     if (nativeFeature) {
-      if (!isWeb) {
+      if (!isWeb && !isMobileWebView) {
         throw Error('Mobile must override urlForComponent to handle native paths')
       }
-      const baseUrlRequiredForThemesInsideEditors = window.location.origin
+      let baseUrlRequiredForThemesInsideEditors = window.location.origin
+      if (isMobileWebView) {
+        baseUrlRequiredForThemesInsideEditors = window.location.href.split('/index.html')[0]
+      }
       return `${baseUrlRequiredForThemesInsideEditors}/components/assets/${component.identifier}/${nativeFeature.index_path}`
     }