Merge pull request #3 from ImperialOctopus/pwa

Set up progressive web app
ImperialOctopus · Feb 19, 2019 · 49855ab · 49855ab
2 parents ba45999 + 11d9adf
commit 49855ab
Show file tree

Hide file tree

Showing 19 changed files with 231 additions and 26 deletions.
diff --git a/Word List.md b/Word List.md
diff --git a/angular.json b/angular.json
@@ -24,7 +24,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.json"
             ],
             "styles": [
               "src/styles.scss"
@@ -55,7 +56,9 @@
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "src/ngsw-config.json"
             }
           }
         },
@@ -89,7 +92,8 @@
             "scripts": [],
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.json"
             ]
           }
         },

diff --git a/icon/icon-pink.svg → icon.svg b/icon/icon-pink.svg → icon.svg
diff --git a/icon/icon-pink.png b/icon/icon-pink.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
     "@angular/forms": "~7.2.0",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/pwa": "^0.12.4",
     "@angular/router": "~7.2.0",
+    "@angular/service-worker": "~7.2.0",
     "braces": "^2.3.2",
     "core-js": "^2.6.5",
     "rxjs": "~6.3.3",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -5,6 +5,8 @@ import { RouterModule, Routes } from "@angular/router";
 import { AppComponent } from "./app.component";
 import { MenuComponent } from "./menu/menu.component";
 import { PlayComponent } from "./play/play.component";
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 const appRoutes: Routes = [
   { path: "", component: MenuComponent },
@@ -14,7 +16,7 @@ const appRoutes: Routes = [
 
 @NgModule({
   declarations: [AppComponent, MenuComponent, PlayComponent],
-  imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
+  imports: [BrowserModule, RouterModule.forRoot(appRoutes), ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],
   providers: [],
   bootstrap: [AppComponent]
 })

diff --git a/src/assets/icon.png b/src/assets/icon.png
diff --git a/src/assets/icons/icon-128x128.png b/src/assets/icons/icon-128x128.png
diff --git a/src/assets/icons/icon-144x144.png b/src/assets/icons/icon-144x144.png
diff --git a/src/assets/icons/icon-152x152.png b/src/assets/icons/icon-152x152.png
diff --git a/src/assets/icons/icon-192x192.png b/src/assets/icons/icon-192x192.png
diff --git a/src/assets/icons/icon-384x384.png b/src/assets/icons/icon-384x384.png
diff --git a/src/assets/icons/icon-512x512.png b/src/assets/icons/icon-512x512.png
diff --git a/src/assets/icons/icon-72x72.png b/src/assets/icons/icon-72x72.png
diff --git a/src/assets/icons/icon-96x96.png b/src/assets/icons/icon-96x96.png
diff --git a/src/index.html b/src/index.html
@@ -6,13 +6,10 @@
     <base href="/" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, user-scalable=no"
-    />
-    <meta name="theme-color" content="#7F3F98" />
-    <meta name="msapplication-navbutton-color" content="#7F3F98" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="#7F3F98" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#ab47bc" />
+    <meta name="msapplication-navbutton-color" content="#ab47bc" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="#ab47bc" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:site" content="@imperialoctopus" />
@@ -32,15 +29,24 @@
       property="og:url"
       content="https://fake-artist.imperialoctopus.com/"
     />
-    <meta property="og:image" content="assets/icon.png" />
+    <meta property="og:image" content="assets/icons/icon-192x192.png" />
     <meta property="fb:admins" content="1525407123" />
     <meta property="profile:first_name" content="Zoey" />
     <meta property="profile:last_name" content="Child" />
     <meta property="profile:gender" content="female" />
     <meta property="profile:username" content="imperialoctopus" />
-    <link rel="icon" type="image/png" sizes="400x400" href="assets/icon.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="72x72"
+      href="assets/icons/icon-72x72.png"
+    />
+    <link rel="manifest" href="manifest.json" />
   </head>
   <body>
     <app-root></app-root>
+    <noscript>
+      Please enable JavaScript to run this application.
+    </noscript>
   </body>
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,51 @@
+{
+  "name": "Fake Artist Companion",
+  "short_name": "Fake Artist",
+  "theme_color": "#ab47bc",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/ngsw-config.json b/src/ngsw-config.json
@@ -0,0 +1,27 @@
+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}