commit: 73fbe89a4b4e545796e9cc6aae707de0a4eed3a1
parent 4c11ac9a27696a7fe57eeb486257d8f7c1295548
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 25 Oct 2023 18:58:33 +0300
initial work on showing notifications through serviceworkers
Diffstat:
6 files changed, 161 insertions(+), 124 deletions(-)
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -16,6 +16,7 @@ import backendInteractorService from '../services/backend_interactor_service/bac
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js'
+import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
let staticInitialResults = null
@@ -344,6 +345,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
store.dispatch('setLayoutHeight', windowHeight())
FaviconService.initFaviconService()
+ initServiceWorker()
+
+ window.addEventListener('focus', () => updateFocus())
const overrides = window.___pleromafe_dev_overrides || {}
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
diff --git a/src/modules/users.js b/src/modules/users.js
@@ -2,7 +2,7 @@ import backendInteractorService from '../services/backend_interactor_service/bac
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
import oauthApi from '../services/new_api/oauth.js'
import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
+import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
// TODO: Unify with mergeOrAdd in statuses.js
export const mergeOrAdd = (arr, obj, item) => {
diff --git a/src/services/desktop_notification_utils/desktop_notification_utils.js b/src/services/desktop_notification_utils/desktop_notification_utils.js
@@ -1,9 +1,8 @@
+import { showDesktopNotification as swDesktopNotification } from '../sw/sw.js'
+
export const showDesktopNotification = (rootState, desktopNotificationOpts) => {
if (!('Notification' in window && window.Notification.permission === 'granted')) return
if (rootState.statuses.notifications.desktopNotificationSilence) { return }
- const desktopNotification = new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
- // Chrome is known for not closing notifications automatically
- // according to MDN, anyway.
- setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
+ swDesktopNotification(desktopNotificationOpts)
}
diff --git a/src/services/push/push.js b/src/services/push/push.js
@@ -1,111 +0,0 @@
-import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
-
-function urlBase64ToUint8Array (base64String) {
- const padding = '='.repeat((4 - base64String.length % 4) % 4)
- const base64 = (base64String + padding)
- .replace(/-/g, '+')
- .replace(/_/g, '/')
-
- const rawData = window.atob(base64)
- return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
-}
-
-function isPushSupported () {
- return 'serviceWorker' in navigator && 'PushManager' in window
-}
-
-function getOrCreateServiceWorker () {
- return runtime.register()
- .catch((err) => console.error('Unable to get or create a service worker.', err))
-}
-
-function subscribePush (registration, isEnabled, vapidPublicKey) {
- if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
- if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
-
- const subscribeOptions = {
- userVisibleOnly: true,
- applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
- }
- return registration.pushManager.subscribe(subscribeOptions)
-}
-
-function unsubscribePush (registration) {
- return registration.pushManager.getSubscription()
- .then((subscribtion) => {
- if (subscribtion === null) { return }
- return subscribtion.unsubscribe()
- })
-}
-
-function deleteSubscriptionFromBackEnd (token) {
- return window.fetch('/api/v1/push/subscription/', {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`
- }
- }).then((response) => {
- if (!response.ok) throw new Error('Bad status code from server.')
- return response
- })
-}
-
-function sendSubscriptionToBackEnd (subscription, token, notificationVisibility) {
- return window.fetch('/api/v1/push/subscription/', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${token}`
- },
- body: JSON.stringify({
- subscription,
- data: {
- alerts: {
- follow: notificationVisibility.follows,
- favourite: notificationVisibility.likes,
- mention: notificationVisibility.mentions,
- reblog: notificationVisibility.repeats,
- move: notificationVisibility.moves
- }
- }
- })
- }).then((response) => {
- if (!response.ok) throw new Error('Bad status code from server.')
- return response.json()
- }).then((responseData) => {
- if (!responseData.id) throw new Error('Bad response from server.')
- return responseData
- })
-}
-
-export function registerPushNotifications (isEnabled, vapidPublicKey, token, notificationVisibility) {
- if (isPushSupported()) {
- getOrCreateServiceWorker()
- .then((registration) => subscribePush(registration, isEnabled, vapidPublicKey))
- .then((subscription) => sendSubscriptionToBackEnd(subscription, token, notificationVisibility))
- .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
- }
-}
-
-export function unregisterPushNotifications (token) {
- if (isPushSupported()) {
- Promise.all([
- deleteSubscriptionFromBackEnd(token),
- getOrCreateServiceWorker()
- .then((registration) => {
- return unsubscribePush(registration).then((result) => [registration, result])
- })
- .then(([registration, unsubResult]) => {
- if (!unsubResult) {
- console.warn('Push subscription cancellation wasn\'t successful, killing SW anyway...')
- }
- return registration.unregister().then((result) => {
- if (!result) {
- console.warn('Failed to kill SW')
- }
- })
- })
- ]).catch((e) => console.warn(`Failed to disable Web Push Notifications: ${e.message}`))
- }
-}
diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
@@ -0,0 +1,124 @@
+import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
+
+function urlBase64ToUint8Array (base64String) {
+ const padding = '='.repeat((4 - base64String.length % 4) % 4)
+ const base64 = (base64String + padding)
+ .replace(/-/g, '+')
+ .replace(/_/g, '/')
+
+ const rawData = window.atob(base64)
+ return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
+}
+
+function isSWSupported () {
+ return 'serviceWorker' in navigator
+}
+
+function isPushSupported () {
+ return 'PushManager' in window
+}
+
+function getOrCreateServiceWorker () {
+ return runtime.register()
+ .catch((err) => console.error('Unable to get or create a service worker.', err))
+}
+
+function subscribePush (registration, isEnabled, vapidPublicKey) {
+ if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
+ if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
+
+ const subscribeOptions = {
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
+ }
+ return registration.pushManager.subscribe(subscribeOptions)
+}
+
+function unsubscribePush (registration) {
+ return registration.pushManager.getSubscription()
+ .then((subscribtion) => {
+ if (subscribtion === null) { return }
+ return subscribtion.unsubscribe()
+ })
+}
+
+function deleteSubscriptionFromBackEnd (token) {
+ return fetch('/api/v1/push/subscription/', {
+ method: 'DELETE',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ }
+ }).then((response) => {
+ if (!response.ok) throw new Error('Bad status code from server.')
+ return response
+ })
+}
+
+function sendSubscriptionToBackEnd (subscription, token, notificationVisibility) {
+ return window.fetch('/api/v1/push/subscription/', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ body: JSON.stringify({
+ subscription,
+ data: {
+ alerts: {
+ follow: notificationVisibility.follows,
+ favourite: notificationVisibility.likes,
+ mention: notificationVisibility.mentions,
+ reblog: notificationVisibility.repeats,
+ move: notificationVisibility.moves
+ }
+ }
+ })
+ }).then((response) => {
+ if (!response.ok) throw new Error('Bad status code from server.')
+ return response.json()
+ }).then((responseData) => {
+ if (!responseData.id) throw new Error('Bad response from server.')
+ return responseData
+ })
+}
+export function initServiceWorker () {
+ if (!isSWSupported()) return
+ getOrCreateServiceWorker()
+}
+
+export async function showDesktopNotification (content) {
+ const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+ sw.postMessage({ type: 'desktopNotification', content })
+}
+
+export async function updateFocus () {
+ const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+ sw.postMessage({ type: 'updateFocus' })
+}
+
+export function registerPushNotifications (isEnabled, vapidPublicKey, token, notificationVisibility) {
+ if (isPushSupported()) {
+ getOrCreateServiceWorker()
+ .then((registration) => subscribePush(registration, isEnabled, vapidPublicKey))
+ .then((subscription) => sendSubscriptionToBackEnd(subscription, token, notificationVisibility))
+ .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
+ }
+}
+
+export function unregisterPushNotifications (token) {
+ if (isPushSupported()) {
+ Promise.all([
+ deleteSubscriptionFromBackEnd(token),
+ getOrCreateServiceWorker()
+ .then((registration) => {
+ return unsubscribePush(registration).then((result) => [registration, result])
+ })
+ .then(([registration, unsubResult]) => {
+ if (!unsubResult) {
+ console.warn('Push subscription cancellation wasn\'t successful')
+ }
+ })
+ ]).catch((e) => console.warn(`Failed to disable Web Push Notifications: ${e.message}`))
+ }
+}
diff --git a/src/sw.js b/src/sw.js
@@ -13,9 +13,9 @@ const i18n = createI18n({
messages
})
-function isEnabled () {
- return localForage.getItem('vuex-lz')
- .then(data => data.config.webPushNotifications)
+const state = {
+ lastFocused: null,
+ notificationIds: new Set()
}
function getWindowClients () {
@@ -29,11 +29,11 @@ const setLocale = async () => {
i18n.locale = locale
}
-const maybeShowNotification = async (event) => {
- const enabled = await isEnabled()
+const showPushNotification = async (event) => {
const activeClients = await getWindowClients()
await setLocale()
- if (enabled && (activeClients.length === 0)) {
+ // Only show push notifications if all tabs/windows are closed
+ if (activeClients.length === 0) {
const data = event.data.json()
const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
@@ -48,8 +48,27 @@ const maybeShowNotification = async (event) => {
}
self.addEventListener('push', async (event) => {
+ console.log(event)
if (event.data) {
- event.waitUntil(maybeShowNotification(event))
+ event.waitUntil(showPushNotification(event))
+ }
+})
+
+self.addEventListener('message', async (event) => {
+ const { type, content } = event.data
+ console.log(event)
+
+ if (type === 'desktopNotification') {
+ const { title, body, icon, id } = content
+ if (state.notificationIds.has(id)) return
+ state.notificationIds.add(id)
+ setTimeout(() => state.notificationIds.remove(id), 10000)
+ self.registration.showNotification('SWTEST: ' + title, { body, icon })
+ }
+
+ if (type === 'updateFocus') {
+ state.lastFocused = event.source.id
+ console.log(state)
}
})
@@ -59,7 +78,9 @@ self.addEventListener('notificationclick', (event) => {
event.waitUntil(getWindowClients().then((list) => {
for (let i = 0; i < list.length; i++) {
const client = list[i]
- if (client.url === '/' && 'focus' in client) { return client.focus() }
+ if (state.lastFocused === null || client.id === state.lastFocused) {
+ if ('focus' in client) return client.focus()
+ }
}
if (clients.openWindow) return clients.openWindow('/')
