added pwa

2024-04-01 20:54:22 +02:00
parent 544d436db6
commit 94d02d8466
18 changed files with 152 additions and 12 deletions
@@ -23,9 +23,15 @@
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
            "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
          },
          "configurations": {
            "production": {
@@ -86,7 +92,11 @@
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
@@ -1,13 +1,16 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-critters-container>
 <head>
  <meta charset="utf-8">
  <title>Webrtc</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-<link rel="stylesheet" href="styles.css"></head>
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+<style>html,body{width:100%;height:100%;margin:0}body{background-color:#000}</style><link rel="stylesheet" href="styles.adb4a414eec143fc.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.adb4a414eec143fc.css"></noscript></head>
 <body>
  <app-root></app-root>
-<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+<script src="runtime.463294279b1fe43a.js" type="module"></script><script src="polyfills.8049dbc24d3cd374.js" type="module"></script><script src="main.91e89151ffc25325.js" type="module"></script></body>
 </html>
@@ -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)"
+        ]
+      }
+    }
+  ]
+}
@@ -16,6 +16,7 @@
        "@angular/platform-browser": "^17.3.2",
        "@angular/platform-browser-dynamic": "^17.3.2",
        "@angular/router": "^17.3.2",
+        "@angular/service-worker": "^17.3.2",
        "rxjs": "~7.5.0",
        "tslib": "^2.3.0",
        "uuid": "^9.0.0",
@@ -639,6 +640,24 @@
        "rxjs": "^6.5.3 || ^7.4.0"
      }
    },
+    "node_modules/@angular/service-worker": {
+      "version": "17.3.2",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-17.3.2.tgz",
+      "integrity": "sha512-pa6VNG3KY9I0SncDLKDowBLX6tPgQjyvIWE/yCdZKJeOqNA94ULYVQma+pT87LF6gB9bYN/vodmj0125KN8dMw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "ngsw-config": "ngsw-config.js"
+      },
+      "engines": {
+        "node": "^18.13.0 || >=20.9.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "17.3.2",
+        "@angular/core": "17.3.2"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.23.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -12094,6 +12113,14 @@
        "tslib": "^2.3.0"
      }
    },
+    "@angular/service-worker": {
+      "version": "17.3.2",
+      "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-17.3.2.tgz",
+      "integrity": "sha512-pa6VNG3KY9I0SncDLKDowBLX6tPgQjyvIWE/yCdZKJeOqNA94ULYVQma+pT87LF6gB9bYN/vodmj0125KN8dMw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
    "@babel/code-frame": {
      "version": "7.23.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -18,6 +18,7 @@
    "@angular/platform-browser": "^17.3.2",
    "@angular/platform-browser-dynamic": "^17.3.2",
    "@angular/router": "^17.3.2",
+    "@angular/service-worker": "^17.3.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
@@ -1,10 +1,11 @@
-import { NgModule } from '@angular/core';
+import { NgModule, isDevMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { SignalingService } from './services/signaling.service';
 import { VideoComponent } from './components/video/video.component';
 import { AudioComponent } from './components/audio/audio.component';
+import { ServiceWorkerModule } from '@angular/service-worker';

@NgModule({
  declarations: [
@@ -15,6 +16,12 @@ import { AudioComponent } from './components/audio/audio.component';
  imports: [
    BrowserModule,
    HttpClientModule,
+    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: [SignalingService],
  bootstrap: [AppComponent]
@@ -1,12 +1,12 @@

 :host {
-  max-height: 90%;
-  max-width: 80%;
-  height: 90%;
-  width: auto;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }

 video {
+  object-fit: contain;
  height: 100%;
  width: 100%;
 }
@@ -6,8 +6,11 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <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>
@@ -0,0 +1,59 @@
+{
+  "name": "webrtc",
+  "short_name": "webrtc",
+  "theme_color": "#1976d2",
+  "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"
+    }
+  ]
+}
@@ -7,5 +7,5 @@ html, body {
 }

 body {
-  background-color: rgb(46, 46, 46);
+  background-color: black;
 }