- add: perimssion and Send Notification to a Service Worker... -> and finally to the App

src-pwa/custom-service-worker.js

@@ -203,6 +203,12 @@ if (workbox) {
   );
 
 
+  workbox.routing.registerRoute(
+    new RegExp('/admin/'),
+    workbox.strategies.networkOnly()
+  );
+
+
 }
 
 if ('serviceWorker' in navigator) {
@@ -211,6 +217,13 @@ if ('serviceWorker' in navigator) {
 
 }
 
+self.addEventListener('fetch', (event) => {
+  if (event.request.url === '/') {
+    const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
+    event.respondWith(staleWhileRevalidate.handle({event}));
+  }
+});
+
 // self.addEventListener('fetch', function (event) {
 //   console.log('[Service Worker] Fetching something ....', event);
 //   console.log('event.request.cache=', event.request.cache)
@@ -330,3 +343,61 @@ self.addEventListener('sync', event => {
   event.waitUntil(fetch(url, options))
 })
 */
+
+self.addEventListener('notificationclick', function(event) {
+  var notification = event.notification;
+  var action = event.action;
+
+  console.log(notification);
+
+  if (action === 'confirm') {
+    console.log('Confirm was chosen');
+    notification.close();
+  } else {
+    console.log(action);
+    event.waitUntil(
+      clients.matchAll()
+        .then(function(clis) {
+          var client = clis.find(function(c) {
+            return c.visibilityState === 'visible';
+          });
+
+          if (client !== undefined) {
+            client.navigate(notification.data.url);
+            client.focus();
+          } else {
+            clients.openWindow(notification.data.url);
+          }
+          notification.close();
+        })
+    );
+  }
+});
+
+self.addEventListener('notificationclose', function(event) {
+  console.log('Notification was closed', event);
+});
+
+self.addEventListener('push', function(event) {
+  console.log('Push Notification received', event);
+
+  var data = {title: 'New!', content: 'Something new happened!', openUrl: '/'};
+
+  if (event.data) {
+    data = JSON.parse(event.data.text());
+  }
+
+  var options = {
+    body: data.content,
+    icon: '/src/images/icons/app-icon-96x96.png',
+    badge: '/src/images/icons/app-icon-96x96.png',
+    data: {
+      url: data.openUrl
+    }
+  };
+
+  event.waitUntil(
+    self.registration.showNotification(data.title, options)
+  );
+});
+

src/components/logo/logo.ts

@@ -13,7 +13,7 @@ export default class Logo extends Vue {
   logoimg: string = ''
 
   created() {
-    this.logoimg = 'statics/' + process.env.LOGO_REG
+    this.logoimg = 'statics/images/' + process.env.LOGO_REG
     this.animate()
   }
 

src/root/home/home.ts

@@ -43,8 +43,13 @@ export default class Home extends Vue {
     this.showNotification(String(my))
   }
 
-  showNotification(msg: string) {
+  showNotification(message: string, color = 'primary', icon = '') {
-    this.$q.notify(msg)
+    this.$q.notify({
+      color,
+      icon,
+      message
+    })
+
   }
 
   initprompt() {
@@ -57,6 +62,80 @@ export default class Home extends Vue {
 
   }
 
+  getPermission () {
+    return Notification.permission
+  }
+
+  displayConfirmNotification() {
+    let options = null
+    if ('serviceWorker' in navigator) {
+      options = {
+        body: 'You successfully subscribed to our Notification service!',
+        icon: '/src/images/icons/app-icon-96x96.png',
+        image: '/src/images/sf-boat.jpg',
+        dir: 'ltr',
+        lang: 'en-US', // BCP 47,
+        vibrate: [100, 50, 200],
+        badge: '/src/images/icons/app-icon-96x96.png',
+        tag: 'confirm-notification',
+        renotify: true,  // if it's already sent, will Vibrate anyway
+        actions: [
+          { action: 'confirm', title: 'Okay', icon: '/src/images/icons/app-icon-96x96.png' },
+          { action: 'cancel', title: 'Cancel', icon: '/src/images/icons/app-icon-96x96.png' }
+        ]
+      }
+
+      navigator.serviceWorker.ready
+        .then(function(swreg) {
+          swreg.showNotification('Successfully subscribed!', options)
+        })
+    }
+  }
+
+  showNotificationExample() {
+    let options = null
+    let mythis = this
+    if ('serviceWorker' in navigator) {
+      options = {
+        body: mythis.$t('notification.subscribed'),
+        icon: '/statics/icons/android-chrome-192x192.png',
+        image: '/statics/images/freeplanet.png',
+        dir: 'ltr',
+        lang: 'en-US', // BCP 47,
+        vibrate: [100, 50, 200],
+        badge: '/statics/icons/android-chrome-192x192.png',
+        tag: 'confirm-notification',
+        renotify: true,  // if it's already sent, will Vibrate anyway
+        actions: [
+          { action: 'confirm', title: mythis.$t('dialog.ok'), icon: '/statics/icons/android-chrome-192x192.png', }
+          // { action: 'cancel', title: 'Cancel', icon: '/statics/icons/android-chrome-192x192.png', }
+        ]
+      }
+
+      navigator.serviceWorker.ready
+        .then(function(swreg) {
+          swreg.showNotification(mythis.$t('notification.title_subscribed'), options)
+        })
+    }
+  }
+
+  askfornotification () {
+    this.showNotification(this.$t('notification.waitingconfirm'), 'positive', 'notifications')
+
+    let mythis = this
+    Notification.requestPermission(function(result) {
+      console.log('User Choice', result)
+      if (result === 'granted') {
+        mythis.showNotification(mythis.$t('notification.confirmed'), 'positive', 'notifications')
+      } else {
+        mythis.showNotification(mythis.$t('notification.denied'), 'negative', 'notifications')
+
+        // displayConfirmNotification();
+      }
+    })
+
+  }
+
   test_fetch() {
     fetch('https:/httpbin.org/post', {
       method: 'POST',

src/root/home/home.vue

@@ -2,6 +2,21 @@
     <q-page class="flex flex-center">
         <logo></logo>
 
+        <q-btn v-if="getPermission() !== 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="askfornotification" :label="$t('notification.ask')"/>
+        <q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>
+        <br>
+        <div>
+            <q-chip square color="secondary">
+                Status:
+            </q-chip>
+            <q-field
+                    v-if="getPermission() === 'granted'"
+                    icon="notifications"
+                    :label="$t('notification.titlegranted')"
+                    helper="Stato Notifiche">
+            </q-field>
+        </div>
+
     </q-page>
 
 

src/statics/i18n.js

@@ -1,6 +1,7 @@
 const messages = {
   it: {
     dialog: {
+      ok: 'Ok',
       yes: 'Si',
       no: 'No',
       delete: 'Elimina',
@@ -103,10 +104,21 @@ const messages = {
       edit: 'Descrizione Task:',
       completed: 'Completati',
       usernotdefined: 'Attenzione, occorre essere Loggati per poter aggiungere un Todo'
+    },
+    notification : {
+      ask: 'Attiva le Notifiche',
+      waitingconfirm: 'Conferma la richiesta di Notifica',
+      confirmed: 'Notifiche Attivate!',
+      denied: 'Notifiche Disabilitate! Attenzione così non vedrai arrivarti i messaggi. Riabilitali per vederli.',
+      titlegranted: 'Permesso Notifiche Abilitato!',
+      titledenied: 'Permesso Notifiche Disabilitato!',
+      title_subscribed: 'Sottoscrizione a FreePlanet.app!',
+      subscribed: 'Ora potrai ricevere i messaggi e le notifiche.'
     }
   },
   enUk: {
     dialog: {
+      ok: 'Ok',
       yes: 'Yes',
       no: 'No',
       delete: 'Delete',
@@ -209,6 +221,16 @@ const messages = {
       edit: 'Task Description:',
       completed: 'Completed',
       usernotdefined: 'Attention, you need to be Signed In to add a new Task'
+    },
+    notification : {
+      ask: 'Enable Notification',
+      waitingconfirm: 'Confirm the Request Notification',
+      confirmed: 'Notifications Enabled!',
+      denied: 'Notifications Disabled! Attention, you will not see your messages incoming. Reenable it for see it',
+      titlegranted: 'Notification Permission Granted!',
+      titledenied: 'Notification Permission Denied!',
+      title_subscribed: 'Subscribed to FreePlanet.app!',
+      subscribed: 'You can now receive Notification and Messages.'
     }
   },
 };