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

2
src/store/Api/Inst-Pao.ts
View File

@@ -5,7 +5,7 @@ import { Api } from '@api'
import * as Types from '@src/store/Api/ApiTypes'
async function sendRequest(url: string, method: string, mydata: any) {
if (!process.env.DEBUG) console.log('sendRequest', method, url)
if (process.env.DEBUG) console.log('sendRequest', method, url)
let request
if (method === 'GET') request = Api.get(url, mydata)

6
src/store/Api/Instance.ts
View File

@@ -7,7 +7,7 @@ import { useUserStore } from '@store/UserStore'
import { tools } from '@src/store/Modules/tools'
import * as Types from './ApiTypes'
export let API_URL = process.env.MONGODB_HOST
export let API_URL = ''
export const axiosInstance: AxiosInstance = axios.create({
baseURL: API_URL,
headers: {
@@ -18,14 +18,14 @@ export const axiosInstance: AxiosInstance = axios.create({
axiosInstance.interceptors.response.use(
(response) => {
if (process.env.DEBUG === '1') console.log(response)
if (process.env.DEBUGGING === '1') console.log(response)
return response
},
(error) => {
const globalStore = useGlobalStore()
// console.log('error', error)
if (error.response) {
if (process.env.DEBUG === '1') console.log('Status = ', error.response.status)
if (process.env.DEBUGGING === '1') console.log('Status = ', error.response.status)
console.log('Request Error: ', error.response)
if (error.response.status !== 0) {
globalStore.setStateConnection('online')

4
src/store/Api/index.ts
View File

@@ -92,7 +92,7 @@ export const Api = {
idapp: process.env.APP_ID,
}
console.log('INIZIO - SendReq', url)
// console.log('INIZIO - SendReq', url)
// console.log('mydata', mydata)
const userStore = useUserStore()
@@ -145,7 +145,7 @@ export const Api = {
},
async syncAlternative(mystrparam: string) {
// console.log('[ALTERNATIVE Background syncing', mystrparam)
console.log('[ALTERNATIVE Background syncing', mystrparam)
const multiparams = mystrparam.split('|')
if (multiparams) {

4
src/store/MessageStore.ts
View File

@@ -106,8 +106,8 @@ export const useMessageStore = defineStore('MessageStore', {
data.datemsg = tools.getDateNow()
data.status = StatusMessage.WaitingToSend
// Options
data.options = tools.SetBit(data.options, shared_consts.MessageOptions.Notify_ByEmail)
data.options = tools.SetBit(data.options, shared_consts.MessageOptions.Notify_ByPushNotification)
data.typesend = tools.SetBit(data.typesend, shared_consts.MessageOptions.Notify_ByEmail)
data.typesend = tools.SetBit(data.typesend, shared_consts.MessageOptions.Notify_ByPushNotification)
// console.log('DOPO:')
// console.table(data)

61
src/store/Modules/ApiTables.ts
View File

@@ -9,12 +9,12 @@ import { useGlobalStore } from '@store/globalStore'
import globalroutines from '../../globalroutines/index'
import { useProjectStore } from '@store/Projects'
import { useTodoStore } from '@store/Todos'
import { useNotifStore } from '@store/NotifStore'
export function getLinkByTableName(nametable: string) {
if (nametable === 'todos') {
return 'todos'
}
if (nametable === 'projects') {
} else if (nametable === 'projects') {
return 'projects'
}
return ''
@@ -34,13 +34,13 @@ export const DB = {
}
export function allTables() {
/* const myarr = OtherTables
for (const tab of costanti.MainTables) {
for (const method of costanti.allMethod) {
const myarr = OtherTables
for (const tab of MainTables) {
for (const method of allMethod) {
myarr.push(method + tab)
}
} */
return costanti.OtherTables
}
return myarr
}
async function updatefromIndexedDbToState(nametab: string) {
@@ -52,7 +52,7 @@ async function updatefromIndexedDbToState(nametab: string) {
}
async function checkPendingMsg() {
// console.log('checkPendingMsg')
console.log('checkPendingMsg')
const globalStore = useGlobalStore()
const config = await globalroutines('read', 'config', null, '1')
@@ -82,8 +82,26 @@ async function checkPendingMsg() {
}).catch(() => reject()))
}
async function checkPendingNotif() {
const notifStore = useNotifStore()
const howmanybefore = notifStore.countNotif
// eslint-disable-next-line @typescript-eslint/no-misused-promises
return new Promise((resolve, reject) => globalroutines('count', 'notifications')
.then((count) => {
if (count !== howmanybefore) {
notifStore.setCountNotifs(count)
return resolve(true)
}
return resolve(false)
}).catch(() => reject()))
}
function useServiceWorker() {
return false // return 'serviceWorker' in navigator
return 'serviceWorker' in navigator
// return false //
}
// If something in the call of Service Worker went wrong (Network or Server Down), then retry !
@@ -99,7 +117,7 @@ async function sendSwMsgIfAvailable() {
.then(() => globalroutines('readall', 'swmsg')
.then((arr_recmsg) => {
if (arr_recmsg.length > 0) {
// console.log('---------------------- 2) navigator (2) .serviceWorker.ready')
console.log('---------------------- 2) navigator (2) .serviceWorker.ready')
let promiseChain = Promise.resolve()
for (const rec of arr_recmsg) {
@@ -130,6 +148,14 @@ export async function waitAndRefreshData() {
return await todos.dbLoad({ checkPending: false })
}
export function waitAndRefreshNotif() {
const notifStore = useNotifStore()
notifStore.updateNotification = true
}
export async function waitAndcheckPendingMsg() {
// await aspettansec(1000)
const globalStore = useGlobalStore()
@@ -157,6 +183,21 @@ export async function waitAndcheckPendingMsg() {
})
}
export async function waitAndcheckPendingNotif() {
// await aspettansec(1000)
const globalStore = useGlobalStore()
return checkPendingNotif()
.then((ris) => {
if (ris) {
if (globalStore.isOnline()) { // If is Offline, then check
return waitAndRefreshNotif()
}
}
})
}
async function dbInsertSave(call: string, item: any, method: string) {
let ret = true
const userStore = useUserStore()

2
src/store/Modules/costanti.ts
View File

@@ -231,7 +231,7 @@ export const costanti = {
MAX_PHASES: 5,
OtherTables: ['config', 'swmsg'],
OtherTables: ['config', 'swmsg', 'notifications'],
// export const MainTables = ['todos', 'projects']
MainTables: [],
allMethod: ['sync_post_', 'sync_patch_', 'delete_', 'hide_'],

4
src/store/Modules/fieldsTable.ts
View File

@@ -2156,8 +2156,8 @@ export const colTableUsersISP = [
AddCol({ name: 'username_who_block', label_trans: 'reg.username_who_block' }),
AddCol({ name: 'date_blocked', label_trans: 'reg.date_blocked', fieldtype: costanti.FieldType.date }),
AddCol({ name: 'reported', label_trans: 'reg.reported', fieldtype: costanti.FieldType.boolean }),
AddCol({ name: 'username_who_reported', label_trans: 'reg.username_who_reported' }),
AddCol({ name: 'date_reported', label_trans: 'reg.date_reported', fieldtype: costanti.FieldType.date }),
AddCol({ name: 'username_who_report', label_trans: 'reg.username_who_reported' }),
AddCol({ name: 'date_report', label_trans: 'reg.date_reported', fieldtype: costanti.FieldType.date }),
AddCol({
name: 'profile.resplist',
field: 'profile',

9
src/store/Modules/tools.ts
View File

@@ -56,6 +56,7 @@ export const tools = {
TABBED_HOME: 't-home',
TABBED_NAVE: 't-nave',
FILTER_ALL: 0,
FILTER_MYREC: 1,
FILTER_MYFOLLOW: 2,
@@ -5627,6 +5628,14 @@ export const tools = {
}
},
getEnv(name: string) {
const config: any = {
// @ts-ignore
VUE_APP_BACKEND_API_URL: window?.appConfig?.VUE_APP_BACKEND_API_URL || process.env.VUE_APP_BACKEND_API_URL
}
return config[name];
},
// getLocale() {
// if (navigator.languages && navigator.languages.length > 0) {

28
src/store/NotifStore.ts
View File

@@ -14,6 +14,7 @@ export const useNotifStore = defineStore('NotifStore', {
last_notifs: [],
show_all: true,
updateNotification: false,
countNotif: 0,
}),
getters: {
@@ -32,11 +33,17 @@ export const useNotifStore = defineStore('NotifStore', {
},
actions: {
updateArrNotif() {
this.setBadgeIconApp()
},
setNotif(notif: INotif) {
console.log('setNotif', notif)
if (notif) {
this.last_notifs = [notif, ...this.last_notifs]
}
this.updateArrNotif()
},
setAsRead(idnotif: string) {
@@ -44,6 +51,18 @@ export const useNotifStore = defineStore('NotifStore', {
if (rec) {
rec.read = true
}
this.updateArrNotif()
},
async setBadgeIconApp(){
// Get our dummy count and update it,
// just to give more context for this demo.
const countNow = this.getnumNotifUnread()
// @ts-ignore
await navigator.setAppBadge(countNow)
.catch((error: any) => { /* ... */ });
},
setAllRead(username: string) {
@@ -55,6 +74,7 @@ export const useNotifStore = defineStore('NotifStore', {
rec.read = true
}
}
this.updateArrNotif()
})
.catch((error) => {
@@ -71,6 +91,7 @@ export const useNotifStore = defineStore('NotifStore', {
this.last_notifs = this.last_notifs.filter((rec) => rec._id !== id)
}
this.updateArrNotif()
})
.catch((error) => {
console.error(error)
@@ -85,6 +106,7 @@ export const useNotifStore = defineStore('NotifStore', {
// console.log('res', res)
if (res) {
this.last_notifs = []
this.updateArrNotif()
}
})
@@ -110,6 +132,7 @@ export const useNotifStore = defineStore('NotifStore', {
} else {
this.last_notifs = []
}
this.updateArrNotif()
return true
})
.catch((error) => {
@@ -157,5 +180,10 @@ export const useNotifStore = defineStore('NotifStore', {
return false
})
},
setCountNotifs(num: number) {
this.countNotif = num
},
},
})

5
src/store/UserStore.ts
View File

@@ -25,6 +25,8 @@ import { shared_consts } from '@/common/shared_vuejs'
import { costanti } from '@costanti'
import { IMyGroup } from '@model/UserStore'
import globalroutines from '../globalroutines/index'
export const DefaultUser: IUserFields = {
_id: '',
email: '',
@@ -955,6 +957,7 @@ export const useUserStore = defineStore('UserStore', {
return await this.setGlobal($router, isLogged)
.then((loadstorage: any) => {
console.log('RISULT setGlobal:', loadstorage)
if (loadstorage) {
if ($q.screen.gt.sm) {
@@ -969,7 +972,7 @@ export const useUserStore = defineStore('UserStore', {
}*/
//++Todo PWA: globalroutines('loadapp', '')
globalroutines('loadapp', '')
// Create Subscription to Push Notification
globalStore.createPushSubscription()

22
src/store/globalStore.ts
View File

@@ -564,6 +564,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
async createPushSubscription() {
// console.log('ENTER TO createPushSubscription')
// If Already subscribed, don't send to the Server DB
// if (state.wasAlreadySubOnDb) {
// // console.log('wasAlreadySubOnDb!')
@@ -574,10 +575,12 @@ export const useGlobalStore = defineStore('GlobalStore', {
return
if (!('serviceWorker' in navigator)) {
console.log('serviceWorker not present !')
return
}
if (!('PushManager' in window)) {
console.log('PushManager not present !')
return
}
@@ -1657,12 +1660,23 @@ export const useGlobalStore = defineStore('GlobalStore', {
getServerHost() {
if (this.serverHost) {
return this.serverHost
} else {
return process.env.MONGODB_HOST
let myserv = ''
myserv = window.location.host
if (process.env.DEBUGGING) {
myserv = 'http://192.168.1.54:3000'
}
if (!myserv) {
if (this.serverHost) {
myserv = this.serverHost
} else {
myserv = process.env.MONGODB_HOST!
}
}
return myserv
},