Add service worker for application caching

angular.json

@@ -24,7 +24,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles/greenvironment-material-theme.scss",
@@ -55,7 +56,9 @@
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -90,7 +93,8 @@
             "scripts": [],
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ]
           }
         },

ngsw-config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package-lock.json

@@ -607,6 +607,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/service-worker": {
+      "version": "8.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-8.2.14.tgz",
+      "integrity": "sha512-Xv1ES5bXDRxPJ5uyRqeKw6mGKaJVzKK0oFcR0mr4OSdyLXGZ+x6fC2S/QcLy4ugpb64fyEksrnHhHjeMVzGh2Q==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "8.2.14",
     "@angular/platform-browser-dynamic": "^8.2.14",
     "@angular/router": "~8.2.14",
+    "@angular/service-worker": "^8.2.14",
     "apollo-angular": "^1.8.0",
     "apollo-angular-link-http": "^1.9.0",
     "apollo-cache-inmemory": "^1.6.5",

src/app/app.module.ts

@@ -20,7 +20,6 @@ import {DialogCreateEventComponent, GroupComponent} from './components/group/gro
 import {ChatmanagerComponent} from './components/chatmanager/chatmanager.component';
 import {ChatlistComponent} from './components/chatlist/chatlist.component';
 import {PostlistComponent} from './components/feed/postlist/postlist.component';
-import {GraphQLModule} from './graphql.module';
 import {HttpClientModule} from '@angular/common/http';
 import {ProfileComponent} from './components/profile/profile.component';
 import {ImprintComponent} from './components/imprint/imprint.component';
@@ -63,6 +62,8 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 
 const config: SocketIoConfig = {url: 'http://localhost:4444', options: {}};
@@ -110,7 +111,6 @@ const appRoutes: Routes = [
     FormsModule,
     HttpModule,
     SocketIoModule.forRoot(config),
-    GraphQLModule,
     HttpClientModule,
     InfiniteScrollModule,
     MatDatepickerModule,
@@ -149,6 +149,7 @@ const appRoutes: Routes = [
     MatDatepickerModule,
     MatSnackBarModule,
     MatProgressBarModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
   ],
   entryComponents: [
     DialogCreateGroupComponent,

src/app/components/profile/fileUpload/fileUploadDialog.component.html

@@ -1,5 +1,5 @@
 <div id="file-upload-dialog">
-  <h1 mat-dialog-title align="center">Upload a new Profile picture!</h1>
+  <h1 mat-dialog-title align="center">Upload a new Profile Picture!</h1>
   <div class="uploadDialogContent" mat-dialog-content>
     <input style="display: none" id="input-file" type="file" accept="image/*" (change)="onFileInputChange($event)" #name>
     <label for="input-file" class="mat-button mat-raised-button mat-primary">Choose File</label>

src/app/graphql.module.ts

@@ -1,27 +0,0 @@
-import {NgModule} from '@angular/core';
-import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular';
-import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
-import {InMemoryCache} from 'apollo-cache-inmemory';
-
-const uri = 'https://o5x5jzoo7z.sse.codesandbox.io/graphql';
-
-// 'https://greenvironment.net/graphql:443'; // <-- add the URL of the GraphQL server here
-export function createApollo(httpLink: HttpLink) {
-  return {
-    link: httpLink.create({uri}),
-    cache: new InMemoryCache(),
-  };
-}
-
-@NgModule({
-  exports: [ApolloModule, HttpLinkModule],
-  providers: [
-    {
-      provide: APOLLO_OPTIONS,
-      useFactory: createApollo,
-      deps: [HttpLink],
-    },
-  ],
-})
-export class GraphQLModule {
-}

src/index.html

@@ -7,10 +7,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <script src="https://kit.fontawesome.com/84cf838715.js"></script>
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
 <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/manifest.webmanifest

@@ -0,0 +1,51 @@
+{
+  "name": "greenvironment",
+  "short_name": "greenvironment",
+  "theme_color": "#1976d2",
+  "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"
+    }
+  ]
+}