✨ [Bento] Implement bento-app-banner

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

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

css/Z_INDEX.md

@@ -63,8 +63,14 @@
 | `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)                                                                   |
+| `i-amphtml-app-banner-top-padding`                                                               | 15         | [extensions/amp-app-banner/1.0/amp-app-banner.css](/extensions/amp-app-banner/1.0/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)                                                                   |
+| `.amp-app-banner-dismiss-button`                                                                 | 14         | [extensions/amp-app-banner/1.0/amp-app-banner.css](/extensions/amp-app-banner/1.0/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-ad[sticky]`                                                                                 | 11         | [extensions/amp-ad/0.1/amp-ad.css](/extensions/amp-ad/0.1/amp-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

@@ -296,12 +296,14 @@ 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 = metaContent
+      .replace(/\s/, '')
+      .split(',')
+      .reduce((result, part) => {
+        const [key, value] = part.split('=');
+        result[key] = value;
+        return result;
+      }, {});
 
     const appId = config['app-id'];
     const openUrl = config['app-argument'];
@@ -472,18 +474,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,64 @@
+
+
+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;
+}
+
+i-amphtml-app-banner-top-padding {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  height: 4px;
+  /** Must be above the dismiss button to cover bottom shadow */
+  z-index: 15;
+}
+
+.amp-app-banner-dismiss-button {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  top: -28px;
+  right: 0;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="13" height="13" viewBox="341 8 13 13" xmlns="http://www.w3.org/2000/svg"><path fill="#4F4F4F" d="M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z" fill-rule="evenodd"/></svg>');
+  background-size: 13px 13px;
+  background-position: 9px center;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  z-index: 14;
+  box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.2);
+  border: none;
+  border-radius: 12px 0 0 0;
+}
+
+/* Increase tapping area of the dismiss button */
+.amp-app-banner-dismiss-button:before {
+  position: absolute;
+  content: '';
+  top: -20px;
+  right: 0;
+  left: -20px;
+  bottom: 0;
+}
+
+[dir=rtl] .amp-app-banner-dismiss-button {
+  right: auto;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 12px;
+  background-position: 6px center;
+}
+
+[dir=rtl] .amp-app-banner-dismiss-button:before {
+  right: -20px;
+  left: 0;
+}

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

@@ -0,0 +1,26 @@
+import {isExperimentOn} from '#experiments';
+
+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 BaseElement {
+  /** @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,104 @@
+import {docInfoService} from '#preact/services/document';
+import {platformService} from '#preact/services/platform';
+import {timerService} from '#preact/services/timer';
+import {urlService} from '#preact/services/url';
+import {viewerService} from '#preact/services/viewer';
+import {xhrService} from '#preact/services/xhr';
+
+import {user} from '#utils/log';
+
+import {openWindowDialog} from '../../../../src/open-window-dialog';
+
+const OPEN_LINK_TIMEOUT = 1500;
+
+/**
+ * @return {{openOrInstall: function(): void, promise: Promise<Response>}|null}
+ */
+export function getAndroidAppInfo() {
+  const win = self.window;
+  // We want to fallback to browser builtin mechanism when possible.
+  const isChromeAndroid =
+    platformService.isAndroid() && platformService.isChrome();
+  const isProxyOrigin = urlService.isProxyOrigin(win.location);
+  const canShowBuiltinBanner =
+    !isProxyOrigin && !viewerService.isEmbedded() && isChromeAndroid;
+
+  if (canShowBuiltinBanner) {
+    user().info(
+      'BENTO-APP-BANNER',
+      'Browser supports builtin banners. Not rendering amp-app-banner.'
+    );
+    return null;
+  }
+
+  const manifestLink = win.document.head.querySelector(
+    'link[rel=manifest],link[rel=origin-manifest]'
+  );
+
+  const missingDataSources = !manifestLink;
+  if (missingDataSources) {
+    return null;
+  }
+
+  const manifestHref = manifestLink.getAttribute('href');
+
+  urlService.assertHttpsUrl(manifestHref, undefined, 'manifest href');
+
+  const promise = xhrService.fetchJson(manifestHref).then(parseManifest);
+  return {
+    promise,
+    openOrInstall: () => {
+      return promise.then((manifest) => {
+        if (!manifest) {
+          return;
+        }
+        const {installAppUrl, openInAppUrl} = manifest;
+        timerService.delay(() => {
+          window.top.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) {
+    user().warn(
+      'BENTO-APP-BANNER',
+      'related_applications is missing from manifest.json file: %s'
+    );
+    return null;
+  }
+
+  const playApp = apps.find((a) => a['platform'] === 'play');
+  if (!playApp) {
+    user().warn(
+      'BENTO-APP-BANNER',
+      'Could not find a platform=play app in manifest: %s'
+    );
+    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 {canonicalUrl} = docInfoService;
+  const parsedUrl = urlService.parse(canonicalUrl);
+  const cleanProtocol = parsedUrl.protocol.replace(':', '');
+  const {host, pathname} = parsedUrl;
+
+  return `android-app://${appId}/${cleanProtocol}/${host}${pathname}`;
+}