Introduce DisplayMode type

packages/core/src/lib/TwaManifest.ts

@@ -35,6 +35,14 @@ const MIN_SHORTCUT_ICON_SIZE = 96;
 // The minimum size needed for the notification icon
 const MIN_NOTIFICATION_ICON_SIZE = 48;
 
+// Supported display modes for TWA
+export const DISPLAY_MODES = ['standalone', 'fullscreen'];
+type DisplayMode = typeof DISPLAY_MODES[number];
+
+export function asDisplayMode(input: string): DisplayMode | null {
+  return DISPLAY_MODES.includes(input) ? input as DisplayMode : null;
+}
+
 // Default values used on the Twa Manifest
 const DEFAULT_SPLASHSCREEN_FADEOUT_DURATION = 300;
 const DEFAULT_APP_NAME = 'My TWA';
@@ -96,7 +104,7 @@ export class TwaManifest {
   host: string;
   name: string;
   launcherName: string;
-  display: string;
+  display: DisplayMode;
   themeColor: Color;
   navigationColor: Color;
   backgroundColor: Color;
@@ -120,8 +128,10 @@ export class TwaManifest {
     this.packageId = data.packageId;
     this.host = data.host;
     this.name = data.name;
-    this.launcherName = data.launcherName || data.name; // Older Manifests may not have this field.
-    this.display = data.display || DEFAULT_DISPLAY_MODE; // Older Manifests may not have this field.
+    // Older manifests may not have this field:
+    this.launcherName = data.launcherName || data.name;
+    // Older manifests may not have this field:
+    this.display = asDisplayMode(data.display!) || DEFAULT_DISPLAY_MODE;
     this.themeColor = new Color(data.themeColor);
     this.navigationColor = new Color(data.navigationColor);
     this.backgroundColor = new Color(data.backgroundColor);
@@ -258,7 +268,7 @@ export class TwaManifest {
       name: webManifest['name'] || webManifest['short_name'] || DEFAULT_APP_NAME,
       launcherName: webManifest['short_name'] ||
         webManifest['name']?.substring(0, SHORT_NAME_MAX_SIZE) || DEFAULT_APP_NAME,
-      display: webManifest['display'] || DEFAULT_DISPLAY_MODE,
+      display: asDisplayMode(webManifest['display']!) || DEFAULT_DISPLAY_MODE,
       themeColor: webManifest['theme_color'] || DEFAULT_THEME_COLOR,
       navigationColor: DEFAULT_NAVIGATION_COLOR,
       backgroundColor: webManifest['background_color'] || DEFAULT_BACKGROUND_COLOR,

packages/core/src/spec/lib/TwaManifestSpec.ts

@@ -14,7 +14,8 @@
  *  limitations under the License.
  */
 
-import {TwaManifest, TwaManifestJson} from '../../lib/TwaManifest';
+import {TwaManifest, TwaManifestJson, asDisplayMode} from '../../lib/TwaManifest';
+import {WebManifestJson} from '../../lib/types/WebManifest';
 import Color = require('color');
 
 describe('TwaManifest', () => {
@@ -24,7 +25,7 @@ describe('TwaManifest', () => {
         'name': 'PWA Directory',
         'short_name': 'PwaDirectory',
         'start_url': '/?utm_source=homescreen',
-        'display': 'standalone',
+        'display': 'fullscreen',
         'icons': [{
           'src': '/favicons/android-chrome-192x192.png',
           'sizes': '192x192',
@@ -47,11 +48,11 @@ describe('TwaManifest', () => {
         }],
       };
       const manifestUrl = new URL('https://pwa-directory.com/manifest.json');
-      const twaManifest = TwaManifest.fromWebManifestJson(manifestUrl, manifest);
+      const twaManifest = TwaManifest.fromWebManifestJson(manifestUrl, manifest as WebManifestJson);
       expect(twaManifest.packageId).toBe('com.pwa_directory.twa');
       expect(twaManifest.name).toBe('PWA Directory');
       expect(twaManifest.launcherName).toBe('PwaDirectory');
-      expect(twaManifest.display).toBe('standalone');
+      expect(twaManifest.display).toBe('fullscreen');
       expect(twaManifest.startUrl).toBe('/?utm_source=homescreen');
       expect(twaManifest.iconUrl)
           .toBe('https://pwa-directory.com/favicons/android-chrome-512x512.png');
@@ -91,6 +92,7 @@ describe('TwaManifest', () => {
       expect(twaManifest.iconUrl).toBeUndefined();
       expect(twaManifest.maskableIconUrl).toBeUndefined();
       expect(twaManifest.monochromeIconUrl).toBeUndefined();
+      expect(twaManifest.display).toBe('standalone');
       expect(twaManifest.themeColor.hex()).toBe('#FFFFFF');
       expect(twaManifest.navigationColor.hex()).toBe('#000000');
       expect(twaManifest.backgroundColor.hex()).toBe('#FFFFFF');
@@ -167,6 +169,14 @@ describe('TwaManifest', () => {
       expect(twaManifest.maskableIconUrl).toBe('https://pwa-directory.com/favicons/maskable.png');
       expect(twaManifest.monochromeIconUrl).toBe('https://pwa-directory.com/favicons/monochrome.png');
     });
+
+    it('Replaces unsupported display modes with `standalone`', () => {
+      const manifestUrl = new URL('https://pwa-directory.com/manifest.json');
+      expect(TwaManifest.fromWebManifestJson(manifestUrl, {display: 'minimal-ui'}).display)
+          .toBe('standalone');
+      expect(TwaManifest.fromWebManifestJson(manifestUrl, {display: 'browser'}).display)
+          .toBe('standalone');
+    });
   });
 
   describe('#constructor', () => {
@@ -178,6 +188,7 @@ describe('TwaManifest', () => {
         launcherName: 'PwaDirectory',
         startUrl: '/',
         iconUrl: 'https://pwa-directory.com/favicons/android-chrome-512x512.png',
+        display: 'fullscreen',
         themeColor: '#00ff00',
         navigationColor: '#000000',
         backgroundColor: '#0000ff',
@@ -201,6 +212,7 @@ describe('TwaManifest', () => {
       expect(twaManifest.launcherName).toEqual(twaManifest.launcherName);
       expect(twaManifest.startUrl).toEqual(twaManifest.startUrl);
       expect(twaManifest.iconUrl).toEqual(twaManifest.iconUrl);
+      expect(twaManifest.display).toEqual('fullscreen');
       expect(twaManifest.themeColor).toEqual(new Color('#00ff00'));
       expect(twaManifest.navigationColor).toEqual(new Color('#000000'));
       expect(twaManifest.backgroundColor).toEqual(new Color('#0000ff'));
@@ -242,6 +254,7 @@ describe('TwaManifest', () => {
       const twaManifest = new TwaManifest(twaManifestJson);
       expect(twaManifest.webManifestUrl).toBeUndefined();
       expect(twaManifest.fallbackType).toBe('customtabs');
+      expect(twaManifest.display).toBe('standalone');
     });
   });
 
@@ -274,4 +287,18 @@ describe('TwaManifest', () => {
       expect(twaManifest.validate()).toBeNull();
     });
   });
+
+  describe('#asDisplayMode', () => {
+    it('Returns display mode if it is supported', () => {
+      expect(asDisplayMode('standalone')).toBe('standalone');
+      expect(asDisplayMode('fullscreen')).toBe('fullscreen');
+    });
+
+    it('Returns null for unsupported display modes', () => {
+      expect(asDisplayMode('browser')).toBeNull();
+      expect(asDisplayMode('minimal-ui')).toBeNull();
+      expect(asDisplayMode('bogus')).toBeNull();
+      expect(asDisplayMode('')).toBeNull();
+    });
+  });
 });