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

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) {
-    this.$q.notify(msg)
+  showNotification(message: string, color = 'primary', icon = '') {
+    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.'
     }
   },
 };