trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

enhance service-worker logging, allow for filtered-push test

Browse Source
This commit is contained in:
Trent Larson
2023-12-27 13:59:24 -07:00
parent 4f0a046723
commit f8d3fe2ee1
6 changed files with 85 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
project.task.yaml
View File

@@ -21,11 +21,14 @@ tasks:
https://web.dev/articles/get-installed-related-apps
- fix maskable icon
- .1 fix ability to record a give on the contacts page without a number of hours
- .2 fix the projects on /discover to show the issuer (currently all "Someone Anonymous")
- .3 bug - make or edit a project, choose "Include location", and see the map display shows on top of the bottom icons assignee-group:ui
- .5 If notifications are not enabled, add message to front page with link/button to enable
- bug - totals on contact page are not correct
- show VC details... somehow:
- 01 show my VCs - most interesting, or via search
@@ -50,7 +53,9 @@ tasks:
- 02 watch for the service worker activation before showing the button to turn on notifications
- 01 server - show all claim details when issued by the issuer
- bug - got error adding on Firefox user #0 as contact for themselves
- bug - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
- bug (that is hard to reproduce) - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
- bug (that is hard to reproduce) - in Chrome, install app then delete app and try from Chrome browser and see log errors "Uncaught TypeError: self.appendDailyLog is not a function"
- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
- 01 send visibility signal as a VC and store it
- 04 remove 'rowid' references (that are sqlite-specific); may involve server
- 04 look at other examples for better UI friend.tech
@@ -64,7 +69,6 @@ tasks:
- .5 Display a more appealing confirmation on the map when erasing the marker
- .5 include the hash of the latest commit on help page next to version (maybe Trent's git-hash branch)
- .5 remove references to localStorage for projectId (now that it's pulling from the path)
- bug (that is hard to reproduce) - on the second 'give' recorded on prod it showed me as the agent
- switch some checks for activeDid to check for isRegistered
- .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"
- .5 fix cert generation on server (since it didn't happen automatically for Nov 30)

2
src/App.vue
View File

@@ -534,7 +534,7 @@ export default class App extends Vue {
private sendSubscriptionToServer(
subscription: PushSubscription,
): Promise<void> {
console.log("About to send subscription", subscription);
console.log("About to send subscription...", subscription);
return fetch("/web-push/subscribe", {
method: "POST",
headers: {

4
src/views/AccountViewView.vue
View File

@@ -134,7 +134,7 @@
latest setting.
</div>
<router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
Troubleshoot notifications here.
Test your notification setup.
</router-link>
</div>
@@ -297,7 +297,7 @@
:to="{ name: 'statistics' }"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
See Global Animated History of Giving
See Animated Global History of Giving
</router-link>
<!-- id used by puppeteer test script -->

52
src/views/HelpNotificationsView.vue
View File

@@ -29,10 +29,11 @@
<p>
If this works then you're all set.
<button
@click="sendTestWebPushMessage()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
@click="sendTestWebPushMessage(true)"
class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Send Yourself a Test Web Push Message
Send Yourself a Test Web Push Message (Through Push Server but
Skipping Client Filter)
</button>
</p>
</div>
@@ -40,10 +41,10 @@
<h2 class="text-xl font-semibold">If this app is not installed...</h2>
<div>
<p>
For best results, install this app on your device. In Chrome, it may
prompt you, and you can also look for the "Install" command in the
browser settings (as opposed to using it inside the broser app); on
the deskop, look for this icon in the address bar:
For best results on mobile, install this app on your device (as
opposed to using it inside the broser app). In Chrome, it may prompt
you, and you can also look for the "Install" command in the browser
settings; on the the deskop, look for this icon in the address bar:
<img
src="../assets/help/chrome-install-pwa.png"
alt="Chrome 'install' icon"
@@ -192,23 +193,32 @@
<button
@click="showTestNotification()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Send Test Notification Directly to Device
Send Test Notification Directly to Device (Not Through Push Server)
</button>
<button
@click="alertWebPushSubscription()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Show Web Push Subscription Info
</button>
<button
@click="sendTestWebPushMessage()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
@click="sendTestWebPushMessage(true)"
class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Send Yourself a Test Web Push Message
Send Yourself a Test Web Push Message (Through Push Server but Skipping
Client Filter)
</button>
<button
@click="sendTestWebPushMessage()"
class="block w-full text-center text-md bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Send Yourself a Test Web Push Message (Through Push Server and Client
Filter)
</button>
</div>
</section>
@@ -255,7 +265,7 @@ export default class HelpNotificationsView extends Vue {
alert(JSON.stringify(this.subscription));
}
async sendTestWebPushMessage() {
async sendTestWebPushMessage(skipFilter: boolean = false) {
if (!this.subscription) {
this.$notify(
{
@@ -277,6 +287,7 @@ export default class HelpNotificationsView extends Vue {
pushUrl = settings.webPushServer;
}
// This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
// This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
// Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
@@ -299,8 +310,10 @@ export default class HelpNotificationsView extends Vue {
auth: authB64,
p256dh: p256dhB64,
},
message: "This is a test message, triggered by you.",
title: DIRECT_PUSH_TITLE,
message: `Test, where you will see this message ${
skipFilter ? "un" : ""
}filtered.`,
title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
};
console.log("Sending a test web push message:", newPayload);
const payloadStr = JSON.stringify(newPayload);
@@ -321,7 +334,7 @@ export default class HelpNotificationsView extends Vue {
group: "alert",
type: "success",
title: "Test Web Push Sent",
text: "Check your device for the test web push message.",
text: "Check your device for the test web push message, depending on the filtering you chose.",
},
-1,
);
@@ -340,9 +353,10 @@ export default class HelpNotificationsView extends Vue {
}
showTestNotification() {
const TEST_NOTIFICATION_TITLE = "It Worked";
navigator.serviceWorker.ready
.then((registration) => {
return registration.showNotification("It Worked", {
return registration.showNotification(TEST_NOTIFICATION_TITLE, {
body: "This is your test notification.",
});
})
@@ -352,7 +366,7 @@ export default class HelpNotificationsView extends Vue {
group: "alert",
type: "success",
title: "Sent",
text: "A notification was triggered, so one should show on your device soon.",
text: `A notification was triggered, so one should show on your device entitled '${TEST_NOTIFICATION_TITLE}'.`,
},
5000,
);

60
sw_scripts/additional-scripts.js
View File

@@ -4,19 +4,10 @@ importScripts(
"https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js",
);
self.addEventListener("install", (event) => {
console.log("Service worker got install. Importing scripts...", event);
importScripts(
"safari-notifications.js",
"nacl.js",
"noble-curves.js",
"noble-hashes.js",
);
console.log("Service worker imported scripts.");
});
function logConsoleAndDb(message, arg1, arg2) {
// in chrome://serviceworker-internals note that the arg1 and arg2 here will show as "[object Object]" in that page but will show as expandable objects in the console
console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
if (self.appendDailyLog) {
let fullMessage = `${new Date().toISOString()} ${message}`;
if (arg1) {
fullMessage += `\n${JSON.stringify(arg1)}`;
@@ -25,8 +16,32 @@ function logConsoleAndDb(message, arg1, arg2) {
fullMessage += `\n${JSON.stringify(arg2)}`;
}
self.appendDailyLog(fullMessage);
} else {
// sometimes we get the error: "Uncaught TypeError: self.appendDailyLog is not a function"
console.log("Not logging to DB because self.appendDailyLog doesn't exist.");
}
}
self.addEventListener("install", async (event) => {
console.log("Service worker got install event. Importing scripts...", event);
await importScripts(
"safari-notifications.js",
"nacl.js",
"noble-curves.js",
"noble-hashes.js",
);
// this should now be available
logConsoleAndDb("Service worker imported all scripts.");
});
self.addEventListener("activate", (event) => {
logConsoleAndDb("Service worker is activating...", event);
// see https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim
// and https://web.dev/articles/service-worker-lifecycle#clientsclaim
event.waitUntil(clients.claim());
logConsoleAndDb("Service worker is activated.");
});
self.addEventListener("push", function (event) {
let text = null;
if (event.data) {
@@ -45,18 +60,27 @@ self.addEventListener("push", function (event) {
}
}
// This is a special value that tells the service worker that it's a daily update.
const DAILY_UPDATE_TITLE = "DAILY_UPDATE";
// This is a special value that tells the service worker to send a direct notification to the device, skipping filters.
// This is shared with the notification-test code and should be a constant. Look for the same name in HelpNotificationsView.vue
// Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
let title = "Generic Notification";
let title;
let message = "Got some empty message.";
if (payload && payload.title == DIRECT_PUSH_TITLE) {
// skip any search logic and show the message directly
title = "Direct Message";
title = "Direct Notification";
message = payload.message || "No details were provided.";
} else {
title = payload && payload.title ? payload.title : "Note";
// any other title will run through regular filtering logic
if (payload && payload.title === DAILY_UPDATE_TITLE) {
title = "Daily Update";
} else {
title = payload.title || "Update";
}
message = await self.getNotificationCount();
}
if (message) {
@@ -86,14 +110,6 @@ self.addEventListener("message", (event) => {
logConsoleAndDb("Service worker posted a message.");
});
self.addEventListener("activate", (event) => {
logConsoleAndDb("Service worker activating...", event);
// see https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim
// and https://web.dev/articles/service-worker-lifecycle#clientsclaim
event.waitUntil(clients.claim());
logConsoleAndDb("Service worker is activated.");
});
self.addEventListener("fetch", (event) => {
logConsoleAndDb("Service worker got fetch event.", event);
});

1
sw_scripts/safari-notifications.js
View File

@@ -565,5 +565,6 @@ async function getNotificationCount() {
return result;
}
self.appendDailyLog = appendDailyLog;
self.getNotificationCount = getNotificationCount;
self.decodeBase64 = decodeBase64;