Enable 2D PWA mode

Summary: Adds the ability to create 2D PWAs to the bubblewrap cli tool

Reviewed By: zjm-meta

Differential Revision: D71768320

fbshipit-source-id: 7a2691d831578a1ea7bb9cfc811fa708682bf8ce

Author: Sophia Zhang

bubblewrap/packages/cli/src/lib/cmds/init.ts

@@ -34,8 +34,6 @@ export interface InitArgs {
   directory?: string;
   chromeosonly?: boolean;
   metaquest?: boolean;
-  // temporary flag to set 2D OS App Mode before the functionality is ready for use.
-  flat?: boolean;
   alphaDependencies?: boolean;
 }
 
@@ -181,6 +179,7 @@ async function confirmTwaConfig(twaManifest: TwaManifest, prompt: Prompt): Promi
         ...twaManifest.features,
         horizonBilling: {
           enabled: true,
+          horizonOSAppMode: twaManifest.horizonOSAppMode,
         },
       };
     }
@@ -298,17 +297,13 @@ export async function init(
     twaManifest.minSdkVersion = 23;
     // Warn about increasing the minimum Android API Level
     prompt.printMessage(messages.warnIncreasingMinSdkVersion);
-    if (args.flat){
-      // Temporary until 2d app mode is available in store
-      twaManifest.horizonOSAppMode = '2d';
-    } else {
-        twaManifest.horizonOSAppMode = await prompt.promptChoice(
-          messages.promptHorizonOSAppMode,
-          HorizonOsAppModes,
-          twaManifest.horizonOSAppMode,
-          validateHorizonOSAppMode,
-      );
-    }
+    twaManifest.horizonOSAppMode = await prompt.promptChoice(
+      messages.promptHorizonOSAppMode,
+      HorizonOsAppModes,
+      twaManifest.horizonOSAppMode,
+      validateHorizonOSAppMode,
+    );
+
     twaManifest.features = {
       ...twaManifest.features,
       horizonPlatformSDK: {

bubblewrap/packages/core/package-lock.json

@@ -65,7 +65,7 @@ export function asOrientation(input?: string): Orientation | null {
 }
 
 // Supported launch modes for TWA on Meta Quest
-const HORIZONOS_APP_MODE_VALUES = ['immersive'];
+const HORIZONOS_APP_MODE_VALUES = ['immersive', '2D'];
 export type HorizonOSAppMode = typeof HORIZONOS_APP_MODE_VALUES[number];
 export const HorizonOsAppModes: HorizonOSAppMode[] = [...HORIZONOS_APP_MODE_VALUES];
 

bubblewrap/packages/core/src/lib/TwaManifest.ts

@@ -80,7 +80,7 @@ export class FeatureManager {
 
     if (twaManifest.features.horizonBilling?.enabled) {
       if (twaManifest.alphaDependencies?.enabled) {
-        this.addFeature(new HorizonBillingFeature());
+        this.addFeature(new HorizonBillingFeature(twaManifest.features.horizonBilling));
       } else {
         log.error('Skipping HorizonBillingFeature. '+
             'Enable alphaDependencies to add HorizonBillingFeature.');

bubblewrap/packages/core/src/lib/features/FeatureManager.ts

@@ -15,19 +15,23 @@
  *  limitations under the License.
  */
 
+import { HorizonOSAppMode } from '../TwaManifest';
 import {EmptyFeature} from './EmptyFeature';
 
 export type HorizonBillingConfig = {
     enabled: boolean;
+    horizonOSAppMode: HorizonOSAppMode;
 }
 
 export class HorizonBillingFeature extends EmptyFeature {
-  constructor() {
+    constructor(config: HorizonBillingConfig) {
     super('horizonbilling');
 
     this.buildGradle.dependencies.push('com.meta.androidbrowserhelper:horizonbilling:1.0.0-alpha11');
 
-    this.androidManifest.components.push(`
+        const category = config.horizonOSAppMode == '2D' ? '' : '<category android:name="com.oculus.intent.category.VR" />';
+
+        this.androidManifest.components.push(`
         <activity
             android:name="com.meta.androidbrowserhelper.horizonbilling.provider.PaymentActivity"
             android:theme="@android:style/Theme.Translucent.NoTitleBar"
@@ -36,7 +40,7 @@ export class HorizonBillingFeature extends EmptyFeature {
 
             <intent-filter>
                 <action android:name="org.chromium.intent.action.PAY" />
-                <category android:name="com.oculus.intent.category.VR" />
+                ${category}
             </intent-filter>
 
             <meta-data

bubblewrap/packages/core/src/lib/features/HorizonBillingFeature.ts

@@ -20,7 +20,7 @@ import {AppsFlyerConfig, AppsFlyerFeature} from '../../../lib/features/AppsFlyer
 import {FirstRunFlagConfig, FirstRunFlagFeature} from '../../../lib/features/FirstRunFlagFeature';
 import {LocationDelegationFeature} from '../../../lib/features/LocationDelegationFeature';
 import {PlayBillingFeature} from '../../../lib/features/PlayBillingFeature';
-import {HorizonBillingFeature} from '../../../lib/features/HorizonBillingFeature';
+import { HorizonBillingConfig, HorizonBillingFeature } from '../../../lib/features/HorizonBillingFeature';
 import {TwaManifest} from '../../../lib/TwaManifest';
 import {Feature} from '../../../lib/features/Feature';
 
@@ -184,18 +184,20 @@ describe('FeatureManager', () => {
     });
 
     it('Enables the Horizon Billing feature', () => {
+      const horizonBillingConfig = {
+        enabled: true,
+        horizonOSAppMode: 'immersive',
+      } as HorizonBillingConfig;
       const manifest = {
         features: {
-          horizonBilling: {
-            enabled: true,
-          },
+          horizonBilling: horizonBillingConfig,
         },
         alphaDependencies: {
           enabled: true,
         },
       } as TwaManifest;
 
-      const horizonBillingFeature = new HorizonBillingFeature();
+      const horizonBillingFeature = new HorizonBillingFeature(horizonBillingConfig);
       const features = new FeatureManager(manifest);
 
       horizonBillingFeature.androidManifest.components.forEach((component) => {

bubblewrap/packages/core/src/spec/lib/features/FeatureManagerSpec.ts

@@ -162,7 +162,7 @@
                 <meta-data
                     android:name="horizonos.pwa.APP_MODE"
                     android:value="@string/horizonOSAppMode" />
-                <% if (horizonOSAppMode === '2d') { %>
+                <% if (horizonOSAppMode === '2D') { %>
                     <meta-data android:name="com.oculus.vrshell.uses_secure_layer"
                         android:value="secure"/>
                 <% } %>
@@ -209,7 +209,7 @@
                 <% if (horizonOSAppMode === 'immersive') { %>
                     <category android:name="com.oculus.intent.category.VR" />
                 <% } %>
-                <% if (horizonOSAppMode === '2d') { %>
+                <% if (horizonOSAppMode === '2D') { %>
                     <category android:name="com.oculus.intent.category.2D" />
                 <% } %>
             </intent-filter>