Add support of a new behaviour for Add to home screen banner. Fix #52…

…8 (#529) Starting from Chrome 68 "Add to home screen" banner is not showed automatically, a user needs to trigger this event manually. <img src="https://user-images.githubusercontent.com/2954281/47683046-0b5e9680-dbd7-11e8-9a82-5e2593d924c8.jpg" width="200">
gdgistanbul · Oct 31, 2018 · aaeb300 · aaeb300
1 parent eaccec2
commit aaeb300
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 14 deletions.
diff --git a/data/resources.json b/data/resources.json
@@ -291,5 +291,8 @@
     "tags": "Tags",
     "complexity": "Complexity",
     "clear": "Clear all"
+  },
+  "addToHomeScreen": {
+    "cta": "Add to Home Screen"
   }
 }
diff --git a/index.html b/index.html
@@ -189,6 +189,11 @@
       ga('send', 'timing', 'index.html', 'render', indexRenderTime);
     }
   };
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    uiActions.setAddToHomeScreen(e);
+  });
 </script>
 
 </body>

diff --git a/scripts/redux/actions.js b/scripts/redux/actions.js
@@ -24,6 +24,12 @@ const uiActions = {
       value,
     });
   },
+  setAddToHomeScreen: (value) => {
+    store.dispatch({
+      type: SET_ADD_TO_HOMESCREEN,
+      value,
+    });
+  },
 };
 
 const routingActions = {

diff --git a/scripts/redux/constants.js b/scripts/redux/constants.js
@@ -3,6 +3,7 @@
 const TOGGLE_DRAWER = 'app/Drawer/TOGGLE_DRAWER';
 const SET_VIEWPORT_SIZE = 'app/Viewport/SET_VIEWPORT_SIZE';
 const SET_HERO_SETTINGS = 'app/Hero/SET_HERO_SETTINGS';
+const SET_ADD_TO_HOMESCREEN = 'app/APP/SET_ADD_TO_HOMESCREEN';
 // router
 const SET_ROUTE = 'app/Routing/SET_ROUTE';
 const SET_SUB_ROUTE = 'app/Routing/SET_SUB_ROUTE';

diff --git a/scripts/redux/reducer.js b/scripts/redux/reducer.js
@@ -17,6 +17,10 @@ const uiReducer = (state = initialState.ui, action) => {
       return Object.assign({}, state, {
         heroSettings: Object.assign({}, state.heroSettings, action.value),
       });
+    case SET_ADD_TO_HOMESCREEN:
+      return Object.assign({}, state, {
+        addToHomescreen: action.value,
+      });
     default:
       return state;
   }

diff --git a/src/elements/header-toolbar.html b/src/elements/header-toolbar.html
@@ -246,6 +246,10 @@
             type: Object,
             statePath: 'ui.viewport',
           },
+          addToHomescreen: {
+            type: Object,
+            statePath: 'ui.addToHomescreen',
+          },
           heroSettings: {
             type: Object,
             statePath: 'ui.heroSettings',
@@ -267,6 +271,7 @@
             type: Object,
             statePath: 'tickets',
           },
+          transparent: Boolean,
         };
       }
 

diff --git a/src/hoverboard-app.html b/src/hoverboard-app.html
@@ -116,8 +116,9 @@
         margin-left: 6px;
       }
 
-      .buy-ticket {
+      .bottom-drawer-link {
         padding: 16px 24px;
+        cursor: pointer;
       }
 
       @media (min-width: 640px) {
@@ -163,19 +164,30 @@ <h3 class="location">{$ location.short $}</h3>
             {% endfor %}
           </iron-selector>
 
-          <a
-            class="buy-ticket"
-            href$="[[tickets.url]]"
-            target="_blank"
-            rel="noopener noreferrer"
-            ga-on="click"
-            ga-event-category="ticket button"
-            ga-event-action="buy_click"
-            layout horizontal center
-          >
-            <span>{$ buyTicket $}</span>
-            <iron-icon icon="hoverboard:open-in-new"></iron-icon>
-          </a>
+          <div>
+            <a
+              class="bottom-drawer-link"
+              on-tap="_onAddToHomescreen"
+              hidden$="[[_isAddToHomeScreenHidden(ui.addToHomescreen, viewport.isLaptopPlus)]]"
+            >
+              {$ addToHomeScreen.cta $}
+            </a>
+
+            <a
+              class="bottom-drawer-link"
+              href$="[[_getTicketUrl(tickets)]]"
+              target="_blank"
+              rel="noopener noreferrer"
+              on-tap="closeDrawer"
+              ga-on="click"
+              ga-event-category="ticket button"
+              ga-event-action="buy_click"
+              layout horizontal center
+            >
+              <span>{$ buyTicket $}</span>
+              <iron-icon icon="hoverboard:open-in-new"></iron-icon>
+            </a>
+          </div>
         </div>
 
       </app-drawer>
@@ -435,6 +447,31 @@ <h3 class="location">{$ location.short $}</h3>
       _toggleDrawer(e) {
         uiActions.toggleDrawer(e.detail.value);
       }
+
+      _getTicketUrl(tickets) {
+        if (!tickets.list.length) return '';
+        const availableTicket = tickets.list.filter((ticket) => ticket.available)[0];
+        return availableTicket ? availableTicket.url : tickets.list[0].url;
+      }
+
+      _isAddToHomeScreenHidden(addToHomescreen, isTabletPlus) {
+        return isTabletPlus || !addToHomescreen;
+      }
+
+      _onAddToHomescreen() {
+        if (!this.ui.addToHomescreen) this.closeDrawer();
+        this.ui.addToHomescreen.prompt();
+        this.ui.addToHomescreen.userChoice
+          .then((choiceResult) => {
+            if (choiceResult.outcome === 'accepted') {
+              ga('send', 'event', 'add_to_home_screen_prompt', 'accepted');
+            } else {
+              ga('send', 'event', 'add_to_home_screen_prompt', 'dismissed');
+            }
+            uiActions.setAddToHomeScreen(null);
+            this.closeDrawer();
+          });
+      }
     }
 
     window.customElements.define(HoverboardApp.is, HoverboardApp);

diff --git a/src/mixins/redux-mixin.html b/src/mixins/redux-mixin.html
@@ -23,6 +23,7 @@
         title: '',
       },
       heroSettings: {},
+      addToHomescreen: null,
     },
     routing: {
       route: 'home',