Configurable webmanifest path

package.json

@@ -86,7 +86,8 @@
     "validate": "npm run lint && lerna run validate",
     "version-increment": "lerna version --conventional-commits --yes",
     "version-increment-no-tag": "lerna version --conventional-commits --yes --no-git-tag-version",
-    "bump-project-versions": "cross-env ts-node --swc scripts/bump-project-versions.js"
+    "bump-project-versions": "cross-env ts-node --swc scripts/bump-project-versions.js",
+    "update-site-manifest": "cross-env ts-node --swc scripts/update-site-manifest.ts"
   },
   "types": "lib/",
   "pre-commit": [

packages/client-core/i18n/en/admin.json

@@ -324,7 +324,11 @@
       "theme": "Theme",
       "editor": "Editor",
       "admin": "Admin",
-      "key8thWall": "8th Wall Key"
+      "key8thWall": "8th Wall Key",
+      "shortTitle": "PWA Short Title",
+      "startPath": "PWA Start Path",
+      "shortTitleTooltip": "The displayed title of a PWA-installed copy of this app if 'title' is too long; recommended max 12 characters",
+      "startPathTooltip": "The path that a PWA-installed copy of this app will direct to"
     },
     "avatar": {
       "source": "Source",

packages/client-core/src/admin/components/Setting/Client.tsx

@@ -3,7 +3,9 @@ import { useTranslation } from 'react-i18next'
 
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
+import HelpIcon from '@mui/icons-material/Help'
 import { Box, Button, Grid, IconButton, Typography } from '@mui/material'
+import Tooltip from '@mui/material/Tooltip'
 
 import { useAuthState } from '../../../user/services/AuthService'
 import InputText from '../../common/InputText'
@@ -17,10 +19,12 @@ const Client = () => {
   const user = authState.user
 
   const clientSettingState = useClientSettingState()
-  const [clientSetting] = clientSettingState?.client?.value || []
+  const [clientSetting] = clientSettingState?.client?.value || {}
   const id = clientSetting?.id
   const [logo, setLogo] = useState(clientSetting?.logo)
   const [title, setTitle] = useState(clientSetting?.title)
+  const [shortTitle, setShortTitle] = useState(clientSetting?.shortTitle)
+  const [startPath, setStartPath] = useState(clientSetting?.startPath || '/')
   const [appTitle, setAppTitle] = useState(clientSetting?.appTitle)
   const [appSubtitle, setAppSubtitle] = useState(clientSetting?.appSubtitle)
   const [appDescription, setAppDescription] = useState(clientSetting?.appDescription)
@@ -43,6 +47,8 @@ const Client = () => {
     if (clientSetting) {
       setLogo(clientSetting?.logo)
       setTitle(clientSetting?.title)
+      setShortTitle(clientSetting?.shortTitle)
+      setStartPath(clientSetting?.startPath || '/')
       setAppTitle(clientSetting?.appTitle)
       setAppSubtitle(clientSetting?.appSubtitle)
       setAppDescription(clientSetting?.appDescription)
@@ -88,15 +94,17 @@ const Client = () => {
       {
         logo: logo,
         title: title,
+        shortTitle: shortTitle,
+        startPath: startPath,
         icon192px: icon192px,
         icon512px: icon512px,
         favicon16px: favicon16px,
         favicon32px: favicon32px,
         siteDescription: siteDescription,
+        appBackground: appBackground,
         appTitle: appTitle,
         appSubtitle: appSubtitle,
         appDescription: appDescription,
-        appBackground: appBackground,
         appSocialLinks: JSON.stringify(appSocialLinks),
         themeSettings: JSON.stringify(clientSetting?.themeSettings),
         themeModes: JSON.stringify(clientSetting?.themeModes),
@@ -199,6 +207,30 @@ const Client = () => {
             onChange={(e) => setTitle(e.target.value)}
           />
 
+          <div className={styles.tooltipRow}>
+            <InputText
+              name="shortTitle"
+              label={t('admin:components.setting.shortTitle')}
+              value={shortTitle || ''}
+              onChange={(e) => setShortTitle(e.target.value)}
+            />
+            <Tooltip title={t('admin:components.setting.shortTitleTooltip')} arrow>
+              <HelpIcon />
+            </Tooltip>
+          </div>
+
+          <div className={styles.tooltipRow}>
+            <InputText
+              name="startPath"
+              label={t('admin:components.setting.startPath')}
+              value={startPath || '/'}
+              onChange={(e) => setStartPath(e.target.value)}
+            />
+            <Tooltip title={t('admin:components.setting.startPathTooltip')} arrow>
+              <HelpIcon />
+            </Tooltip>
+          </div>
+
           <InputText
             name="description"
             label={t('admin:components.setting.description')}

packages/client-core/src/admin/components/Setting/ClientTheme/index.tsx

@@ -72,6 +72,8 @@ const ClientTheme = () => {
       {
         logo: clientSetting?.logo,
         title: clientSetting?.title,
+        shortTitle: clientSetting?.shortTitle,
+        startPath: clientSetting?.startPath,
         icon192px: clientSetting?.icon192px,
         icon512px: clientSetting?.icon512px,
         favicon16px: clientSetting?.favicon16px,

packages/client-core/src/admin/styles/settings.module.scss

@@ -244,3 +244,16 @@
 .iconButton {
   color: var(--iconButtonColor);
 }
+
+.tooltipRow {
+  display: flex;
+
+  & > :first-child {
+    flex-grow: 1;
+  }
+
+  & > :last-child {
+    margin-left: 6px;
+    margin-top: 6px;
+  }
+}

packages/client/public/site.webmanifest

@@ -1,6 +1,6 @@
 {
     "name": "Ethereal Engine",
-    "short_name": "EtherealEng",
+    "short_name": "Ethereal Eng",
     "start_url": "/",
     "icons": [
         {

packages/common/src/dbmodels/ClientSetting.ts

@@ -2,6 +2,8 @@ export interface ClientSettingInterface {
   id: string
   logo: string
   title: string
+  shortTitle: string
+  startPath: string
   url: string
   releaseName: string
   siteDescription: string

packages/common/src/interfaces/ClientSetting.ts

@@ -2,6 +2,8 @@ export interface ClientSetting {
   id: string
   logo: string
   title: string
+  shortTitle: string
+  startPath: string
   url: string
   releaseName?: string
   siteDescription: string
@@ -77,6 +79,8 @@ export interface ThemeOptions {
 export interface PatchClientSetting {
   logo: string
   title: string
+  shortTitle: string
+  startPath: string
   icon192px: string
   icon512px: string
   favicon16px: string

packages/server-core/src/media/storageprovider/s3.storage.ts

@@ -197,9 +197,7 @@ export class S3Provider implements StorageProviderInterface {
 
     if (data.Metadata) (args as StorageObjectInterface).Metadata = data.Metadata
 
-    const result = await this.provider.putObject(args).promise()
-
-    return result
+    return this.provider.putObject(args).promise()
   }
 
   /**
@@ -209,7 +207,7 @@ export class S3Provider implements StorageProviderInterface {
   async createInvalidation(invalidationItems: any[]) {
     // for non-standard s3 setups, we don't use cloudfront
     if (config.server.storageProvider !== 'aws') return
-    const data = await this.cloudfront
+    return this.cloudfront
       .createInvalidation({
         DistributionId: config.aws.cloudfront.distributionId,
         InvalidationBatch: {
@@ -221,8 +219,6 @@ export class S3Provider implements StorageProviderInterface {
         }
       })
       .promise()
-
-    return data
   }
 
   /**

packages/server-core/src/setting/client-setting/client-setting.class.ts

@@ -1,9 +1,15 @@
 import { Id, NullableId, Paginated, Params } from '@feathersjs/feathers'
 import { SequelizeServiceOptions, Service } from 'feathers-sequelize'
+import path from 'path'
 
 import { ClientSetting as ClientSettingInterface } from '@xrengine/common/src/interfaces/ClientSetting'
 
 import { Application } from '../../../declarations'
+import config from '../../appconfig'
+import { getCacheDomain } from '../../media/storageprovider/getCacheDomain'
+import { getStorageProvider } from '../../media/storageprovider/storageprovider'
+import logger from '../../ServerLogger'
+import { getContentType } from '../../util/fileUtils'
 
 export type ClientSettingDataType = ClientSettingInterface
 
@@ -61,6 +67,58 @@ export class ClientSetting<T = ClientSettingDataType> extends Service<T> {
   }
 
   async patch(id: NullableId, data: any, params?: Params): Promise<T | T[]> {
+    const webmanifestPath =
+      process.env.SERVE_CLIENT_FROM_STORAGE_PROVIDER === 'true' ? `client/site.webmanifest` : 'site.webmanifest'
+    const storageProvider = getStorageProvider()
+    try {
+      const webmanifestResponse = await storageProvider.getObject(webmanifestPath)
+      const webmanifest = JSON.parse(webmanifestResponse.Body.toString('utf-8'))
+      data.startPath = data.startPath.replace(/https:\/\//, '/')
+      const icon192px = /https:\/\//.test(data.icon192px) ? data.icon192px : path.join('client', data.icon192px)
+      const icon512px = /https:\/\//.test(data.icon512px) ? data.icon512px : path.join('client', data.icon512px)
+      webmanifest.name = data.title
+      webmanifest.short_name = data.shortTitle
+      webmanifest.start_url =
+        config.client.url[config.client.url.length - 1] === '/' && data.startPath[0] === '/'
+          ? config.client.url + data.startPath.slice(1)
+          : config.client.url[config.client.url.length - 1] !== '/' && data.startPath[0] !== '/'
+          ? config.client.url + '/' + data.startPath
+          : config.client.url + data.startPath
+      const cacheDomain = getCacheDomain(storageProvider)
+      webmanifest.icons = [
+        {
+          src: /https:\/\//.test(icon192px)
+            ? icon192px
+            : cacheDomain[cacheDomain.length - 1] === '/' && icon192px[0] === '/'
+            ? `https://${cacheDomain}${icon192px.slice(1)}`
+            : cacheDomain[cacheDomain.length - 1] !== '/' && icon192px[0] !== '/'
+            ? `https://${cacheDomain}/${icon192px}`
+            : `https://${cacheDomain}${icon192px}`,
+          sizes: '192x192',
+          type: getContentType(icon192px)
+        },
+        {
+          src: /https:\/\//.test(icon512px)
+            ? icon512px
+            : cacheDomain[cacheDomain.length - 1] === '/' && icon512px[0] === '/'
+            ? `https://${cacheDomain}${icon512px.slice(1)}`
+            : cacheDomain[cacheDomain.length - 1] !== '/' && icon512px[0] !== '/'
+            ? `https://${cacheDomain}/${icon512px}`
+            : `https://${cacheDomain}${icon512px}`,
+          sizes: '512x512',
+          type: getContentType(icon512px)
+        }
+      ]
+      await storageProvider.createInvalidation([webmanifestPath])
+      await storageProvider.putObject({
+        Body: Buffer.from(JSON.stringify(webmanifest)),
+        ContentType: 'application/manifest+json',
+        Key: 'client/site.webmanifest'
+      })
+    } catch (err) {
+      logger.info('Error with manifest update', webmanifestPath)
+      logger.error(err)
+    }
     return super.patch(id, data, params)
   }
 }

packages/server-core/src/setting/client-setting/client-setting.model.ts

@@ -6,7 +6,7 @@ import { Application } from '../../../declarations'
 
 export default (app: Application) => {
   const sequelizeClient: Sequelize = app.get('sequelizeClient')
-  const ClientSetting = sequelizeClient.define<Model<ClientSettingInterface>>(
+  return sequelizeClient.define<Model<ClientSettingInterface>>(
     'clientSetting',
     {
       id: {
@@ -23,10 +23,18 @@ export default (app: Application) => {
         type: DataTypes.STRING,
         allowNull: true
       },
+      shortTitle: {
+        type: DataTypes.STRING,
+        allowNull: true
+      },
       url: {
         type: DataTypes.STRING,
         allowNull: true
       },
+      startPath: {
+        type: DataTypes.STRING,
+        allowNull: false
+      },
       releaseName: {
         type: DataTypes.STRING,
         allowNull: true
@@ -92,6 +100,4 @@ export default (app: Application) => {
       }
     }
   )
-
-  return ClientSetting
 }

packages/server-core/src/setting/client-setting/client-setting.seed.ts

@@ -6,6 +6,8 @@ export const clientSeed = {
     {
       logo: process.env.APP_LOGO,
       title: process.env.APP_TITLE,
+      shortTitle: process.env.APP_TITLE,
+      startPath: '/',
       releaseName: process.env.RELEASE_NAME || 'local',
       siteDescription: process.env.SITE_DESC,
       url:

scripts/run-builder.sh

@@ -16,6 +16,7 @@ bash ./scripts/setup_aws.sh $AWS_ACCESS_KEY $AWS_SECRET $AWS_REGION $CLUSTER_NAM
 npm run check-db-exists
 npm run install-projects
 npm run prepare-database
+npm run update-site-manifest
 cd packages/client && npm run buildenv
 if [ -n "$TWA_LINK" ]
 then