-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #916 from /issues/739
Issues/739
- Loading branch information
Showing
9 changed files
with
347 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ | ||
| "use strict"; | ||
|
|
||
| self.addEventListener("install", function () { | ||
|
|
||
| console.log("Service worker installing..."); | ||
| // Add a call to skipWaiting here | ||
| }); | ||
|
|
||
| self.addEventListener("activate", function () { | ||
| console.log("Service Worker actives"); | ||
| }); | ||
|
|
||
| self.addEventListener('notificationclick', function (e) { | ||
| clients.openWindow(e.action); | ||
| }); | ||
|
|
||
| self.addEventListener("push", function (e) { | ||
|
|
||
| // var options = { | ||
| // body: body, | ||
| // icon: "/mstile-150x150.png", | ||
| // image: "", | ||
| // vibrate: [100, 50, 100], | ||
| // sound: "clip", | ||
| // data: { | ||
| // dateOfArrival: Date.now(), | ||
| // primaryKey: 1, | ||
| // }, | ||
| // actions: [ | ||
| // { | ||
| // action: "explore", | ||
| // title: "Explore this new world", | ||
|
|
||
| // }, | ||
| // { | ||
| // action: "close", | ||
| // title: "I don't want any of this", | ||
|
|
||
| // }, | ||
| // ], | ||
| // }; | ||
| e.waitUntil(self.registration.showNotification("Push Notification", e.data.json())); | ||
| }); | ||
|
|
||
| },{}]},{},[1]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
217 changes: 217 additions & 0 deletions
217
src/components/participant/ActionInputs/PushNotification.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,217 @@ | ||
| <template> | ||
| <b-card no-body class="action-wrap"> | ||
| <b-card-header | ||
| :class="visible ? null : 'collapsed'" | ||
| :aria-expanded="visible ? 'true' : 'false'" | ||
| :aria-controls="`collapse-${idValue}`" | ||
| @click="visible = !visible" | ||
| > | ||
| <b-row> | ||
| <b-col cols="1" sm="1" md="1"> | ||
| <img src="../../../assets/file.svg" height="25px" /> | ||
| </b-col> | ||
| <b-col cols="9" sm="9" class="text-left" md="9"> | ||
| <div class="text text-capitalize">{{ data.title }}</div> | ||
| </b-col> | ||
| <b-col cols="2" sm="2" md="2"> | ||
| <b-badge class="btn-score" @click="update()" v-if="!done"> | ||
| <img src="../../../assets/plus.svg" /> | ||
| {{ data.score }} | ||
| </b-badge> | ||
| <img | ||
| class="check-mark" | ||
| src="../../../assets/check-circle-fill.svg" | ||
| height="25px" | ||
| v-if="done" | ||
| /> | ||
| </b-col> | ||
| </b-row> | ||
| </b-card-header> | ||
| <b-collapse :id="`collapse-${idValue}`" v-model="visible"> | ||
| <b-card-body class="user-details"> | ||
| <b-row> | ||
| <b-col cols="12" sm="12" md="12"> | ||
| <div class="follow"> | ||
| <!-- <b-form-input | ||
| type="text" | ||
| :placeholder="data.placeHolder" | ||
| v-model="data.value" | ||
| :disabled="done" | ||
| :required="data.isManadatory" | ||
| ></b-form-input> --> | ||
| <button | ||
| :disabled="done" | ||
| class="btn btn-outline-twitter text-black" | ||
| @click="getBrowserSubscription()" | ||
| > | ||
| Subscribe | ||
| </button> | ||
| </div> | ||
| </b-col> | ||
| </b-row> | ||
| <b-row v-if="!done"> | ||
| <b-col cols="12" sm="12" md="12"> | ||
| <button class="btn btn-link center" @click="update()"> | ||
| Continue | ||
| </button> | ||
| </b-col> | ||
| </b-row> | ||
| </b-card-body> | ||
| </b-collapse> | ||
| </b-card> | ||
| </template> | ||
| <style scoped> | ||
| .center { | ||
| display: block; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| </style> | ||
|
|
||
| <script> | ||
| import eventBus from "../../../eventBus.js"; | ||
| import { isValidURL, isEmpty } from "../../../mixins/fieldValidationMixin"; | ||
| import notificationMixins from "../../../mixins/notificationMixins"; | ||
| import Messages from "../../../utils/messages/participants/en"; | ||
| import config from "../../../config"; | ||
| export default { | ||
| name: "PushNotification", | ||
| props: { | ||
| idValue: { | ||
| required: true, | ||
| }, | ||
| data: { | ||
| required: true, | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| visible: false, | ||
| done: this.data.isDone, | ||
| }; | ||
| }, | ||
| mounted() { | ||
| if (this.$route.query) { | ||
| if (this.$route.query.subsId === localStorage.getItem("subsId")) { | ||
| this.data.value = "Subscribed"; | ||
| this.giveScore(); | ||
| } | ||
| } | ||
| eventBus.$on(`disableInput${this.data._id}`, this.disableInput); | ||
| }, | ||
| methods: { | ||
| async giveScore() { | ||
| if (!this.isFieldValid()) { | ||
| this.data.value = ""; | ||
| return this.notifyErr(Messages.EVENT_ACTIONS.INVALID_INPUT); | ||
| } else { | ||
| this.$emit("input", this.data.value); | ||
| } | ||
| }, | ||
| async update() { | ||
| const response = await fetch( | ||
| config.studioServer.BASE_URL + "api/v1/push/verifyNotification", | ||
| { | ||
| method: "post", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Authorization: `Bearer ${localStorage.getItem("authToken")}`, | ||
| }, | ||
| body: JSON.stringify({ | ||
| subObj: this.data.subObj, | ||
| id: this.data.subscription._id, | ||
| url: location.href, | ||
| }), | ||
| } | ||
| ); | ||
| return response.json() | ||
| }, | ||
| isFieldValid() { | ||
| if (isEmpty(this.data.value)) { | ||
| return false; | ||
| } | ||
| if (isValidURL(this.data.value)) { | ||
| return false; | ||
| } | ||
| return true; | ||
| }, | ||
| disableInput(data) { | ||
| this.done = data; | ||
| }, | ||
| async saveSubscription(subscription) { | ||
| const response = await fetch( | ||
| config.studioServer.BASE_URL + "api/v1/push/subscribe", | ||
| { | ||
| method: "post", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| Authorization: `Bearer ${localStorage.getItem("authToken")}`, | ||
| }, | ||
| body: JSON.stringify({ subObj: subscription }), | ||
| } | ||
| ); | ||
| return response.json(); | ||
| }, | ||
| urlB64ToUint8Array(base64String) { | ||
| const padding = "=".repeat((4 - (base64String.length % 4)) % 4); | ||
| const base64 = (base64String + padding) | ||
| // eslint-disable-next-line no-useless-escape | ||
| .replace(/\-/g, "+") | ||
| .replace(/_/g, "/"); | ||
| const rawData = atob(base64); | ||
| const outputArray = new Uint8Array(rawData.length); | ||
| for (let i = 0; i < rawData.length; ++i) { | ||
| outputArray[i] = rawData.charCodeAt(i); | ||
| } | ||
| return outputArray; | ||
| }, | ||
| async getBrowserSubscription() { | ||
| if ("Notification" in window && navigator.serviceWorker) { | ||
| const permission = await Notification.requestPermission(); | ||
| if (permission === "granted") { | ||
| this.notifySuccess("Notification Granted"); | ||
| try { | ||
| await navigator.serviceWorker | ||
| .register(`/service-worker.js`, { scope: "/" }) | ||
| .then(async () => { | ||
| return await navigator.serviceWorker.ready; | ||
| }) | ||
| .then(async (reg) => { | ||
| const applicationServerKey = await this.urlB64ToUint8Array( | ||
| config.webpush_public_key | ||
| ); | ||
| reg.addEventListener("updatefound", () => { | ||
| reg.update() | ||
| }); | ||
| reg.pushManager | ||
| .subscribe({ applicationServerKey, userVisibleOnly: true }) | ||
| .then(async (e) => { | ||
| // console.log(JSON.stringify(e)); | ||
| this.data.subObj = e; | ||
| this.data.subscription = await this.saveSubscription(e); | ||
| localStorage.setItem("subsId", this.data.subscription._id); | ||
| }); | ||
| }); | ||
| await this.notifySuccess("Registerd"); | ||
| } catch (error) { | ||
| console.log(error); | ||
| return this.notifyErr("Service Worker Registration Faild"); | ||
| } | ||
| } else if (permission === "blocked" || permission === "denied") { | ||
| return this.notifyErr("Notification Blocked"); | ||
| } | ||
| } else { | ||
| return this.notifyErr("Notification Not Supported"); | ||
| } | ||
| }, | ||
| }, | ||
| mixins: [notificationMixins], | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,3 +64,5 @@ new Vue({ | |
| router, | ||
| render: (h) => h(App), | ||
| }).$mount("#app"); | ||
|
|
||
|
|
||
Oops, something went wrong.