From b70473ed60f64d97c0758f864043b850a5728770 Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 20 Jun 2022 00:33:46 +0900 Subject: feat: Add Badge Image to Push Notification (#8012) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * backend/src/web/index.ts * notification-badges * add scripts * change create-notification.ts * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo * clean up * clean up * refactor * キャッシュ対策 * Truncate push notification message * fix * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * pollEnded * URLをsw.jsに戻す * clean up * fix lint * changelog * alpha-test * also with twemoji * add isMimeImage function * catch * Colour => Color * char2file => char2filePath * Update autocomplete.vue * remove clone? Co-authored-by: Acid Chicken (硫酸鶏) Co-authored-by: syuilo --- packages/sw/src/scripts/create-notification.ts | 54 +++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) (limited to 'packages/sw/src/scripts/create-notification.ts') diff --git a/packages/sw/src/scripts/create-notification.ts b/packages/sw/src/scripts/create-notification.ts index 6d7ba7d524..7c95e8e41f 100644 --- a/packages/sw/src/scripts/create-notification.ts +++ b/packages/sw/src/scripts/create-notification.ts @@ -9,6 +9,10 @@ import { pushNotificationDataMap } from '@/types'; import getUserName from '@/scripts/get-user-name'; import { I18n } from '@/scripts/i18n'; import { getAccountFromId } from '@/scripts/get-account-from-id'; +import { char2fileName } from '@/scripts/twemoji-base'; +import * as url from '@/scripts/url'; + +const iconUrl = (name: string) => `/static-assets/notification-badges/${name}.png`; export async function createNotification(data: pushNotificationDataMap[K]) { const n = await composeNotification(data); @@ -44,6 +48,7 @@ async function composeNotification(data return [t('_notification.youWereFollowed'), { body: getUserName(data.body.user), icon: data.body.user.avatarUrl, + badge: iconUrl('user-plus'), data, actions: userDetail.isFollowing ? [] : [ { @@ -57,6 +62,7 @@ async function composeNotification(data return [t('_notification.youGotMention', { name: getUserName(data.body.user) }), { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge: iconUrl('at'), data, actions: [ { @@ -70,6 +76,7 @@ async function composeNotification(data return [t('_notification.youGotReply', { name: getUserName(data.body.user) }), { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge: iconUrl('reply'), data, actions: [ { @@ -83,6 +90,7 @@ async function composeNotification(data return [t('_notification.youRenoted', { name: getUserName(data.body.user) }), { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge: iconUrl('retweet'), data, actions: [ { @@ -96,6 +104,7 @@ async function composeNotification(data return [t('_notification.youGotQuote', { name: getUserName(data.body.user) }), { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge: iconUrl('quote-right'), data, actions: [ { @@ -112,9 +121,44 @@ async function composeNotification(data }]; case 'reaction': - return [`${data.body.reaction} ${getUserName(data.body.user)}`, { + let reaction = data.body.reaction; + let badge: string | undefined; + + if (reaction.startsWith(':')) { + // カスタム絵文字の場合 + const customEmoji = data.body.note.emojis.find(x => x.name === reaction.substr(1, reaction.length - 2)); + if (customEmoji) { + if (reaction.includes('@')) { + reaction = `:${reaction.substr(1, reaction.indexOf('@') - 1)}:`; + } + + const u = new URL(customEmoji.url); + if (u.href.startsWith(`${origin}/proxy/`)) { + // もう既にproxyっぽそうだったらsearchParams付けるだけ + u.searchParams.set('badge', '1'); + badge = u.href; + } else { + const dummy = `${u.host}${u.pathname}`; // 拡張子がないとキャッシュしてくれないCDNがあるので + badge = `${origin}/proxy/${dummy}?${url.query({ + url: u.href, + badge: '1' + })}`; + } + } + } else { + // Unicode絵文字の場合 + badge = `/twemoji-badge/${char2fileName(reaction)}.png`; + } + + + if (badge ? await fetch(badge).then(res => res.status !== 200).catch(() => true) : true) { + badge = iconUrl('plus'); + } + + return [`${reaction} ${getUserName(data.body.user)}`, { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge, data, actions: [ { @@ -128,12 +172,14 @@ async function composeNotification(data return [t('_notification.youGotPoll', { name: getUserName(data.body.user) }), { body: data.body.note.text || '', icon: data.body.user.avatarUrl, + badge: iconUrl('poll-h'), data, }]; case 'pollEnded': return [t('_notification.pollEnded'), { body: data.body.note.text || '', + badge: iconUrl('clipboard-check-solid'), data, }]; @@ -141,6 +187,7 @@ async function composeNotification(data return [t('_notification.youReceivedFollowRequest'), { body: getUserName(data.body.user), icon: data.body.user.avatarUrl, + badge: iconUrl('clock'), data, actions: [ { @@ -158,12 +205,14 @@ async function composeNotification(data return [t('_notification.yourFollowRequestAccepted'), { body: getUserName(data.body.user), icon: data.body.user.avatarUrl, + badge: iconUrl('check'), data, }]; case 'groupInvited': return [t('_notification.youWereInvitedToGroup', { userName: getUserName(data.body.user) }), { body: data.body.invitation.group.name, + badge: iconUrl('id-card-alt'), data, actions: [ { @@ -191,6 +240,7 @@ async function composeNotification(data if (data.body.groupId === null) { return [t('_notification.youGotMessagingMessageFromUser', { name: getUserName(data.body.user) }), { icon: data.body.user.avatarUrl, + badge: iconUrl('comments'), tag: `messaging:user:${data.body.userId}`, data, renotify: true, @@ -198,6 +248,7 @@ async function composeNotification(data } return [t('_notification.youGotMessagingMessageFromGroup', { name: data.body.group.name }), { icon: data.body.user.avatarUrl, + badge: iconUrl('comments'), tag: `messaging:group:${data.body.groupId}`, data, renotify: true, @@ -217,6 +268,7 @@ export async function createEmptyNotification() { t('_notification.emptyPushNotificationMessage'), { silent: true, + badge: iconUrl('null'), tag: 'read_notification', } ); -- cgit v1.2.3-freya