diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/boot/after_store.js | 4 | ||||
| -rw-r--r-- | src/modules/config.js | 3 | ||||
| -rw-r--r-- | src/modules/users.js | 2 | ||||
| -rw-r--r-- | src/services/desktop_notification_utils/desktop_notification_utils.js | 17 | ||||
| -rw-r--r-- | src/services/favicon_service/favicon_service.js | 5 | ||||
| -rw-r--r-- | src/services/notification_utils/notification_utils.js | 11 | ||||
| -rw-r--r-- | src/services/sw/sw.js (renamed from src/services/push/push.js) | 33 | ||||
| -rw-r--r-- | src/sw.js | 44 |
8 files changed, 96 insertions, 23 deletions
diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 395d4834..6489ef87 100644 --- 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/config.js b/src/modules/config.js index 49e9b2df..05c15998 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -66,6 +66,9 @@ export const defaultState = { chatMention: true, polls: true }, + notificationSettings: { + nativeNotifications: ['follows', 'mentions', 'followRequest', 'reports', 'chatMention', 'polls'] + }, webPushNotifications: false, muteWords: [], highlight: {}, diff --git a/src/modules/users.js b/src/modules/users.js index 50b4cb84..79268bc3 100644 --- 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 index b84a1f75..eb58f39b 100644 --- a/src/services/desktop_notification_utils/desktop_notification_utils.js +++ b/src/services/desktop_notification_utils/desktop_notification_utils.js @@ -1,9 +1,18 @@ +import { showDesktopNotification as swDesktopNotification, isSWSupported } from '../sw/sw.js' +const state = { failCreateNotif: false } + 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) + if (isSWSupported()) { + swDesktopNotification(desktopNotificationOpts) + } else if (!state.failCreateNotif) { + try { + const desktopNotification = new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts) + setTimeout(desktopNotification.close.bind(desktopNotification), 5000) + } catch { + state.failCreateNotif = true + } + } } diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js index 7e19629d..df603bb4 100644 --- a/src/services/favicon_service/favicon_service.js +++ b/src/services/favicon_service/favicon_service.js @@ -55,10 +55,13 @@ const createFaviconService = () => { }) } + const getOriginalFavicons = () => [...favicons] + return { initFaviconService, clearFaviconBadge, - drawFaviconBadge + drawFaviconBadge, + getOriginalFavicons } } diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js index 815e792d..fbd5c014 100644 --- a/src/services/notification_utils/notification_utils.js +++ b/src/services/notification_utils/notification_utils.js @@ -1,6 +1,9 @@ import { filter, sortBy, includes } from 'lodash' import { muteWordHits } from '../status_parser/status_parser.js' import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js' +import FaviconService from 'src/services/favicon_service/favicon_service.js' + +let cachedBadgeUrl = null export const notificationsFromStore = store => store.state.statuses.notifications.data @@ -76,8 +79,14 @@ export const unseenNotificationsFromStore = store => filter(filteredNotificationsFromStore(store), ({ seen }) => !seen) export const prepareNotificationObject = (notification, i18n) => { + if (cachedBadgeUrl === null) { + const favicon = FaviconService.getOriginalFavicons()[0] + cachedBadgeUrl = favicon.favcanvas.toDataURL() + } + const notifObj = { - tag: notification.id + tag: notification.id, + badge: cachedBadgeUrl } const status = notification.status const title = notification.from_profile.name diff --git a/src/services/push/push.js b/src/services/sw/sw.js index 1787ac36..2875d36e 100644 --- a/src/services/push/push.js +++ b/src/services/sw/sw.js @@ -10,8 +10,12 @@ function urlBase64ToUint8Array (base64String) { return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0))) } +export function isSWSupported () { + return 'serviceWorker' in navigator +} + function isPushSupported () { - return 'serviceWorker' in navigator && 'PushManager' in window + return 'PushManager' in window } function getOrCreateServiceWorker () { @@ -39,7 +43,7 @@ function unsubscribePush (registration) { } function deleteSubscriptionFromBackEnd (token) { - return window.fetch('/api/v1/push/subscription/', { + return fetch('/api/v1/push/subscription/', { method: 'DELETE', headers: { 'Content-Type': 'application/json', @@ -78,6 +82,24 @@ function sendSubscriptionToBackEnd (subscription, token, notificationVisibility) return responseData }) } +export async function initServiceWorker () { + if (!isSWSupported()) return + await getOrCreateServiceWorker() + navigator.serviceWorker.addEventListener('message', (event) => { + console.log('SW MESSAGE', event) + // TODO actually act upon click (open drawer on mobile, open chat/thread etc) + }) +} + +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()) { @@ -98,13 +120,8 @@ export function unregisterPushNotifications (token) { }) .then(([registration, unsubResult]) => { if (!unsubResult) { - console.warn('Push subscription cancellation wasn\'t successful, killing SW anyway...') + console.warn('Push subscription cancellation wasn\'t successful') } - 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}`)) } @@ -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,29 @@ 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 + + if (type === 'desktopNotification') { + const { title, ...rest } = content + const { tag } = rest + if (state.notificationIds.has(tag)) return + state.notificationIds.add(tag) + setTimeout(() => state.notificationIds.delete(tag), 10000) + self.registration.showNotification(title, rest) + } + + if (type === 'updateFocus') { + state.lastFocused = event.source.id + + const notifications = await self.registration.getNotifications() + notifications.forEach(n => n.close()) } }) @@ -59,7 +80,14 @@ 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() } + client.postMessage({ type: 'notificationClicked', id: event.notification.tag }) + } + + for (let i = 0; i < list.length; i++) { + const client = list[i] + if (state.lastFocused === null || client.id === state.lastFocused) { + if ('focus' in client) return client.focus() + } } if (clients.openWindow) return clients.openWindow('/') |