From 3e667f0d2b8ccf81aa37b945f39d754675a9bb3b Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 20:05:20 -0300 Subject: [PATCH 01/14] setting up environment variables Signed-off-by: Ezequiel --- .env.example | 8 ++++++++ .gitignore | 3 +++ package.json | 1 + quasar.conf.js | 11 +++++++++++ 4 files changed, 23 insertions(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..272feb8 --- /dev/null +++ b/.env.example @@ -0,0 +1,8 @@ +API_KEY=api_key +AUTH_DOMAIN=auth_domain +DATABASE_URL=database_url +PROJECT_ID=project_id +STORAGE_BUCKET=storage_bucket +MESSAGE_SENDER_ID=message_sender_id +APP_ID=app_id +KEY_SERVER=key_server \ No newline at end of file diff --git a/.gitignore b/.gitignore index 313c425..dbd27d9 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,6 @@ yarn-error.log* *.ntvs* *.njsproj *.sln + +# environment variable +.env diff --git a/package.json b/package.json index a8c26fa..c03e60b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "es6-promise": "^4.2.8", "leaflet": "^1.6.0", "quasar": "^1.0.0", + "quasar-dotenv": "^1.0.5", "vue-axios": "^2.1.5", "vue2-leaflet": "^2.4.2", "vuex": "^3.1.2" diff --git a/quasar.conf.js b/quasar.conf.js index 39575f6..7d7cc35 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -1,5 +1,6 @@ // Configuration for your app // https://quasar.dev/quasar-cli/quasar-conf-js +const env = require('quasar-dotenv').config() module.exports = function (ctx) { return { @@ -55,6 +56,7 @@ module.exports = function (ctx) { // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build build: { + env: env, scopeHoisting: true, // vueRouterMode: 'history', // showProgress: false, @@ -65,6 +67,15 @@ module.exports = function (ctx) { // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack extendWebpack (cfg) { + cfg.module.rules.push({ + enforce: 'pre', + test: /\.(js|vue)$/, + loader: 'eslint-loader', + exclude: /node_modules/, + options: { + formatter: require('eslint').CLIEngine.getFormatter('stylish') + } + }) } }, From 8e002f95ba7599c1c509b2783ec91f3358600d31 Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 20:09:14 -0300 Subject: [PATCH 02/14] Added axios service for firebase Signed-off-by: Ezequiel --- src/services/firebaseAPI/http-common.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/services/firebaseAPI/http-common.js diff --git a/src/services/firebaseAPI/http-common.js b/src/services/firebaseAPI/http-common.js new file mode 100644 index 0000000..89848c5 --- /dev/null +++ b/src/services/firebaseAPI/http-common.js @@ -0,0 +1,8 @@ +import axios from 'axios' + +const FIREBASEAPI = axios.create({ + baseURL: 'https://iid.googleapis.com/iid/v1/', + headers: { 'Authorization': `key=${process.env.KEY_SERVER}`} +}) + +export default FIREBASEAPI From 805bde51139f124d80fcc7d31ccb5bf28c907d7b Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 20:22:54 -0300 Subject: [PATCH 03/14] Added initial configuration for firebase Signed-off-by: Ezequiel --- package.json | 1 + quasar.conf.js | 9 +++++---- src/boot/firebase.js | 18 ++++++++++++++++++ 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 src/boot/firebase.js diff --git a/package.json b/package.json index c03e60b..239f714 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@quasar/extras": "^1.0.0", "axios": "^0.19.1", "es6-promise": "^4.2.8", + "firebase": "^7.9.2", "leaflet": "^1.6.0", "quasar": "^1.0.0", "quasar-dotenv": "^1.0.5", diff --git a/quasar.conf.js b/quasar.conf.js index 7d7cc35..c1cfca5 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -100,9 +100,9 @@ module.exports = function (ctx) { // workboxPluginMode: 'InjectManifest', // workboxOptions: {}, // only for NON InjectManifest manifest: { - // name: 'SMI', - // short_name: 'SMI', - // description: 'A Quasar Framework app', + name: 'SMI', + short_name: 'SMI', + description: 'Sistema de Monitoramento de Insumos - Universidade de Brasília.', display: 'standalone', orientation: 'portrait', background_color: '#ffffff', @@ -133,7 +133,8 @@ module.exports = function (ctx) { 'sizes': '512x512', 'type': 'image/png' } - ] + ], + gcm_sender_id: "103953800507" } }, diff --git a/src/boot/firebase.js b/src/boot/firebase.js new file mode 100644 index 0000000..c3ffd5d --- /dev/null +++ b/src/boot/firebase.js @@ -0,0 +1,18 @@ +import * as firebase from 'firebase/app' +import 'firebase/messaging' + +export default ({ Vue }) => { + var config = { + apiKey: process.env.API_KEY, + authDomain: process.env.AUTH_DOMAIN, + databaseURL: process.env.DATABASE_URL, + projectId: process.env.PROJECT_ID, + storageBucket: process.env.STORAGE_BUCKET, + messagingSenderId: process.env.MESSAGE_SENDER_ID, + appId: process.env.APP_ID + } + + firebase.initializeApp(config) + + Vue.prototype.$firebase = firebase +} \ No newline at end of file From 771a39f65c59507d6e4ebce50fc906038dada0e5 Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 21:40:06 -0300 Subject: [PATCH 04/14] Added service worker for firebase Signed-off-by: Ezequiel --- quasar.conf.js | 12 ++++++++++++ src-pwa/firebase-messaging-sw.js | 22 ++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src-pwa/firebase-messaging-sw.js diff --git a/quasar.conf.js b/quasar.conf.js index c1cfca5..5af4c3a 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -76,6 +76,18 @@ module.exports = function (ctx) { formatter: require('eslint').CLIEngine.getFormatter('stylish') } }) + }, + chainWebpack(chain) { + if (ctx.mode.pwa) { + chain + .plugin('copy-static-files') + .use(require('copy-webpack-plugin'), [ + [{ + from: 'src-pwa/firebase-messaging-sw.js', + to: '', + }] + ]) + } } }, diff --git a/src-pwa/firebase-messaging-sw.js b/src-pwa/firebase-messaging-sw.js new file mode 100644 index 0000000..812dfbb --- /dev/null +++ b/src-pwa/firebase-messaging-sw.js @@ -0,0 +1,22 @@ +importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js'); +importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-messaging.js'); +//importScripts('env-sw.js'); + +var firebaseConfig = { + apiKey: process.env.API_KEY, + authDomain: process.env.AUTH_DOMAIN, + databaseURL: process.env.DATABASE_URL, + projectId: process.env.PROJECT_ID, + storageBucket: process.env.STORAGE_BUCKET, + messagingSenderId: process.env.MESSAGE_SENDER_ID, + appId: process.env.APP_ID +}; + +firebase.initializeApp(firebaseConfig); + +if (firebase.messaging.isSupported()) { + + const messaging = firebase.messaging(); + +} + From 122395e4f976eaffe96d0c940fc39cd172d26780 Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 21:51:37 -0300 Subject: [PATCH 05/14] Request user permission Signed-off-by: Ezequiel --- .env.example | 3 +- quasar.conf.js | 4 +++ src/boot/firebase.js | 2 +- src/pages/Index.vue | 47 +++++++++++++++++++++++++ src/services/firebaseAPI/http-common.js | 2 +- 5 files changed, 55 insertions(+), 3 deletions(-) diff --git a/.env.example b/.env.example index 272feb8..a8408ab 100644 --- a/.env.example +++ b/.env.example @@ -5,4 +5,5 @@ PROJECT_ID=project_id STORAGE_BUCKET=storage_bucket MESSAGE_SENDER_ID=message_sender_id APP_ID=app_id -KEY_SERVER=key_server \ No newline at end of file +KEY_SERVER=key_server +VAPID_KEY=public_vapid_key \ No newline at end of file diff --git a/quasar.conf.js b/quasar.conf.js index 5af4c3a..fe5d51b 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -8,6 +8,10 @@ module.exports = function (ctx) { // --> boot files are part of "main.js" // https://quasar.dev/quasar-cli/cli-documentation/boot-files boot: [ + { + path: 'firebase', + server: false + } ], preFetch: true, diff --git a/src/boot/firebase.js b/src/boot/firebase.js index c3ffd5d..b96cfc4 100644 --- a/src/boot/firebase.js +++ b/src/boot/firebase.js @@ -15,4 +15,4 @@ export default ({ Vue }) => { firebase.initializeApp(config) Vue.prototype.$firebase = firebase -} \ No newline at end of file +} diff --git a/src/pages/Index.vue b/src/pages/Index.vue index 13809d3..faa7650 100644 --- a/src/pages/Index.vue +++ b/src/pages/Index.vue @@ -58,6 +58,7 @@ import pageHeader from '../components/pageHeader.vue' import occurences from '../components/occurences.vue' import transducerList from '../components/transducerList.vue' import setting from '../components/setting.vue' +// import { mapActions } from 'vuex' export default { name: 'PageIndex', @@ -73,6 +74,52 @@ export default { return { tab: 'occurences' } + }, + + methods: { + // ...mapActions('storedData', ['togglePermission', 'saveToken']) + }, + + mounted () { + if (this.$firebase.messaging.isSupported()) { + const messaging = this.$firebase.messaging() + + messaging.usePublicVapidKey( + process.env.VAPID_KEY + ) + + messaging + .requestPermission() + .then(() => { + console.log('Notification permission granted.') + messaging.getToken().then(token => { + console.log('New token created: ', token) + // this.saveToken(token) + // this.togglePermission(true) + }) + }) + .catch(err => { + console.log('Unable to get permission to notify.', err) + // this.togglePermission(false) + }) + + messaging.onTokenRefresh(function () { + messaging + .getToken() + .then(function (newToken) { + console.log('Token refreshed: ', newToken) + // this.saveToken(newToken) + // this.togglePermission(true) + }) + .catch(function (err) { + console.log('Unable to retrieve refreshed token ', err) + // this.togglePermission(false) + }) + }) + } else { + // this.saveToken(this.$route.query.token) + console.log('token was saved from query') + } } } diff --git a/src/services/firebaseAPI/http-common.js b/src/services/firebaseAPI/http-common.js index 89848c5..d84c269 100644 --- a/src/services/firebaseAPI/http-common.js +++ b/src/services/firebaseAPI/http-common.js @@ -2,7 +2,7 @@ import axios from 'axios' const FIREBASEAPI = axios.create({ baseURL: 'https://iid.googleapis.com/iid/v1/', - headers: { 'Authorization': `key=${process.env.KEY_SERVER}`} + headers: { 'Authorization': `key=${process.env.KEY_SERVER}` } }) export default FIREBASEAPI From 769b2cd20b3f34f8d01f225a7280f0c960c4e187 Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 22:42:48 -0300 Subject: [PATCH 06/14] providing environment variables for firebase service worker Signed-off-by: Ezequiel --- .gitignore | 1 + quasar.conf.js | 9 +++++++++ src-pwa/firebase-messaging-sw.js | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index dbd27d9..34993d2 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,4 @@ yarn-error.log* # environment variable .env +/src-pwa/env-sw.js \ No newline at end of file diff --git a/quasar.conf.js b/quasar.conf.js index fe5d51b..b65d5ff 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -1,7 +1,12 @@ // Configuration for your app // https://quasar.dev/quasar-cli/quasar-conf-js +const fs = require('fs') const env = require('quasar-dotenv').config() +fs.writeFileSync('./src-pwa/env-sw.js', `const process = ${JSON.stringify({ + env: env +}, null, 2)}`) + module.exports = function (ctx) { return { // app boot file (/src/boot) @@ -89,6 +94,10 @@ module.exports = function (ctx) { [{ from: 'src-pwa/firebase-messaging-sw.js', to: '', + }, + { + from: 'src-pwa/env-sw.js', + to: '', }] ]) } diff --git a/src-pwa/firebase-messaging-sw.js b/src-pwa/firebase-messaging-sw.js index 812dfbb..23b95ae 100644 --- a/src-pwa/firebase-messaging-sw.js +++ b/src-pwa/firebase-messaging-sw.js @@ -1,6 +1,6 @@ importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.7.0/firebase-messaging.js'); -//importScripts('env-sw.js'); +importScripts('env-sw.js'); var firebaseConfig = { apiKey: process.env.API_KEY, From 677b16d65a3856927ef572eefcd7c5d29d8d9f1f Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 22:50:58 -0300 Subject: [PATCH 07/14] Added function to receive push Signed-off-by: Ezequiel --- src-pwa/firebase-messaging-sw.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src-pwa/firebase-messaging-sw.js b/src-pwa/firebase-messaging-sw.js index 23b95ae..a832d42 100644 --- a/src-pwa/firebase-messaging-sw.js +++ b/src-pwa/firebase-messaging-sw.js @@ -20,3 +20,25 @@ if (firebase.messaging.isSupported()) { } +// if event listener receive a notification object in background it show more than one push +self.addEventListener('push', function(event) { + console.log('[Service Worker] Push Received.'); + console.log('[Service Worker] Push had this data:', event.data.json().data['title']); + + const title = event.data.json().data['title']; + const options = { + body: event.data.json().data['body'], + icon: '/statics/icons/icon-512x512.png', + badge: '/statics/icons/notification-96x96.png', + vibrate: [100,50,100] + }; + + event.waitUntil(self.registration.showNotification(title, options)); +}); + + +self.addEventListener('notificationclick', function(event) { + event.notification.close(); + clients.openWindow("https://smi-mobile.firebaseapp.com"); + //handle click event onClick on Web Push Notification +}); From 6b926b56679a197586d57cab457087a94b17e5a0 Mon Sep 17 00:00:00 2001 From: Ezequiel Date: Fri, 28 Feb 2020 23:26:40 -0300 Subject: [PATCH 08/14] modularization of vuex, improving architecture and creating module necessary Signed-off-by: Ezequiel --- .gitignore | 3 ++ src/components/pageHeader.vue | 5 +- src/components/transducerList.vue | 6 ++- src/store/index.js | 19 +++----- src/store/module-campus/actions.js | 7 +++ src/store/module-campus/getters.js | 5 ++ src/store/module-campus/index.js | 18 +++++++ src/store/module-campus/mutations.js | 7 +++ src/store/module-notification/actions.js | 12 +++++ src/store/module-notification/getters.js | 17 +++++++ src/store/module-notification/index.js | 17 +++++++ src/store/module-notification/mutations.js | 57 ++++++++++++++++++++++ 12 files changed, 158 insertions(+), 15 deletions(-) create mode 100644 src/store/module-campus/actions.js create mode 100644 src/store/module-campus/getters.js create mode 100644 src/store/module-campus/index.js create mode 100644 src/store/module-campus/mutations.js create mode 100644 src/store/module-notification/actions.js create mode 100644 src/store/module-notification/getters.js create mode 100644 src/store/module-notification/index.js create mode 100644 src/store/module-notification/mutations.js diff --git a/.gitignore b/.gitignore index 34993d2..e7b546b 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,9 @@ node_modules yarn.lock package-lock.json +src-pwa/pwa-flag.d.ts +src-ssr/ssr-flag.d.ts +src/store/store-flag.d.ts # Quasar core related directories .quasar diff --git a/src/components/pageHeader.vue b/src/components/pageHeader.vue index b7b17f0..b655b4e 100644 --- a/src/components/pageHeader.vue +++ b/src/components/pageHeader.vue @@ -31,6 +31,8 @@