Fixed service workers

angular.json

@@ -26,7 +26,6 @@
 						"assets": [
 							"src/assets",
 							"src/manifest.json"
-
 						],
 						"styles": [
 							"./node_modules/bootstrap-scss/bootstrap.scss",
@@ -59,7 +58,8 @@
 									"maximumError": "1mb"
 								}
 							],
-							"outputHashing": "all"
+							"outputHashing": "all",
+							"serviceWorker": "ngsw-config.json"
 						},
 						"development": {
 							"optimization": false,

ngsw-config.json

@@ -7,20 +7,21 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/assets/images/logo.png",
           "/index.html",
+          "/manifest.json",
           "/*.css",
           "/*.js"
         ]
       }
-    }, {
+    },
+    {
       "name": "assets",
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
         "files": [
-          "/assets/**",
+          "/assets/**"
-          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
         ]
       }
     }

package.json

@@ -9,8 +9,8 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/cdk": "^17.0.0",
 		"@angular/animations": "^17.0.0",
+		"@angular/cdk": "^17.0.0",
 		"@angular/common": "^17.0.0",
 		"@angular/compiler": "^17.0.0",
 		"@angular/core": "^17.0.0",

src/app/app.module.ts

@@ -1,11 +1,11 @@
-import {NgModule} from "@angular/core";
+import {isDevMode, NgModule} from "@angular/core";
 import {FormsModule} from "@angular/forms";
 import {BrowserModule} from "@angular/platform-browser";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {ServiceWorkerModule} from "@angular/service-worker";
 import {ClickOutsideModule} from "ng-click-outside";
 import {ColorPickerModule} from "ngx-color-picker";
-import {environment} from '../environments/environment';
+import {AppComponent} from './app.component';
 import {AppRouting} from './app.routing';
 import {CalibrateComponent} from "./components/calibrate/calibrate.component";
 import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
@@ -16,7 +16,6 @@ import {PermissionsComponent} from "./components/permissions/permissions.compone
 import {StarrySkyComponent} from "./components/starrySky/starrySky.component";
 import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {MaterialModule} from "./material.module";
-import {AppComponent} from './app.component';
 import {HomeComponent} from "./views/home/home.component";
 import {MapComponent} from "./views/map/map.component";
 
@@ -42,8 +41,11 @@ import {MapComponent} from "./views/map/map.component";
 		ClickOutsideModule,
 		ColorPickerModule,
 		MaterialModule,
-		ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+		ServiceWorkerModule.register('ngsw-worker.js', {
+			enabled: !isDevMode(),
+			registrationStrategy: 'registerWhenStable:30000' // when stable or after 30 seconds
+		})
 	],
 	bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/index.html

@@ -8,28 +8,30 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
 	<meta name="theme-color" content="#000000">
-	<meta name="description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta name="description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<!-- Google / Search Engine Tags -->
 	<meta itemprop="name" content="Map Alliance">
-	<meta itemprop="description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta itemprop="description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta itemprop="image" content="/assets/icons/icon-512x512.png">
 	<!-- Facebook Meta Tags -->
 	<meta property="og:type" content="website">
 	<meta property="og:title" content="Map Alliance">
-	<meta property="og:description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta property="og:description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta property="og:image" content="/assets/icons/icon-512x512.png">
 	<!-- Twitter Meta Tags -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="Map Alliance">
-	<meta name="twitter:description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta name="twitter:description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta name="twitter:image" content="/assets/icons/icon-512x512.png">
 
 	<link rel="icon" type="image/x-icon" href="/assets/images/logo.png">
 	<link rel="manifest" href="manifest.json">
 
-	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE" async defer></script>
+	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE"></script>
+  <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/main.ts

@@ -8,3 +8,51 @@ initializeApp(environment.firebase);
 
 platformBrowserDynamic().bootstrapModule(AppModule)
 	.catch(err => console.error(err));
+
+// Leaflet touch polyfill ===========================================
+declare const L;
+
+// Touch support
+L.Map.mergeOptions({touchExtend: true});
+L.Map.TouchExtend = L.Handler.extend({
+	initialize: function (map) {
+		this._map = map;
+		this._container = map._container;
+		this._pane = map._panes.overlayPane;
+	},
+	addHooks: function () {
+		L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
+		L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this);
+		L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this);
+	},
+	removeHooks: function () {
+		L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
+		L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
+		L.DomEvent.off(this._container, 'touchmove', this._onTouchMove);
+	},
+	_eventWrapper: function(e) {
+		let containerPoint = this._map.mouseEventToContainerPoint(e);
+		let layerPoint = this._map.containerPointToLayerPoint(containerPoint);
+		let latlng = this._map.layerPointToLatLng(layerPoint);
+
+		return {
+			latlng: latlng,
+			layerPoint: layerPoint,
+			containerPoint: containerPoint,
+			originalEvent: e
+		}
+	},
+	_onTouchStart: function (e) {
+		if (!this._map._loaded) return;
+		this._map.fire('touchstart', this._eventWrapper(e));
+	},
+	_onTouchEnd: function (e) {
+		if (!this._map._loaded) return;
+		this._map.fire('touchend', this._eventWrapper(e));
+	},
+	_onTouchMove: function(e) {
+		if(!this._map._loaded) return;
+		this._map.fire('touchmove', this._eventWrapper(e));
+	}
+});
+L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);