surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Notification with Service Workers now is working!

Browse Source 
When a Notification arrives, it save into the IndexDb,
then in Vue.js call a polling to check in the db if there is a different record count.
If is different then call a get to update the notification.
This commit is contained in:
paoloar77
2022-08-07 02:01:20 +02:00
parent 66ee007e92
commit ce20daed6d
27 changed files with 411 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src-pwa/custom-service-worker.js
View File

@@ -16,7 +16,7 @@ import { CacheableResponsePlugin } from 'workbox-cacheable-response'
import { ExpirationPlugin } from 'workbox-expiration'
console.log(
' [ VER-0.1.2b ] _---------________------ PAO: this is my custom service worker')
' [ VER-0.3.23b ] _---------________------ PAO: this is my custom service worker')
importScripts('js/idb.js')
importScripts('js/storage.js')
@@ -24,6 +24,8 @@ importScripts('js/storage.js')
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js');
// importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
// importScripts('./ChabokSDKWorker.js', 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
@@ -43,7 +45,7 @@ const cfgenv = {
// console.log('serverweb', cfgenv.serverweb)
async function writeData (table, data) {
// console.log('writeData', table, data);
console.log('writeData', table, data);
await idbKeyval.setdata(table, data)
}
@@ -350,152 +352,155 @@ if ('serviceWorker' in navigator) {
}
// self.addEventListener('fetch', (event) => {
// if (event.request.url === '/') {
// const StaleWhileRevalidate = new StaleWhileRevalidate();
// event.respondWith(StaleWhileRevalidate.handle({ event }));
// }
// });
self.addEventListener('fetch', (event) => {
if (event.request.url === '/') {
const StaleWhileRevalidate = new 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)
// if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
// console.log('SAME ORIGIN!', event);
// return;
// }
// event.respondWith(caches.match(event.request));
// });
//
self.addEventListener('fetch', function (event) {
console.log('[Service Worker] Fetching something ....', event);
console.log('event.request.cache=', event.request.cache)
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
console.log('SAME ORIGIN!', event);
return;
}
event.respondWith(caches.match(event.request));
});
// const syncStore = {}
// self.addEventListener('message', event => {
// if (event.data.type === 'sync') {
// // get a unique id to save the data
// const id = uuid()
// syncStore[id] = event.data
// // register a sync and pass the id as tag for it to get the data
// self.registration.sync.register(id)
// }
// console.log(event.data)
// })
// addEventListener('fetch', event => {
// // Prevent the default, and handle the request ourselves.
// event.respondWith(async function() {
// // Try to get the response from a cache.
// const cachedResponse = await caches.match(event.request);
// // Return it if we found one.
// if (cachedResponse && (event.request.cache !== 'no-cache'))
// return cachedResponse;
//
// // If we didn't find a match in the cache, use the network.
// return fetch(event.request);
// }());
// });
const syncStore = {}
self.addEventListener('message', event => {
if (event.data.type === 'sync') {
console.log('addEventListener - message')
// get a unique id to save the data
const id = uuid()
syncStore[id] = event.data
// register a sync and pass the id as tag for it to get the data
self.registration.sync.register(id)
console.log('self.registration.sync.register(id)')
}
console.log(event.data)
})
// self.addEventListener('fetch', function (event) {
// event.respondWith(
// caches.match(event.request).then(function (response) {
// return response ||
// fetch(event.request, event.headers)
// .catch(err => {
// console.log('_______________________ ERRORE FETCH SW: ', event.request, err)
// writeData('config', { _id: 2, stateconn: 'offline' })
// return caches.match(event.request);
// })
// })
// );
// });
addEventListener('fetch', event => {
// Prevent the default, and handle the request ourselves.
event.respondWith(async function() {
// Try to get the response from a cache.
const cachedResponse = await caches.match(event.request);
// Return it if we found one.
if (cachedResponse && (event.request.cache !== 'no-cache'))
return cachedResponse;
// self.addEventListener('fetch', function (event) {
// event.respondWith(
// fetch(event.request, event.headers)
// .catch(err => {
// console.log('_______________________ ERRORE FETCH SW: ', event.request, err)
// writeData('config', {_id: 2, stateconn: 'offline'})
// return caches.match(event.request);
// })
// );
// });
// If we didn't find a match in the cache, use the network.
return fetch(event.request);
}());
});
// self.addEventListener('sync', function (event) {
// console.log('[Service Worker V5] Background syncing', event.tag);
//
// let mystrparam = event.tag
// let multiparams = mystrparam.split('|')
// if (multiparams) {
// if (multiparams.length > 3) {
// let cmd = multiparams[0]
// let table = multiparams[1]
// let method = multiparams[2]
// let token = multiparams[3]
// // let lang = multiparams[3]
//
// if (cmd === 'sync-todos') {
// console.log('[Service Worker] Syncing', cmd, table, method);
//
// const headers = new Headers()
// headers.append('content-Type', 'application/json')
// headers.append('Accept', 'application/json')
// headers.append('x-auth', token)
//
//
// // console.log('A1) INIZIO.............................................................');
//
// event.waitUntil(
// readAllData(table)
// .then(function (alldata) {
// const myrecs = [...alldata]
// console.log('----------------------- LEGGO QUALCOSA DAL WAITUNTIL ')
// let errorfromserver = false
// if (myrecs) {
// for (let rec of myrecs) {
// //console.log('syncing', table, '', rec.descr)
// let link = cfgenv.serverweb + '/todos'
//
// if (method !== 'POST')
// link += '/' + rec._id
//
// console.log('++++++++++++++++++ SYNCING !!!! ', rec.descr, table, 'FETCH: ', method, link, 'data:')
//
// // console.log('DATATOSAVE:', JSON.stringify(rec))
//
// // Insert/Delete/Update table to the server
// fetch(link, {
// method: method,
// headers: headers,
// cache: 'no-cache',
// mode: 'cors', // 'no-cors',
// body: JSON.stringify(rec)
// })
// .then(() => {
// deleteItemFromData(table, rec._id)
// })
// .then(() => {
// deleteItemFromData('swmsg', mystrparam)
// })
// .catch(function (err) {
// console.log('!!!!!!!!!!!!!!! Error while sending data', err, err.message);
// if (err.message === 'Failed to fetch') {
// errorfromserver = true
// }
// })
// }
// return errorfromserver
// }
// })
// .then((errorfromserver) => {
// const mystate = !errorfromserver ? 'online' : 'offline'
// writeData('config', { _id: 2, stateconn: mystate })
// })
// );
// // console.log('A2) ?????????????????????????? ESCO DAL LOOP !!!!!!!!! err=')
// }
// }
// }
// })
// ;
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response ||
fetch(event.request, event.headers)
.catch(err => {
console.log('_______________________ ERRORE FETCH SW: ', event.request, err)
writeData('config', { _id: 2, stateconn: 'offline' })
return caches.match(event.request);
})
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request, event.headers)
.catch(err => {
console.log('_______________________ ERRORE FETCH SW: ', event.request, err)
writeData('config', {_id: 2, stateconn: 'offline'})
return caches.match(event.request);
})
);
});
self.addEventListener('sync', function (event) {
console.log('[Service Worker V5] Background syncing', event);
console.log('event:', event);
let mystrparam = event.tag
let multiparams = mystrparam.split('|')
if (multiparams) {
if (multiparams.length > 3) {
let cmd = multiparams[0]
let table = multiparams[1]
let method = multiparams[2]
let token = multiparams[3]
// let lang = multiparams[3]
if (cmd === 'sync-todos') {
console.log('[Service Worker] Syncing', cmd, table, method);
const headers = new Headers()
headers.append('content-Type', 'application/json')
headers.append('Accept', 'application/json')
headers.append('x-auth', token)
// console.log('A1) INIZIO.............................................................');
event.waitUntil(
readAllData(table)
.then(function (alldata) {
const myrecs = [...alldata]
console.log('----------------------- LEGGO QUALCOSA DAL WAITUNTIL ')
let errorfromserver = false
if (myrecs) {
for (let rec of myrecs) {
//console.log('syncing', table, '', rec.descr)
let link = cfgenv.serverweb + '/todos'
if (method !== 'POST')
link += '/' + rec._id
console.log('++++++++++++++++++ SYNCING !!!! ', rec.descr, table, 'FETCH: ', method, link, 'data:')
// console.log('DATATOSAVE:', JSON.stringify(rec))
// Insert/Delete/Update table to the server
fetch(link, {
method: method,
headers: headers,
cache: 'no-cache',
mode: 'cors', // 'no-cors',
body: JSON.stringify(rec)
})
.then(() => {
deleteItemFromData(table, rec._id)
})
.then(() => {
deleteItemFromData('swmsg', mystrparam)
})
.catch(function (err) {
console.log('!!!!!!!!!!!!!!! Error while sending data', err, err.message);
if (err.message === 'Failed to fetch') {
errorfromserver = true
}
})
}
return errorfromserver
}
})
.then((errorfromserver) => {
const mystate = !errorfromserver ? 'online' : 'offline'
writeData('config', { _id: 2, stateconn: mystate })
})
);
// console.log('A2) ?????????????????????????? ESCO DAL LOOP !!!!!!!!! err=')
}
}
}
})
;
/*
@@ -565,28 +570,62 @@ self.addEventListener('push', (event) => {
}
try {
let isobj = false
if (event.data) {
try {
data = JSON.parse(event.data.text())
isobj = true
} catch (e) {
data = event.data.text()
}
}
const options = {
body: data.content,
icon: '/images/android-chrome-192x192.png',
badge: '/images/android-chrome-192x192.png',
data: {
url: data.url,
},
tag: 'received',
renitify: true, // vibrate also with others messages.
console.log('event.data', data)
let options = {}
let myid = '0'
if (isobj) {
if (data.id) {
myid = data.id
}
options = {
body: data.content,
icon: data.icon ? data.icon : '/images/android-chrome-192x192.png',
badge: data.badge ? data.badge : '/images/android-chrome-192x192.png',
data: {
url: data.url,
},
tag: data.tag,
renitify: true, // vibrate also with others messages.
}
event.waitUntil(
self.registration.showNotification(data.title ? data.title : data.content, options),
)
} else {
let text = data;
options = {
body: text,
icon: '/images/android-chrome-192x192.png',
badge: '/images/android-chrome-192x192.png',
data: {
url: '/',
},
tag: 'notif',
renitify: true, // vibrate also with others messages.
}
event.waitUntil(
self.registration.showNotification('', options),
)
}
event.waitUntil(
self.registration.showNotification(data.title, options),
)
self.registration.sync.register(myid)
writeData('notifications', { _id: myid, tag: options.tag })
} catch (e) {
console.log('Error on event push:', e)
}