Replace PWA popup with a button in top right (#13)

Author: Stu Freen

dist/assets/images/maschine-50.png

@@ -1 +1 @@
-{"hash":"05ba4b805f8a810423af5204b5b0d985","version":"0.0.9","optionHash":"fc914babc0fd18c2c71ac07285564383","result":{"outputFilePrefix":"icons-05ba4b805f8a810423af5204b5b0d985/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#202429\">","<meta name=\"application-name\" content=\"web-drum-sequencer\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"web-drum-sequencer\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1536x2008.png\">"],"files":["icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-36x36.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-48x48.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-72x72.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-96x96.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-144x144.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-192x192.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-256x256.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-384x384.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-512x512.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-57x57.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-60x60.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-72x72.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-76x76.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-114x114.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-120x120.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-144x144.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-152x152.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-167x167.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-180x180.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-precomposed.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon-16x16.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon-32x32.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon.ico","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-320x460.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x1096.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-768x1004.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-748x1024.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-750x1294.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1242x2148.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1182x2208.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1536x2008.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1496x2048.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_60x60.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_128x128.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_512x512.png","icons-05ba4b805f8a810423af5204b5b0d985/manifest.json","icons-05ba4b805f8a810423af5204b5b0d985/manifest.webapp"]}}
+{"hash":"05ba4b805f8a810423af5204b5b0d985","version":"0.0.9","optionHash":"fc914babc0fd18c2c71ac07285564383","result":{"outputFilePrefix":"icons-05ba4b805f8a810423af5204b5b0d985/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#202429\">","<meta name=\"application-name\" content=\"web-drum-sequencer\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"web-drum-sequencer\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1536x2008.png\">"],"files":["icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-36x36.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-48x48.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-72x72.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-96x96.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-144x144.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-192x192.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-256x256.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-384x384.png","icons-05ba4b805f8a810423af5204b5b0d985/android-chrome-512x512.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-57x57.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-60x60.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-72x72.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-76x76.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-114x114.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-120x120.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-144x144.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-152x152.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-167x167.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-180x180.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-precomposed.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon-16x16.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon-32x32.png","icons-05ba4b805f8a810423af5204b5b0d985/favicon.ico","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-320x460.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x1096.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-768x1004.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-748x1024.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-750x1294.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1242x2148.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1182x2208.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1536x2008.png","icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1496x2048.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_60x60.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_512x512.png","icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_128x128.png","icons-05ba4b805f8a810423af5204b5b0d985/manifest.json","icons-05ba4b805f8a810423af5204b5b0d985/manifest.webapp"]}}

dist/assets/js/bundle-632d6e707059e38b35a4.js

@@ -20,5 +20,5 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-  <script type="text/javascript" src="assets/js/bundle-632d6e707059e38b35a4.js"></script></body>
+  <script type="text/javascript" src="assets/js/bundle-e06ca8c7d0e05f266c46.js"></script></body>
 </html>

dist/assets/js/bundle-e06ca8c7d0e05f266c46.js

@@ -18,14 +18,14 @@ var serviceWorkerOption = {
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-144x144.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-152x152.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-167x167.png",
-    "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-180x180.png",
+    "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-icon-precomposed.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/favicon-16x16.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/favicon-32x32.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/favicon.ico",
-    "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-320x460.png",
+    "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x920.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-640x1096.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-768x1004.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-748x1024.png",
@@ -35,11 +35,11 @@ var serviceWorkerOption = {
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1536x2008.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/apple-touch-startup-image-1496x2048.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_60x60.png",
-    "./icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_128x128.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_512x512.png",
+    "./icons-05ba4b805f8a810423af5204b5b0d985/firefox_app_128x128.png",
     "./icons-05ba4b805f8a810423af5204b5b0d985/manifest.json",
     "./icons-05ba4b805f8a810423af5204b5b0d985/manifest.webapp",
-    "./iconstats-a005444ed50d16fb6ace.json",
+    "./iconstats-98e98c3329b6590ab776.json",
     "./assets/fonts/cfb42259b1ea50285ff056446f6320f2.woff2",
     "./assets/fonts/de815886b2d1af8d18c0241ab8fd2bcc.woff",
     "./assets/fonts/193e7796a51d7072416ab3d98fe558c4.woff2",
@@ -95,7 +95,7 @@ var serviceWorkerOption = {
     "./assets/audio/ruby-room.mp3",
     "./assets/images/maschine-50.png",
     "./assets/images/github.svg",
-    "./assets/js/bundle-632d6e707059e38b35a4.js"
+    "./assets/js/bundle-e06ca8c7d0e05f266c46.js"
   ]
 };
 

dist/icons-05ba4b805f8a810423af5204b5b0d985/.cache

@@ -18,3 +18,8 @@ export const showFlashMessage = messageKey => ({
 export const clearFlashMessage = () => ({
   type: WINDOW_CONSTANTS.CLEAR_FLASH_MESSAGE,
 });
+
+export const setCanInstall = canInstall => ({
+  type: WINDOW_CONSTANTS.SET_CAN_INSTALL,
+  payload: canInstall,
+});

dist/index.html

@@ -3,6 +3,7 @@ export const WINDOW_CONSTANTS = {
   SET_PRESET_NAME_FIELD: 'SET_PRESET_NAME_FIELD',
   SET_FLASH_MESSAGE: 'SET_FLASH_MESSAGE',
   CLEAR_FLASH_MESSAGE: 'CLEAR_FLASH_MESSAGE',
+  SET_CAN_INSTALL: 'SET_CAN_INSTALL',
 };
 
 export const FLASH_MESSAGES = {

dist/sw.js

@@ -4,6 +4,7 @@ export const windowInitialState = {
   presetPromptOpen: false,
   flashMessageKey: null,
   flashMessageVisible: false,
+  canInstall: false,
 };
 
 export const windowReducer = (state = windowInitialState, action) => {
@@ -24,6 +25,11 @@ export const windowReducer = (state = windowInitialState, action) => {
         ...state,
         flashMessageVisible: false,
       };
+    case WINDOW_CONSTANTS.SET_CAN_INSTALL:
+      return {
+        ...state,
+        canInstall: action.payload,
+      };
     default:
       return state;
   }

src/common/window/window.actions.js

@@ -3,6 +3,7 @@ import {
   setPresetPrompt,
   showFlashMessage,
   clearFlashMessage,
+  setCanInstall,
 } from './window.actions';
 
 describe('setPresetPrompt', () => {
@@ -28,3 +29,10 @@ describe('clearFlashMessage', () => {
     expect(nullState.flashMessageVisible).toEqual(false);
   });
 });
+
+describe('setCanInstall', () => {
+  test('should set canInstall to a value', () => {
+    const state = windowReducer(windowInitialState, setCanInstall(true));
+    expect(state.canInstall).toBe(true);
+  });
+});