Add handler for unsupported browser APIs in Interactive Canvas

Radio group selects whether there should be a warning or throw an error
By default nothing changes

Bug: 193062584
Bug: 193666517
Change-Id: I770eb76e98df7d2ed19c312142d5f72a5ccc7fd5

Author: Fleker

src/app/app.module.ts

@@ -22,6 +22,7 @@ import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatTabsModule} from '@angular/material/tabs';
 
@@ -49,6 +50,7 @@ import {TabPreferencesComponent} from './tab-preferences/tab-preferences.compone
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatRadioModule,
     MatSlideToggleModule,
     MatTabsModule,
   ],

src/app/chrome-bridge.service.ts

@@ -71,6 +71,10 @@ export class ChromeBridgeService {
         }
       `);
     }
+    // Sync API behavior with webpage.
+    await this.updateUnsupportedApiBehavior(
+      await this.preferences.getUnsupportedApiBehavior()
+    );
   }
 
   /**
@@ -350,4 +354,13 @@ export class ChromeBridgeService {
       }
     }, 500);
   }
+
+  /**
+   * Method that is called by `tab-preferences` when the `unsupportedApiBehavior`
+   * value is changed, in order to broadcast this change with the webpage.
+   * @param newValue The updated warning level
+   */
+  async updateUnsupportedApiBehavior(newValue = 'off') {
+    await this.broadcastMessage('Ext-UnsupportedApiBehavior', newValue);
+  }
 }

src/app/preferences.service.ts

@@ -29,6 +29,12 @@ interface ExtensionPreferences {
    * Flag that, when enabled, sends logs in webpage context.
    */
   flagDebugClient: boolean;
+  /**
+   * How to handle when the webpage calls an API method that will not work in
+   * Interactive Canvas.
+   * @see https://developers.google.com/assistant/interactivecanvas/web-apps#guidelines_and_restrictions
+   */
+  unsupportedApiBehavior: 'off' | 'warn' | 'error';
 }
 
 type ExtensionPreference = keyof ExtensionPreferences;
@@ -61,6 +67,14 @@ export class PreferencesService {
     return this.writePreference<boolean>('flagDebugClient', value);
   }
 
+  async getUnsupportedApiBehavior() {
+    return this.readPreference<string>('unsupportedApiBehavior');
+  }
+
+  async setUnsupportedApiBehavior(value: string) {
+    this.writePreference<string>('unsupportedApiBehavior', value);
+  }
+
   private async readPreference<T>(key: ExtensionPreference): Promise<T> {
     return new Promise(res => {
       chrome.storage.sync.get(key, (result: Record<string, T>) => {

src/app/tab-preferences/tab-preferences.component.html

@@ -32,10 +32,24 @@ <h1>Preferences</h1>
   These features are not available during remote debugging.
 </span>
 
-<h2>Extension Flags</h2>
+<!-- Global controls -->
+<h2>Extension Preferences</h2>
 <mat-slide-toggle [checked]="preferencesDebugClient" (change)="onChangeDebugClient($event)">
   Enable client-side logging
 </mat-slide-toggle>
+
 <mat-slide-toggle [checked]="preferencesDebugExtension" (change)="onChangeDebugExtension($event)">
   Enable extension debug logging
 </mat-slide-toggle>
+
+<span>Behavior for
+    <a href="https://developers.google.com/assistant/interactivecanvas/web-apps#guidelines_and_restrictions">
+      unavailable Interactive Canvas methods
+    </a>:
+</span>
+<br>
+<mat-radio-group aria-label="Unsupported API warning level" [value]="preferencesUnsupportedApi" (change)="onChangeUnsupportedApi($event)">
+  <mat-radio-button value="off">Ignore</mat-radio-button>
+  <mat-radio-button value="warn">Log Warning</mat-radio-button>
+  <mat-radio-button value="error">Throw Error</mat-radio-button>
+</mat-radio-group>

src/app/tab-preferences/tab-preferences.component.ts

@@ -16,6 +16,7 @@
 
 import {Component, OnInit} from '@angular/core';
 import {MatSlideToggleChange} from '@angular/material/slide-toggle';
+import {MatRadioChange} from '@angular/material/radio';
 import {ChromeBridgeService} from '../chrome-bridge.service';
 import {PreferencesService} from '../preferences.service';
 
@@ -33,6 +34,8 @@ export class TabPreferencesComponent implements OnInit {
   preferences: PreferencesService;
   preferencesDebugClient = false;
   preferencesDebugExtension = false;
+  preferencesUnsupportedApi = 'off';
+
   isRemoteTarget = false;
   chromeBridge: ChromeBridgeService;
 
@@ -49,6 +52,8 @@ export class TabPreferencesComponent implements OnInit {
     this.preferencesDebugClient = await this.preferences.getFlagDebugClient();
     this.preferencesDebugExtension =
       await this.preferences.getFlagDebugExtension();
+    this.preferencesUnsupportedApi =
+      (await this.preferences.getUnsupportedApiBehavior()) || 'off';
   }
 
   /**
@@ -84,4 +89,16 @@ export class TabPreferencesComponent implements OnInit {
     this.preferencesDebugExtension = checked;
     await this.preferences.setFlagDebugExtension(checked);
   }
+
+  /**
+   * Click handler when the Unsupported API level radio button is changed.
+   * @param event Toggle event
+   */
+  async onChangeUnsupportedApi(event: MatRadioChange) {
+    const {value} = event;
+    this.preferencesUnsupportedApi = value;
+    await this.preferences.setUnsupportedApiBehavior(value);
+    // Sync this changed value with webpage
+    await this.chromeBridge.updateUnsupportedApiBehavior(value);
+  }
 }

src/styles.css

@@ -68,4 +68,8 @@ h1 {
     --toggle-thumb-color: rgb(96, 125, 139); /* #607D8B */
     --label-unselected-text-color: rgba(255, 255, 255, 0.7);
   }
+
+  a:visited {
+    color: cyan;
+  }
 }

src/webpage-script.ts

@@ -410,6 +410,86 @@ async function getImgData(blob: Blob): Promise<string> {
   });
 }
 
+/**
+ * A setting for how to behave when an unsupported API is used. Updated via
+ * `Ext-UnsupportedApiBehavior` message. It is a preference (see `preferences.service`)
+ * and updated in the Preferences tab.
+ */
+let unsupportedApiBehavior = 'off';
+
+/**
+ * Returns the names of every property of an object that is a function.
+ * @param object An object with methods and optionally fields
+ */
+function getMethodsOfObject(object: Record<string, Function>) {
+  const properties = Object.getOwnPropertyNames(object);
+  return properties.filter(p => typeof object[p] === 'function');
+}
+
+/**
+ * Adds an Interactive Canvas warning to the specific method.
+ * @param fn Function that should have additional warning
+ * @param binder The object to which this function belongs
+ */
+// eslint-disable-next-line
+function addMethodWarning(fn: (...args: any[]) => unknown, binder: Record<string, Function>) {
+  const boundFunction = fn.bind(binder);
+  const methodName = fn.name;
+  const msg =
+    `The method "${methodName}" will not execute in an Interactive ` +
+    'Canvas environment. See ' +
+    'https://developers.google.com/assistant/interactivecanvas/web-apps#guidelines_and_restrictions ' +
+    'to learn more.';
+  binder[methodName] = (...args: unknown[]) => {
+    if (unsupportedApiBehavior === 'warn') {
+      console.warn(msg);
+    } else if (unsupportedApiBehavior === 'error') {
+      throw new Error(msg);
+    }
+    boundFunction(...args);
+  };
+}
+
+/**
+ * Adds an Interactive Canvas warning to the specific property.
+ * @param readOnlyField String-based name of the property
+ * @param owner The object to which the field belongs
+ */
+// eslint-disable-next-line
+function addPropertyWarning(readOnlyField: string, owner: any) {
+  const msg =
+    `The field "${readOnlyField}" will not execute in an Interactive ` +
+    'Canvas environment. See ' +
+    'https://developers.google.com/assistant/interactivecanvas/web-apps#guidelines_and_restrictions ' +
+    'to learn more.';
+  const boundProperty = owner[readOnlyField];
+  Object.defineProperty(owner, readOnlyField, {
+    get: () => {
+      if (unsupportedApiBehavior === 'warn') {
+        console.warn(msg);
+      } else if (unsupportedApiBehavior === 'error') {
+        throw new Error(msg);
+      }
+      return boundProperty;
+    },
+  });
+}
+
+/**
+ * Add handler to every API method that will not work in Interactive Canvas.
+ * This will result in either a warning or throw an error depending on
+ * preference.
+ * @see https://developers.google.com/assistant/interactivecanvas/web-apps#guidelines_and_restrictions
+ */
+function addUnsupportedApiWarnings() {
+  addPropertyWarning('localStorage', window);
+  addPropertyWarning('geolocation', window.navigator);
+  addPropertyWarning('mediaDevices', window.navigator);
+  addPropertyWarning('cookie', document);
+  addPropertyWarning('indexedDB', window);
+  addPropertyWarning('webkitSpeechRecognition', window);
+}
+
 window.requestAnimationFrame(() => {
   const hasInteractiveCanvas = window.interactiveCanvas !== undefined;
 
@@ -447,6 +527,7 @@ window.requestAnimationFrame(() => {
   };
 
   window.interactiveCanvasProcessSdk = processSdk;
+  addUnsupportedApiWarnings();
 });
 
 document.addEventListener('message', (e: Event) => {
@@ -472,5 +553,9 @@ document.addEventListener('message', (e: Event) => {
       window.interactiveCanvasProcessSdk();
       break;
     }
+    case 'Ext-UnsupportedApiBehavior': {
+      const {data} = eventData;
+      unsupportedApiBehavior = data;
+    }
   }
 });