Parcourir la source

Add service worker for PWA (#972)

Fix resolution mismatch in manifest.webmanifest
Add service worker
Embed service worker registration in `src/bootstrap.ts` and enable console output
Christoph Schwizer il y a 5 ans
Parent
commit
7bb2ba0e53
3 fichiers modifiés avec 27 ajouts et 1 suppressions
  1. 1 1
      public/manifest.webmanifest
  2. 16 0
      public/service-worker.js
  3. 10 0
      src/bootstrap.ts

+ 1 - 1
public/manifest.webmanifest

@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "img/favicon/favicon.ico?v=[[VERSION]]",
-      "sizes": "64x64",
+      "sizes": "48x48",
       "type": "image/x-icon"
     },
     {

+ 16 - 0
public/service-worker.js

@@ -0,0 +1,16 @@
+// service worker for PWA (progressive web app)
+
+self.addEventListener('install', (event) => {
+    // console.log('👷', 'install', event);
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    // console.log('👷', 'activate', event);
+    return self.clients.claim();
+});
+
+self.addEventListener('fetch', function (event) {
+    // console.log('👷', 'fetch', event);
+    event.respondWith(fetch(event.request));
+});

+ 10 - 0
src/bootstrap.ts

@@ -23,6 +23,16 @@
 import('./app')
     .then(() => {
         console.info('Bundle loaded, bootstrapping application.');
+        // register service worker
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/service-worker.js')
+                .then(function (registration) {
+                    console.info('Service worker registration successful, scope is:', registration.scope);
+                })
+                .catch(function (error) {
+                    console.warn('Service worker registration failed, error:', error);
+                });
+        }
         angular.bootstrap(document, ['3ema']);
     })
     .catch((e) => console.error('Could not bootstrap application', e));