Merge pull request #18 from Sybit-Education/feature/pwa-feature

Feature: PWA

angular.json

@@ -41,17 +41,18 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
-              "src/styles.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/paper/dist/paper-full.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
-            ]
+            ],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -121,7 +122,8 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.scss"

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$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/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "@angular/service-worker": "^15.2.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@ng-bootstrap/ng-bootstrap": "^14.0.1",
     "@ngrx/store": "^15.4.0",

src/app/app.module.ts

@@ -1,16 +1,16 @@
-import { NgModule } from '@angular/core';
+import { NgModule, isDevMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
-import {AuthInterceptor} from "./misc/auth.interceptor";
+import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
+import { AuthInterceptor} from "./misc/auth.interceptor";
 import { AuthPageComponent } from './auth-page/auth-page.component';
-import {RouterModule, RouterOutlet} from "@angular/router";
-import {ReactiveFormsModule} from "@angular/forms";
-import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
-import {APP_ROUTES} from "./misc/app.routes";
-import {StoreModule} from "@ngrx/store";
-import {sygotchiReducer} from "./store/sygotchi.reducer";
+import { RouterModule, RouterOutlet } from "@angular/router";
+import { ReactiveFormsModule } from "@angular/forms";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { APP_ROUTES } from "./misc/app.routes";
+import { StoreModule } from "@ngrx/store";
+import { sygotchiReducer } from "./store/sygotchi.reducer";
 import { LogoComponent } from './logo/logo.component';
 import { TeamSComponent } from './team-s/team-s.component';
 import { DsgvoPageComponent } from './dsgvo-page/dsgvo-page.component';
@@ -22,6 +22,7 @@ import { HeaderComponent } from './header/header.component';
 import { SygotchiCleanComponent } from './sygotchi-clean/sygotchi-clean.component';
 import { SleepSceneComponent } from './sleep-scene/sleep-scene.component';
 import { FooterComponent } from './footer/footer.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
 import { ErrorPageComponent } from './error-page/error-page.component';
 
 @NgModule({
@@ -48,7 +49,13 @@ import { ErrorPageComponent } from './error-page/error-page.component';
     HttpClientModule,
     RouterModule.forRoot(APP_ROUTES),
     NgbModule,
-    StoreModule.forRoot({ sygotchi: sygotchiReducer })
+    StoreModule.forRoot({ sygotchi: sygotchiReducer }),
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    })
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

src/app/footer/footer.component.html

@@ -1,10 +1,10 @@
 <footer class="bd-footer py-4 py-md-5 mt-5 bg-light align-text-bottom">
   <div class="container py-4 py-md-5 px-4 px-md-3">
     <div class="row">
-      <div class="col-md-4 col-sm-12 mb-3">
+      <div class="col-4 mb-3">
         <app-logo class="footer-logo"></app-logo>
       </div>
-      <div class="col-md-4 col-sm-6 mb-3">
+      <div class="col-4 mb-3">
         <ul class="list-unstyled">
           <li>
             <a routerLink="/team-site">Über uns</a>
@@ -14,7 +14,7 @@
           </li>
         </ul>
       </div>
-      <div class="col-md-4 col-sm-6 mb-3">
+      <div class="col-4 mb-3">
         <ul class="list-unstyled">
           <li>
             <a routerLink="/impressum">Impressum</a>

src/index.html

@@ -11,8 +11,11 @@
       var global = window;
     }
   </script>
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#b61682">
 </head>
 <body>
 <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/manifest.webmanifest

@@ -0,0 +1,59 @@
+{
+  "name": "Sygotchi",
+  "short_name": "Sygotchi",
+  "theme_color": "#b61682",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/styles.scss

@@ -1 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+$theme-colors: (
+  "primary": #b61682,
+  "secondary": #3b3a3a,
+  "success": #28a745,
+  "info": #17a2b8,
+  "warning": #ffc107,
+  "danger": #dc3545,
+  "light": #f8f9fa,
+  "dark": #343a40
+);
+
+/* Importing Bootstrap SCSS file. */
+@import 'bootstrap/scss/bootstrap';
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
+html {
+  min-height: calc(100% + env(safe-area-inset-top));
+}