From 65a5edf26b4bf85fa54f5a44eab09f22db789692 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sun, 12 Nov 2023 11:35:36 -0700 Subject: [PATCH 1/5] allow to customize the push-server for testing --- src/App.vue | 58 +++++++++++++++++++++++++++------ src/constants/app.ts | 13 ++++++-- src/db/index.ts | 3 ++ src/db/tables/settings.ts | 2 +- src/views/AccountViewView.vue | 60 ++++++++++++++++++++++++++++++----- 5 files changed, 115 insertions(+), 21 deletions(-) diff --git a/src/App.vue b/src/App.vue index b732aee..188f689 100644 --- a/src/App.vue +++ b/src/App.vue @@ -263,19 +263,59 @@ import { Vue, Component } from "vue-facing-decorator"; import axios from "axios"; +import { AppString } from "@/constants/app"; +import { db } from "@/db/index"; +import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; + +interface Notification { + group: string; + type: string; + title: string; + text: string; +} + @Component export default class App extends Vue { + $notify!: (notification: Notification, timeout?: number) => void; + b64 = ""; - mounted() { - axios - .get("https://timesafari-pwa.anomalistlabs.com/web-push/vapid") - .then((response) => { - this.b64 = response.data.vapidKey; - console.log(this.b64); - }) - .catch((error) => { - console.error("API error", error); + + async mounted() { + try { + await db.open(); + const settings = await db.settings.get(MASTER_SETTINGS_KEY); + let pushUrl: string = AppString.DEFAULT_PUSH_SERVER; + if (settings?.pushServer) { + pushUrl = settings.pushServer; + } + + await axios.get(pushUrl + "/web-push/vapid").then((response) => { + this.b64 = response.data?.vapidKey; + console.log("Got vapid key:", this.b64); }); + if (!this.b64) { + this.$notify( + { + group: "alert", + type: "danger", + title: "Error Setting Notifications", + text: "Could not set notifications.", + }, + -1, + ); + } + } catch (error) { + console.error("Got an error initializing notifications:", error); + this.$notify( + { + group: "alert", + type: "danger", + title: "Error Setting Notifications", + text: "Got an error setting notifications.", + }, + -1, + ); + } } private askPermission(): Promise { diff --git a/src/constants/app.ts b/src/constants/app.ts index 270277d..313e472 100644 --- a/src/constants/app.ts +++ b/src/constants/app.ts @@ -4,20 +4,27 @@ * See also ../libs/veramo/setup.ts */ export enum AppString { - APP_NAME = "TimeSafari", + APP_NAME = "Time Safari", PROD_ENDORSER_API_SERVER = "https://api.endorser.ch", TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch", LOCAL_ENDORSER_API_SERVER = "http://localhost:3000", DEFAULT_ENDORSER_API_SERVER = TEST_ENDORSER_API_SERVER, + + PROD_PUSH_SERVER = "https://push.endorser.ch", + TEST_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com", + LOCAL_PUSH_SERVER = "http://localhost:3001", + + DEFAULT_PUSH_SERVER = TEST_PUSH_SERVER, } /** - * See notiwind package + * The possible values for "group" and "type" are in App.vue. + * From the notiwind package */ export interface NotificationIface { - group: string; + group: string; // "alert" | "modal" type: string; // "toast" | "info" | "success" | "warning" | "danger" title: string; text: string; diff --git a/src/db/index.ts b/src/db/index.ts index 37d6cf5..ea8556c 100644 --- a/src/db/index.ts +++ b/src/db/index.ts @@ -45,5 +45,8 @@ db.on("populate", () => { db.settings.add({ id: MASTER_SETTINGS_KEY, apiServer: AppString.DEFAULT_ENDORSER_API_SERVER, + + // remember that things you add from now on aren't automatically in the DB for old users + pushServer: AppString.DEFAULT_PUSH_SERVER, }); }); diff --git a/src/db/tables/settings.ts b/src/db/tables/settings.ts index 41196de..20c378e 100644 --- a/src/db/tables/settings.ts +++ b/src/db/tables/settings.ts @@ -20,9 +20,9 @@ export type Settings = { lastViewedClaimId?: string; // Last viewed claim ID lastNotifiedClaimId?: string; // Last notified claim ID isRegistered?: boolean; + pushServer?: string; // Push server URL // Array of named search boxes defined by bounding boxes - searchBoxes?: Array<{ name: string; bbox: BoundingBox; diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index f222fc3..9bd7c73 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -324,19 +324,55 @@ + + +
+

+ Notification Push Server +

+ + + + + @@ -346,7 +382,7 @@ From ee6a344dafe873d03efe7814566546e1d32f3c9d Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sun, 12 Nov 2023 19:03:39 -0700 Subject: [PATCH 2/5] doc: add a guess for the states of the notifications --- web-push.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web-push.md b/web-push.md index 1869d95..2ca35cd 100644 --- a/web-push.md +++ b/web-push.md @@ -390,3 +390,13 @@ While notifications are turned on, the user can tap on the App Notifications tog - "Turn off Notifications" to fully turn them off (which means the user will need to go through the dialogs agains to turn them back on). - "Leave it On" to make no changes and dismiss the dialog. + +# NOTIFICATION STATES + +* Unpermissioned. Push server cannot send notifications to the user because it does not have permission. + This may be the same as when the user gave permission in the past but has since revoked it at the OS or browser + level, outside the app. (User can change to Permissioned when the user gives permission.) +* Permissioned. (User can change to Unpermissioned via the OS or browser settings.) + * Active. (User can change to Muted when the user mutes notifications.) + * Muted. (User can change to Active when the user toggles it.) + (Turning mute off automatically after some amount of time is not planned in version 1.) From 3bf8fd0c220200a829ce3b5020bece31d4eb6a45 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 2 Dec 2023 15:28:32 -0700 Subject: [PATCH 3/5] rename "push" to "webPush" for future-proofing --- src/App.vue | 4 ++-- src/db/index.ts | 2 +- src/db/tables/settings.ts | 2 +- src/views/AccountViewView.vue | 22 +++++++++++----------- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/App.vue b/src/App.vue index 188f689..2486884 100644 --- a/src/App.vue +++ b/src/App.vue @@ -285,8 +285,8 @@ export default class App extends Vue { await db.open(); const settings = await db.settings.get(MASTER_SETTINGS_KEY); let pushUrl: string = AppString.DEFAULT_PUSH_SERVER; - if (settings?.pushServer) { - pushUrl = settings.pushServer; + if (settings?.webPushServer) { + pushUrl = settings.webPushServer; } await axios.get(pushUrl + "/web-push/vapid").then((response) => { diff --git a/src/db/index.ts b/src/db/index.ts index ea8556c..16c99d8 100644 --- a/src/db/index.ts +++ b/src/db/index.ts @@ -47,6 +47,6 @@ db.on("populate", () => { apiServer: AppString.DEFAULT_ENDORSER_API_SERVER, // remember that things you add from now on aren't automatically in the DB for old users - pushServer: AppString.DEFAULT_PUSH_SERVER, + webPushServer: AppString.DEFAULT_PUSH_SERVER, }); }); diff --git a/src/db/tables/settings.ts b/src/db/tables/settings.ts index 20c378e..0b7960c 100644 --- a/src/db/tables/settings.ts +++ b/src/db/tables/settings.ts @@ -20,7 +20,7 @@ export type Settings = { lastViewedClaimId?: string; // Last viewed claim ID lastNotifiedClaimId?: string; // Last notified claim ID isRegistered?: boolean; - pushServer?: string; // Push server URL + webPushServer?: string; // Web Push server URL // Array of named search boxes defined by bounding boxes searchBoxes?: Array<{ diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index 9bd7c73..9e29080 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -349,10 +349,10 @@ @@ -427,8 +427,8 @@ export default class AccountViewView extends Vue { numAccounts = 0; publicHex = ""; publicBase64 = ""; - pushServer = ""; - pushServerInput = ""; + webPushServer = ""; + webPushServerInput = ""; limits: RateLimits | null = null; limitsMessage = ""; loadingLimits = true; // might as well now that we do it on mount, to avoid flashing the registration message @@ -553,8 +553,8 @@ export default class AccountViewView extends Vue { (settings?.firstName || "") + (settings?.lastName ? ` ${settings.lastName}` : ""); // pre v 0.1.3 this.isRegistered = !!settings?.isRegistered; - this.pushServer = (settings?.pushServer as string) || ""; - this.pushServerInput = (settings?.pushServer as string) || ""; + this.webPushServer = (settings?.webPushServer as string) || ""; + this.webPushServerInput = (settings?.webPushServer as string) || ""; this.showContactGives = !!settings?.showContactGivesInline; } @@ -886,9 +886,9 @@ export default class AccountViewView extends Vue { async onClickSavePushServer() { await db.open(); db.settings.update(MASTER_SETTINGS_KEY, { - pushServer: this.pushServerInput, + webPushServer: this.webPushServerInput, }); - this.pushServer = this.pushServerInput; + this.webPushServer = this.webPushServerInput; } } From 681d949098386e3a1a462411f1ebd0b65f326f25 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 2 Dec 2023 15:35:44 -0700 Subject: [PATCH 4/5] update web push servers to the domains we're using --- src/constants/app.ts | 8 ++++---- src/views/AccountViewView.vue | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/constants/app.ts b/src/constants/app.ts index 313e472..f4be364 100644 --- a/src/constants/app.ts +++ b/src/constants/app.ts @@ -12,11 +12,11 @@ export enum AppString { DEFAULT_ENDORSER_API_SERVER = TEST_ENDORSER_API_SERVER, - PROD_PUSH_SERVER = "https://push.endorser.ch", - TEST_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com", - LOCAL_PUSH_SERVER = "http://localhost:3001", + PROD_PUSH_SERVER = "https://timesafari.app", + TEST1_PUSH_SERVER = "https://test.timesafari.app", + TEST2_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com", - DEFAULT_PUSH_SERVER = TEST_PUSH_SERVER, + DEFAULT_PUSH_SERVER = TEST1_PUSH_SERVER, } /** diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index 9e29080..f0ee90a 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -323,19 +323,19 @@
From 4041a7d08e9ff240c928a05e22b66d8e7f7159fb Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 2 Dec 2023 23:15:50 -0700 Subject: [PATCH 5/5] more commentary, including for blank values for the user --- CHANGELOG.md | 4 +++- README.md | 7 ++++--- src/views/AccountViewView.vue | 5 +++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3d2b26..581683a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added +- Web push notifications -## [0.1.3] - 2023.11 +## [0.1.3] - 2023.11.08 - 910f57ec7d2e50803ae3d04f4b927e0f5219fbde ### Added - Contact name editing ### Changed diff --git a/README.md b/README.md index 76c09f3..d3e6241 100644 --- a/README.md +++ b/README.md @@ -90,9 +90,10 @@ See [Configuration Reference](https://cli.vuejs.org/config/). ### Clear data & restart -Clear cache for localhost, then go to http://localhost:8080/start -(because it'll generate a new one automatically if you start on the `/account` page). - +* Clear cache for localhost, then go to http://localhost:8080/start + (because it'll generate a new one automatically if you start on the `/account` page). +* Unregister service worker (in Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers` or `about:debugging`). +* Clear notifications (in Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search). ## Other diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue index f0ee90a..08083fb 100644 --- a/src/views/AccountViewView.vue +++ b/src/views/AccountViewView.vue @@ -377,6 +377,11 @@ Use Test 2 + + When that setting is blank, this app will use the default web push + server URL: + {{ AppConstants.DEFAULT_PUSH_SERVER }} +