✨ [Bento] Implement bento-app-banner

build-system/compile/bundles.config.extensions.json

@@ -174,6 +174,14 @@
       "hasCss": true
     }
   },
+  {
+    "name": "amp-app-banner",
+    "version": "1.0",
+    "options": {
+      "hasCss": true,
+      "bento": true
+    }
+  },
   {
     "name": "amp-audio",
     "version": "0.1",

build-system/test-configs/forbidden-terms.js

@@ -462,6 +462,7 @@ const forbiddenTermsGlobal = {
       'extensions/amp-web-push/0.1/amp-web-push-helper-frame.js',
       'extensions/amp-web-push/0.1/amp-web-push-permission-dialog.js',
       'src/experiments/index.js',
+      'src/preact/hooks/useLocalStorage.js',
       'src/service/cid-impl.js',
       'src/service/standard-actions-impl.js',
       'src/service/storage-impl.js',

css/Z_INDEX.md

@@ -61,8 +61,12 @@
 | `amp-mega-menu`                                                                                  | 1000       | [extensions/amp-mega-menu/0.1/amp-mega-menu.css](/extensions/amp-mega-menu/0.1/amp-mega-menu.css)                                                                       |
 | `amp-user-notification`                                                                          | 1000       | [extensions/amp-user-notification/0.1/amp-user-notification.css](/extensions/amp-user-notification/0.1/amp-user-notification.css)                                       |
 | `i-amphtml-app-banner-top-padding`                                                               | 15         | [extensions/amp-app-banner/0.1/amp-app-banner.css](/extensions/amp-app-banner/0.1/amp-app-banner.css)                                                                   |
+| `bannerPadding`                                                                                  | 15         | [extensions/amp-app-banner/1.0/component/component.jss.js](/extensions/amp-app-banner/1.0/component/component.jss.js)                                                   |
 | `.amp-app-banner-dismiss-button`                                                                 | 14         | [extensions/amp-app-banner/0.1/amp-app-banner.css](/extensions/amp-app-banner/0.1/amp-app-banner.css)                                                                   |
+| `dismiss`                                                                                        | 14         | [extensions/amp-app-banner/1.0/component/component.jss.js](/extensions/amp-app-banner/1.0/component/component.jss.js)                                                   |
 | `amp-app-banner`                                                                                 | 13         | [extensions/amp-app-banner/0.1/amp-app-banner.css](/extensions/amp-app-banner/0.1/amp-app-banner.css)                                                                   |
+| `amp-app-banner`                                                                                 | 13         | [extensions/amp-app-banner/1.0/amp-app-banner.css](/extensions/amp-app-banner/1.0/amp-app-banner.css)                                                                   |
+| `banner`                                                                                         | 13         | [extensions/amp-app-banner/1.0/component/component.jss.js](/extensions/amp-app-banner/1.0/component/component.jss.js)                                                   |
 | `amp-sticky-ad-top-padding`                                                                      | 12         | [extensions/amp-sticky-ad/1.0/amp-sticky-ad.css](/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css)                                                                       |
 | `style`                                                                                          | 11         | [extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js](/extensions/amp-ad-network-doubleclick-impl/0.1/amp-ad-network-doubleclick-impl.js) |
 | `amp-sticky-ad`                                                                                  | 11         | [extensions/amp-sticky-ad/1.0/amp-sticky-ad.css](/extensions/amp-sticky-ad/1.0/amp-sticky-ad.css)                                                                       |

examples/visual-tests/article.amp/article.amp.html

@@ -220,7 +220,7 @@
   <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
-  <link rel="manifest" href="medium-manifest.json">
+  <link rel="manifest" href="../../medium-manifest.json">
 </head>
 <body>
   <amp-sidebar id="sidebar" layout="nodisplay">

extensions/amp-app-banner/0.1/amp-app-banner.js

@@ -295,12 +295,7 @@ export class AmpIosAppBanner extends AbstractAppBanner {
    * @private
    */
   parseIosMetaContent_(metaContent) {
-    const parts = metaContent.replace(/\s/, '').split(',');
-    const config = {};
-    parts.forEach((part) => {
-      const keyValuePair = part.split('=');
-      config[keyValuePair[0]] = keyValuePair[1];
-    });
+    const config = this.parseKeyValues(metaContent);
 
     const appId = config['app-id'];
     const openUrl = config['app-argument'];
@@ -328,6 +323,22 @@ export class AmpIosAppBanner extends AbstractAppBanner {
       installAppUrl
     );
   }
+
+  /**
+   * Parses a string like "key1=value1,key2=value2" into { key1: "value1", key2: "value2" }
+   * @param {string} metaContent
+   * @return {*}
+   */
+  parseKeyValues(metaContent) {
+    return metaContent
+      .replace(/\s/, '')
+      .split(',')
+      .reduce((result, keyValue) => {
+        const [key, value] = keyValue.split('=');
+        result[key] = value;
+        return result;
+      }, {});
+  }
 }
 
 /**
@@ -471,18 +482,16 @@ export class AmpAndroidAppBanner extends AbstractAppBanner {
       return;
     }
 
-    for (let i = 0; i < apps.length; i++) {
-      const app = apps[i];
-      if (app['platform'] == 'play') {
-        const installAppUrl = `https://play.google.com/store/apps/details?id=${app['id']}`;
-        const openInAppUrl = this.getAndroidIntentForUrl_(app['id']);
-        this.setupOpenButton_(
-          dev().assertElement(this.openButton_),
-          openInAppUrl,
-          installAppUrl
-        );
-        return;
-      }
+    const playApp = apps.find((a) => a['platform'] === 'play');
+    if (playApp) {
+      const installAppUrl = `https://play.google.com/store/apps/details?id=${playApp['id']}`;
+      const openInAppUrl = this.getAndroidIntentForUrl_(playApp['id']);
+      this.setupOpenButton_(
+        dev().assertElement(this.openButton_),
+        openInAppUrl,
+        installAppUrl
+      );
+      return;
     }
 
     user().warn(

extensions/amp-app-banner/1.0/amp-app-banner.css

@@ -0,0 +1,11 @@
+amp-app-banner {
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0;
+  width: 100%;
+  max-height: 100px !important;
+  box-sizing: border-box;
+  background: #fff;
+  z-index: 13;
+  box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
+}

extensions/amp-app-banner/1.0/amp-app-banner.js

@@ -0,0 +1,28 @@
+import {isExperimentOn} from '#experiments';
+
+import {AmpPreactBaseElement, setSuperClass} from '#preact/amp-base-element';
+
+import {userAssert} from '#utils/log';
+
+import {BaseElement} from './base-element';
+
+import {CSS} from '../../../build/amp-app-banner-1.0.css';
+
+/** @const {string} */
+const TAG = 'amp-app-banner';
+
+class AmpAppBanner extends setSuperClass(BaseElement, AmpPreactBaseElement) {
+  /** @override */
+  isLayoutSupported(layout) {
+    userAssert(
+      isExperimentOn(this.win, 'bento') ||
+        isExperimentOn(this.win, 'bento-app-banner'),
+      'expected global "bento" or specific "bento-app-banner" experiment to be enabled'
+    );
+    return super.isLayoutSupported(layout);
+  }
+}
+
+AMP.extension(TAG, '1.0', (AMP) => {
+  AMP.registerElement(TAG, AmpAppBanner, CSS);
+});

extensions/amp-app-banner/1.0/base-element.js

@@ -0,0 +1,25 @@
+import {PreactBaseElement} from '#preact/base-element';
+
+import {BentoAppBanner} from './component/component';
+import {CSS as COMPONENT_CSS} from './component/component.jss';
+
+export class BaseElement extends PreactBaseElement {}
+
+/** @override */
+BaseElement['Component'] = BentoAppBanner;
+
+/** @override */
+BaseElement['props'] = {
+  'children': {passthrough: true},
+  'dismissButtonAriaLabel': {attr: 'dismiss-button-aria-label'},
+  'id': {attr: 'id'},
+};
+
+/** @override */
+BaseElement['layoutSizeDefined'] = true;
+
+/** @override */
+BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;

extensions/amp-app-banner/1.0/component/android.js

@@ -0,0 +1,101 @@
+import {WindowInterface} from '#core/window/interface';
+
+import {logger} from '#preact/logger';
+import {docInfo} from '#preact/utils/docInfo';
+import {platformUtils} from '#preact/utils/platform';
+import {urlUtils} from '#preact/utils/url';
+import {xhrUtils} from '#preact/utils/xhr';
+
+import {openWindowDialog} from '../../../../src/open-window-dialog';
+
+const OPEN_LINK_TIMEOUT = 1500;
+
+/**
+ * @return {{openOrInstall: function(): void, promise: Promise<Response>}|null}
+ */
+export function getAndroidAppInfo() {
+  // We want to fallback to browser builtin mechanism when possible.
+  const canShowBuiltinBanner =
+    platformUtils.isAndroid() && platformUtils.isChrome();
+
+  if (canShowBuiltinBanner) {
+    logger.info(
+      'BENTO-APP-BANNER',
+      'Not rendering bento-app-banner:',
+      'Browser supports builtin banners.'
+    );
+    return null;
+  }
+
+  const manifestLink = self.document.head.querySelector(
+    'link[rel=manifest],link[rel=origin-manifest]'
+  );
+
+  const missingDataSources = !manifestLink;
+  if (missingDataSources) {
+    return null;
+  }
+
+  const manifestHref = manifestLink.getAttribute('href');
+
+  urlUtils.assertHttpsUrl(manifestHref, undefined, 'manifest href');
+
+  const promise = xhrUtils.fetchJson(manifestHref).then(parseManifest);
+  return {
+    promise,
+    openOrInstall: () => {
+      return promise.then((manifest) => {
+        if (!manifest) {
+          return;
+        }
+        const {installAppUrl, openInAppUrl} = manifest;
+        setTimeout(() => {
+          WindowInterface.getTop(window).location.assign(installAppUrl);
+        }, OPEN_LINK_TIMEOUT);
+        openWindowDialog(window, openInAppUrl, '_top');
+      });
+    },
+  };
+}
+
+/**
+ * @param {object} manifestJson
+ * @return {{installAppUrl: string, openInAppUrl: string}|null}
+ */
+function parseManifest(manifestJson) {
+  const apps = manifestJson['related_applications'];
+  if (!apps) {
+    logger.error(
+      'BENTO-APP-BANNER',
+      'Invalid manifest:',
+      'related_applications is missing from manifest.json file'
+    );
+    return null;
+  }
+
+  const playApp = apps.find((a) => a['platform'] === 'play');
+  if (!playApp) {
+    logger.error(
+      'BENTO-APP-BANNER',
+      'Invalid manifest:',
+      'Could not find a platform=play app in manifest'
+    );
+    return null;
+  }
+
+  const installAppUrl = `https://play.google.com/store/apps/details?id=${playApp['id']}`;
+  const openInAppUrl = getAndroidIntentForUrl(playApp['id']);
+  return {installAppUrl, openInAppUrl};
+}
+
+/**
+ * @param {string} appId
+ * @return {string}
+ */
+function getAndroidIntentForUrl(appId) {
+  const parsedUrl = urlUtils.parse(docInfo.canonicalUrl);
+  const cleanProtocol = parsedUrl.protocol.replace(':', '');
+  const {host, pathname} = parsedUrl;
+
+  return `android-app://${appId}/${cleanProtocol}/${host}${pathname}`;
+}