From 7f51ea369eb4ae1252fcba9a82438fd00471e874 Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 18 Aug 2023 20:34:27 -0400 Subject: Make extra notification display customizable --- src/modules/config.js | 5 +++++ src/modules/instance.js | 5 +++++ 2 files changed, 10 insertions(+) (limited to 'src/modules') diff --git a/src/modules/config.js b/src/modules/config.js index 56f8cba5..dda3d221 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -117,6 +117,11 @@ export const defaultState = { conversationTreeAdvanced: undefined, // instance default conversationOtherRepliesButton: undefined, // instance default conversationTreeFadeAncestors: undefined, // instance default + showExtraNotifications: undefined, // instance default + showExtraNotificationsTip: undefined, // instance default + showChatsInExtraNotifications: undefined, // instance default + showAnnouncementsInExtraNotifications: undefined, // instance default + showFollowRequestsInExtraNotifications: undefined, // instance default maxDepthInThread: undefined, // instance default autocompleteSelect: undefined // instance default } diff --git a/src/modules/instance.js b/src/modules/instance.js index bb0292da..3972bd29 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -103,6 +103,11 @@ const defaultState = { conversationTreeAdvanced: false, conversationOtherRepliesButton: 'below', conversationTreeFadeAncestors: false, + showExtraNotifications: true, + showExtraNotificationsTip: true, + showChatsInExtraNotifications: true, + showAnnouncementsInExtraNotifications: true, + showFollowRequestsInExtraNotifications: true, maxDepthInThread: 6, autocompleteSelect: false, -- cgit v1.2.3-70-g09d2 From 73fbe89a4b4e545796e9cc6aae707de0a4eed3a1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 25 Oct 2023 18:58:33 +0300 Subject: initial work on showing notifications through serviceworkers --- src/boot/after_store.js | 4 + src/modules/users.js | 2 +- .../desktop_notification_utils.js | 7 +- src/services/push/push.js | 111 ------------------ src/services/sw/sw.js | 124 +++++++++++++++++++++ src/sw.js | 37 ++++-- 6 files changed, 161 insertions(+), 124 deletions(-) delete mode 100644 src/services/push/push.js create mode 100644 src/services/sw/sw.js (limited to 'src/modules') 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/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..c31a1030 100644 --- 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 deleted file mode 100644 index 1787ac36..00000000 --- a/src/services/push/push.js +++ /dev/null @@ -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 new file mode 100644 index 00000000..b13c9a1b --- /dev/null +++ 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 index 70fed44b..7fd08c4a 100644 --- 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('/') -- cgit v1.2.3-70-g09d2 From f354cef01065ab3ff9b00e522ec6ae9b1aabcc97 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 1 Nov 2023 21:44:14 +0200 Subject: fix no feedback and no dropdown close for actions in frontends tab, better default suggest --- .../settings_modal/admin_tabs/frontends_tab.js | 40 ++++++++++++++++++++-- .../settings_modal/admin_tabs/frontends_tab.vue | 22 +++++++++--- src/i18n/en.json | 4 ++- src/modules/adminSettings.js | 1 + 4 files changed, 58 insertions(+), 9 deletions(-) (limited to 'src/modules') diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js index a2c27c2a..57825a46 100644 --- a/src/components/settings_modal/admin_tabs/frontends_tab.js +++ b/src/components/settings_modal/admin_tabs/frontends_tab.js @@ -42,18 +42,52 @@ const FrontendsTab = { ...SharedComputedObject() }, methods: { + canInstall (frontend) { + const fe = this.frontends.find(f => f.name === frontend.name) + if (!fe) return false + return fe.refs.includes(frontend.ref) + }, + getSuggestedRef (frontend) { + const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary'] + if (defaultFe.name === frontend.name && this.canInstall(defaultFe)) { + return defaultFe.ref + } else { + return frontend.refs[0] + } + }, update (frontend, suggestRef) { - const ref = suggestRef || frontend.refs[0] + const ref = suggestRef || this.getSuggestedRef(frontend) const { name } = frontend const payload = { name, ref } this.$store.state.api.backendInteractor.installFrontend({ payload }) - .then((externalUser) => { + .then(async (response) => { this.$store.dispatch('loadFrontendsStuff') + if (response.error) { + const reason = await response.error.json() + this.$store.dispatch('pushGlobalNotice', { + level: 'error', + messageKey: 'admin_dash.frontend.failure_installing_frontend', + messageArgs: { + version: name + '/' + ref, + reason: reason.error + }, + timeout: 5000 + }) + } else { + this.$store.dispatch('pushGlobalNotice', { + level: 'success', + messageKey: 'admin_dash.frontend.success_installing_frontend', + messageArgs: { + version: name + '/' + ref + }, + timeout: 2000 + }) + } }) }, setDefault (frontend, suggestRef) { - const ref = suggestRef || frontend.refs[0] + const ref = suggestRef || this.getSuggestedRef(frontend) const { name } = frontend this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } }) diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue index 13b8fa6b..3b8d0eab 100644 --- a/src/components/settings_modal/admin_tabs/frontends_tab.vue +++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue @@ -86,6 +86,11 @@ ? $t('admin_dash.frontend.reinstall') : $t('admin_dash.frontend.install') }} + + {{ + getSuggestedRef(frontend) + }} + -