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

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,
);