feat(packaging): add basic PWA support (#30)

angular.json

@@ -21,7 +21,12 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
+              {
+                "glob": "**/*",
+                "input": "node_modules/ngx-monaco-editor/assets/monaco",
+                "output": "./assets/monaco/"
+              },
+              "src/manifest.json"
             ],
             "styles": [
               {
@@ -49,7 +54,8 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": false
+              "buildOptimizer": false,
+              "serviceWorker": true
             },
             "hmr": {
               "fileReplacements": [
@@ -96,14 +102,23 @@
               "src/styles.css"
             ],
             "scripts": [],
-            "assets": ["src/favicon.ico", "src/assets"]
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.json"
+            ]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
@@ -123,11 +138,13 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         }
       }
     }
   },
   "defaultProject": "angular-sketch"
-}
+}

ngsw-config.json

@@ -0,0 +1,31 @@
+{
+  "index": "/index.html",
+  "assetGroups": [{
+    "name": "app",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/favicon.ico",
+        "/index.html",
+        "/*.css",
+        "/*.js"
+      ],
+      "urls": [
+        "https://fonts.googleapis.com/**",
+        "https://www.googletagmanager.com/**",
+        "https://www.google-analytics.com/**"
+      ]
+    }
+  }, {
+    "name": "assets",
+    "installMode": "lazy",
+    "updateMode": "prefetch",
+    "resources": {
+      "files": [
+        "/assets/*",
+        "/assets/icons/**",
+        "/assets/contributions/**"
+      ]
+    }
+  }]
+}

package.json

@@ -23,7 +23,9 @@
     "@angular/material": "^6.1.1",
     "@angular/platform-browser": "^6.1.1",
     "@angular/platform-browser-dynamic": "^6.1.1",
+    "@angular/pwa": "^0.7.5",
     "@angular/router": "^6.1.1",
+    "@angular/service-worker": "^6.1.1",
     "@ngxs/store": "^3.0.1",
     "angular-resizable-element": "^3.0.0",
     "big-integer": "^1.6.30",

src/app/app.module.ts

@@ -4,6 +4,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Route, RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 export const routes: Route[] = [{
   path: '', redirectTo: '/home', pathMatch: 'full'
@@ -20,7 +22,8 @@ export const routes: Route[] = [{
   imports: [
     BrowserModule,
     NoopAnimationsModule,
-    RouterModule.forRoot(routes, {useHash: true})
+    RouterModule.forRoot(routes, {useHash: true}),
+    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
   ],
   bootstrap: [AppComponent]
 })

src/app/core/state/index.ts

@@ -1,2 +1,2 @@
 // export * from './page.state';
-export * from './ui.state';
+export * from './ui.state';

src/index.html

@@ -17,12 +17,14 @@
   <link rel="dns-prefetch" href="//fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  
+
   <meta name="twitter:card" content="summary">
   <meta name="twitter:site" content="@manekinekko">
   <meta name="twitter:title" content="xLayers (by Wassim Chegham)">
   <meta name="twitter:description" content="Preview and Convert SketchApp files into Angular Components.">
 
+  <link rel="manifest" href="manifest.json">
+  <meta name="theme-color" content="#212121">
 </head>
 
 <body class="bg-pattern">
@@ -37,6 +39,7 @@
     gtag('config', 'UA-120660908-1');
   </script>
 
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 
-</html>
+</html>

src/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "xLayer",
+  "short_name": "xLayer",
+  "description":"xLayer - convert Sketch files into Angular components",
+  "theme_color": "#212121",
+  "background_color": "#ff6c5f",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/#/editor",
+  "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"
+    }
+  ]
+}