pwa

package.json

@@ -20,6 +20,7 @@
     "lint": "trigen-scripts lint",
     "jest": "trigen-scripts jest",
     "test": "trigen-scripts test",
+    "build:favicons": "trigen-scripts build:favicons --androidBackground white -m src/manifest.json",
     "build:docs": "trigen-scripts build:docs",
     "start:storybook": "trigen-scripts start:storybook -c .storybook",
     "build:storybook": "trigen-scripts build:storybook -c .storybook",
@@ -29,7 +30,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@flexis/redux": "^1.0.0-alpha",
+    "@flexis/redux": "^1.0.1-alpha",
     "@flexis/ui": "^0.20.0-alpha",
     "@loadable/component": "^5.10.2",
     "@stylable/runtime": "^1.0.3",
@@ -53,7 +54,7 @@
   "devDependencies": {
     "@trigen/scripts": "^2.7.0",
     "@trigen/scripts-plugin-eslint": "^2.7.0",
-    "@trigen/scripts-preset-react-app": "^2.12.0",
+    "@trigen/scripts-preset-react-app": "/Users/dangreen/github/trigen-scripts/packages/scripts-preset-react-app/package",
     "@types/faker": "^4.1.4",
     "faker": "^4.1.0",
     "moxios": "^0.4.0"

src/App/globals.d.ts

@@ -20,7 +20,12 @@ declare module '*?tsw' {
     };
 }
 
+interface IPrecacheEntry {
+	url: string;
+	revision?: string;
+}
+
 // tslint:disable-next-line
 interface ServiceWorkerGlobalScope {
-	__precacheManifest: (Record<string, string> | string)[];
+	__precacheManifest: IPrecacheEntry[];
 }

src/App/serviceWorker.ts

@@ -1,23 +1,32 @@
 import {
-	precacheAndRoute
+	precacheAndRoute,
+	getCacheKeyForURL
 } from 'workbox-precaching';
 import {
+	registerNavigationRoute,
 	registerRoute
 } from 'workbox-routing';
 import {
-	NetworkFirst
+	NetworkFirst,
+	StaleWhileRevalidate
 } from 'workbox-strategies';
-import {
-	RoutesList
-} from './routes';
 
 declare var self: ServiceWorkerGlobalScope;
 
-self.__precacheManifest.push(
-	...RoutesList
+precacheAndRoute(
+	self.__precacheManifest.filter(
+		({ url }) => !/\/favicons\/.*\.png$/.test(url)
+	)
+);
+
+registerNavigationRoute(
+	getCacheKeyForURL('/index.html')
 );
 
-precacheAndRoute(self.__precacheManifest);
+registerRoute(
+	/\/favicons\//,
+	new StaleWhileRevalidate()
+);
 
 registerRoute(
 	/^https:\/\/api\.openweathermap\.org/,

src/favicons/favicons.html

@@ -0,0 +1,33 @@
+<link rel="shortcut icon" href="favicons/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+<link rel="manifest" href="manifest.json">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="application-name" content="Weather">
+<meta name="theme-color" content="white">
+<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="Weather">
+<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="favicons/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-640x1136.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-750x1334.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="favicons/apple-touch-startup-image-1242x2208.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="favicons/apple-touch-startup-image-2208x1242.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="favicons/apple-touch-startup-image-1125x2436.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="favicons/apple-touch-startup-image-2436x1125.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-828x1792.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-1792x828.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="favicons/apple-touch-startup-image-1242x2688.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="favicons/apple-touch-startup-image-2688x1242.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="favicons/apple-touch-startup-image-1536x2048.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="favicons/apple-touch-startup-image-2048x1536.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-1668x2224.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-2224x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-1668x2388.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1194px) and (device-height: 1112px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-2388x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-2048x2732.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="favicons/apple-touch-startup-image-2732x2048.png">

src/index.html

@@ -7,6 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui">
 		<meta name="format-detection" content="telephone=no">
 		<title>Ttitle</title>
+		<%= require('raw-loader!./favicons/favicons.html').default %>
 	</head>
 	<body>
 		<div id="view"></div>

src/manifest.json

@@ -8,6 +8,53 @@
   "orientation": "portrait",
   "scope": "/",
   "start_url": "/?homescreen=1",
-  "background_color": "black",
-  "theme_color": "black"
+  "background_color": "white",
+  "theme_color": "white",
+  "icons": [
+    {
+      "src": "favicons/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
 }

tsconfig.json

@@ -16,7 +16,6 @@
 		},
 		"lib": [
 			"dom",
-			"webworker",
 			"esnext"
 		]
 	}