diff --git a/src-pwa/custom-service-worker.js b/src-pwa/custom-service-worker.js index 34672c1..9d06f52 100644 --- a/src-pwa/custom-service-worker.js +++ b/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) + ); +}); + diff --git a/src/components/logo/logo.ts b/src/components/logo/logo.ts index 17f7d8c..5c43ec4 100644 --- a/src/components/logo/logo.ts +++ b/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() } diff --git a/src/root/home/home.ts b/src/root/home/home.ts index 9666a70..ed7941e 100644 --- a/src/root/home/home.ts +++ b/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', diff --git a/src/root/home/home.vue b/src/root/home/home.vue index e86d14a..04faefb 100644 --- a/src/root/home/home.vue +++ b/src/root/home/home.vue @@ -2,6 +2,21 @@ + + +
+
+ + Status: + + + +
+
diff --git a/src/statics/i18n.js b/src/statics/i18n.js index 2ec2a0b..5acd9d5 100644 --- a/src/statics/i18n.js +++ b/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.' } }, }; diff --git a/src/statics/freeplanet-logo-full.svg b/src/statics/images/freeplanet-logo-full.svg similarity index 100% rename from src/statics/freeplanet-logo-full.svg rename to src/statics/images/freeplanet-logo-full.svg diff --git a/src/statics/images/freeplanet.png b/src/statics/images/freeplanet.png new file mode 100644 index 0000000..b5e10db Binary files /dev/null and b/src/statics/images/freeplanet.png differ diff --git a/src/statics/quasar-logo.png b/src/statics/quasar-logo.png deleted file mode 100644 index 590e8ce..0000000 Binary files a/src/statics/quasar-logo.png and /dev/null differ