From 566e0d2bea695a14744fd3c8a5e3613d45f1c08a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 20 Jun 2022 00:33:46 +0900
Subject: [PATCH] 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 (硫酸鶏) <root@acid-chicken.com>
* 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 <Syuilotan@yahoo.co.jp>
* 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 (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
CHANGELOG.md | 1 +
.../assets/notification-badges/LICENSE | 5 ++
.../backend/assets/notification-badges/at.png | 3 ++
.../assets/notification-badges/check.png | 3 ++
.../clipboard-check-solid.png | 3 ++
.../assets/notification-badges/clock.png | 3 ++
.../assets/notification-badges/comments.png | 3 ++
.../notification-badges/id-card-alt.png | 3 ++
.../assets/notification-badges/null.png | 3 ++
.../assets/notification-badges/plus.png | 3 ++
.../assets/notification-badges/poll-h.png | 3 ++
.../notification-badges/quote-right.png | 3 ++
.../assets/notification-badges/reply.png | 3 ++
.../assets/notification-badges/retweet.png | 3 ++
.../assets/notification-badges/user-plus.png | 3 ++
packages/backend/src/misc/is-mime-image.ts | 8 +++
.../backend/src/server/proxy/proxy-media.ts | 49 +++++++++++++++--
packages/backend/src/server/web/index.ts | 44 +++++++++++++++
.../client/src/components/autocomplete.vue | 12 ++---
.../client/src/components/global/emoji.vue | 9 ++--
packages/client/src/scripts/twemoji-base.ts | 11 ++++
.../sw/src/scripts/create-notification.ts | 54 ++++++++++++++++++-
packages/sw/src/scripts/twemoji-base.ts | 12 +++++
packages/sw/src/scripts/url.ts | 13 +++++
24 files changed, 236 insertions(+), 21 deletions(-)
create mode 100644 packages/backend/assets/notification-badges/LICENSE
create mode 100644 packages/backend/assets/notification-badges/at.png
create mode 100644 packages/backend/assets/notification-badges/check.png
create mode 100644 packages/backend/assets/notification-badges/clipboard-check-solid.png
create mode 100644 packages/backend/assets/notification-badges/clock.png
create mode 100644 packages/backend/assets/notification-badges/comments.png
create mode 100644 packages/backend/assets/notification-badges/id-card-alt.png
create mode 100644 packages/backend/assets/notification-badges/null.png
create mode 100644 packages/backend/assets/notification-badges/plus.png
create mode 100644 packages/backend/assets/notification-badges/poll-h.png
create mode 100644 packages/backend/assets/notification-badges/quote-right.png
create mode 100644 packages/backend/assets/notification-badges/reply.png
create mode 100644 packages/backend/assets/notification-badges/retweet.png
create mode 100644 packages/backend/assets/notification-badges/user-plus.png
create mode 100644 packages/backend/src/misc/is-mime-image.ts
create mode 100644 packages/sw/src/scripts/twemoji-base.ts
create mode 100644 packages/sw/src/scripts/url.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5853b982a..01b179f13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ You should also include the user name that made the change.
- Server: Add rate limit to i/notifications @tamaina
- Client: Improve files page of control panel @syuilo
- Improve player detection in URL preview @mei23
+- Add Badge Image to Push Notification #8012 @tamaina
### Bugfixes
- Server: Fix GenerateVideoThumbnail failed @mei23
diff --git a/packages/backend/assets/notification-badges/LICENSE b/packages/backend/assets/notification-badges/LICENSE
new file mode 100644
index 000000000..841c4c682
--- /dev/null
+++ b/packages/backend/assets/notification-badges/LICENSE
@@ -0,0 +1,5 @@
+Font Awesome Icons
+-------------------------
+
+Ⓒ Font Awesome
+CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
diff --git a/packages/backend/assets/notification-badges/at.png b/packages/backend/assets/notification-badges/at.png
new file mode 100644
index 000000000..51d56a52c
--- /dev/null
+++ b/packages/backend/assets/notification-badges/at.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d181c5d22882ffc0ea8067b893425a077d82bbf4ce418eae48239bb1f89da8c5
+size 1752
diff --git a/packages/backend/assets/notification-badges/check.png b/packages/backend/assets/notification-badges/check.png
new file mode 100644
index 000000000..6e23c5a9f
--- /dev/null
+++ b/packages/backend/assets/notification-badges/check.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2875e5b40618d0b7da65754d614103f06a92338fab1e215143c631f02a6b2982
+size 577
diff --git a/packages/backend/assets/notification-badges/clipboard-check-solid.png b/packages/backend/assets/notification-badges/clipboard-check-solid.png
new file mode 100644
index 000000000..1c5cd8e01
--- /dev/null
+++ b/packages/backend/assets/notification-badges/clipboard-check-solid.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32e6648d716deaa651d8f3906062cb925cf84e277a412d5122c7f6b83724e371
+size 1402
diff --git a/packages/backend/assets/notification-badges/clock.png b/packages/backend/assets/notification-badges/clock.png
new file mode 100644
index 000000000..1c2b48c22
--- /dev/null
+++ b/packages/backend/assets/notification-badges/clock.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3861ed8495e79983d9ea26aed1ad664d060fc41a45a86ba6a080c6dae8315459
+size 1131
diff --git a/packages/backend/assets/notification-badges/comments.png b/packages/backend/assets/notification-badges/comments.png
new file mode 100644
index 000000000..bd77a2361
--- /dev/null
+++ b/packages/backend/assets/notification-badges/comments.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85d0e41e71a785167f379b82030cac7654c3faaa088e09e7ceb758e5e8214449
+size 1134
diff --git a/packages/backend/assets/notification-badges/id-card-alt.png b/packages/backend/assets/notification-badges/id-card-alt.png
new file mode 100644
index 000000000..d05d20c4a
--- /dev/null
+++ b/packages/backend/assets/notification-badges/id-card-alt.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a0ff1539900c43359cf876d61df40b191f14588dc6a023e7b19d29f68179ca3
+size 844
diff --git a/packages/backend/assets/notification-badges/null.png b/packages/backend/assets/notification-badges/null.png
new file mode 100644
index 000000000..a8fbc8752
--- /dev/null
+++ b/packages/backend/assets/notification-badges/null.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1e542d70142b51f0305bc4ae85f7c5c741b7d9239e65e4156e39c3d959931ca
+size 174
diff --git a/packages/backend/assets/notification-badges/plus.png b/packages/backend/assets/notification-badges/plus.png
new file mode 100644
index 000000000..23dc2533e
--- /dev/null
+++ b/packages/backend/assets/notification-badges/plus.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3441d110b794f80df6f94d4a3c2ebae9d2336315d94ead462d6956b4a64cc672
+size 507
diff --git a/packages/backend/assets/notification-badges/poll-h.png b/packages/backend/assets/notification-badges/poll-h.png
new file mode 100644
index 000000000..71f9ba6f0
--- /dev/null
+++ b/packages/backend/assets/notification-badges/poll-h.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:950e917fec5076978c993172fa3930216499e4508b183916acb97d18b5e30fb1
+size 689
diff --git a/packages/backend/assets/notification-badges/quote-right.png b/packages/backend/assets/notification-badges/quote-right.png
new file mode 100644
index 000000000..e69ea1ea0
--- /dev/null
+++ b/packages/backend/assets/notification-badges/quote-right.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:692112a31c1d546fb6b2c30beadb74b9b02baee3bb85b377198baeb1c18caba4
+size 772
diff --git a/packages/backend/assets/notification-badges/reply.png b/packages/backend/assets/notification-badges/reply.png
new file mode 100644
index 000000000..75db22187
--- /dev/null
+++ b/packages/backend/assets/notification-badges/reply.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e2dfb28fbf82d8fd6f1247b0ecdbc481060b1203680862d350a859a29c1e4da
+size 930
diff --git a/packages/backend/assets/notification-badges/retweet.png b/packages/backend/assets/notification-badges/retweet.png
new file mode 100644
index 000000000..783559c8e
--- /dev/null
+++ b/packages/backend/assets/notification-badges/retweet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e7407b07d880bfe5a43cc283253a7200d120d8e11bf74bdc1faa71c0d544c270
+size 798
diff --git a/packages/backend/assets/notification-badges/user-plus.png b/packages/backend/assets/notification-badges/user-plus.png
new file mode 100644
index 000000000..3da6efb9a
--- /dev/null
+++ b/packages/backend/assets/notification-badges/user-plus.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:de621e57b358c16729c493efdf113e128b3d76da5609d8d9018f736523f534cb
+size 991
diff --git a/packages/backend/src/misc/is-mime-image.ts b/packages/backend/src/misc/is-mime-image.ts
new file mode 100644
index 000000000..8993ede33
--- /dev/null
+++ b/packages/backend/src/misc/is-mime-image.ts
@@ -0,0 +1,8 @@
+import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+
+const dictionary = {
+ 'safe-file': FILE_TYPE_BROWSERSAFE,
+ 'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'],
+};
+
+export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);
diff --git a/packages/backend/src/server/proxy/proxy-media.ts b/packages/backend/src/server/proxy/proxy-media.ts
index 48887bf12..ca036e8fd 100644
--- a/packages/backend/src/server/proxy/proxy-media.ts
+++ b/packages/backend/src/server/proxy/proxy-media.ts
@@ -1,13 +1,16 @@
import * as fs from 'node:fs';
import Koa from 'koa';
-import { serverLogger } from '../index.js';
+import sharp from 'sharp';
import { IImage, convertToWebp } from '@/services/drive/image-processor.js';
import { createTemp } from '@/misc/create-temp.js';
import { downloadUrl } from '@/misc/download-url.js';
import { detectType } from '@/misc/get-file-info.js';
import { StatusError } from '@/misc/fetch.js';
import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+import { serverLogger } from '../index.js';
+import { isMimeImage } from '@/misc/is-mime-image.js';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export async function proxyMedia(ctx: Koa.Context) {
const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
@@ -23,14 +26,50 @@ export async function proxyMedia(ctx: Koa.Context) {
await downloadUrl(url, path);
const { mime, ext } = await detectType(path);
+ const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
let image: IImage;
- if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'].includes(mime)) {
+ if ('static' in ctx.query && isConvertibleImage) {
image = await convertToWebp(path, 498, 280);
- } else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/svg+xml'].includes(mime)) {
+ } else if ('preview' in ctx.query && isConvertibleImage) {
image = await convertToWebp(path, 200, 200);
- } else if (['image/svg+xml'].includes(mime)) {
+ } else if ('badge' in ctx.query) {
+ if (!isConvertibleImage) {
+ // 画像でないなら404でお茶を濁す
+ throw new StatusError('Unexpected mime', 404);
+ }
+
+ const mask = sharp(path)
+ .resize(96, 96, {
+ fit: 'inside',
+ withoutEnlargement: false,
+ })
+ .greyscale()
+ .normalise()
+ .linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+ .flatten({ background: '#000' })
+ .toColorspace('b-w');
+
+ const stats = await mask.clone().stats();
+
+ if (stats.entropy < 0.1) {
+ // エントロピーがあまりない場合は404にする
+ throw new StatusError('Skip to provide badge', 404);
+ }
+
+ const data = sharp({
+ create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+ })
+ .pipelineColorspace('b-w')
+ .boolean(await mask.png().toBuffer(), 'eor');
+
+ image = {
+ data: await data.png().toBuffer(),
+ ext: 'png',
+ type: 'image/png',
+ };
+ } else if (mime === 'image/svg+xml') {
image = await convertToWebp(path, 2048, 2048, 1);
} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
throw new StatusError('Rejected type', 403, 'Rejected type');
@@ -48,7 +87,7 @@ export async function proxyMedia(ctx: Koa.Context) {
} catch (e) {
serverLogger.error(`${e}`);
- if (e instanceof StatusError && e.isClientError) {
+ if (e instanceof StatusError && (e.statusCode === 302 || e.isClientError)) {
ctx.status = e.statusCode;
} else {
ctx.status = 500;
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
index 2feee72be..be95becb6 100644
--- a/packages/backend/src/server/web/index.ts
+++ b/packages/backend/src/server/web/index.ts
@@ -11,6 +11,7 @@ import Router from '@koa/router';
import send from 'koa-send';
import favicon from 'koa-favicon';
import views from 'koa-views';
+import sharp from 'sharp';
import { createBullBoard } from '@bull-board/api';
import { BullAdapter } from '@bull-board/api/bullAdapter.js';
import { KoaAdapter } from '@bull-board/koa';
@@ -140,6 +141,49 @@ router.get('/twemoji/(.*)', async ctx => {
});
});
+router.get('/twemoji-badge/(.*)', async ctx => {
+ const path = ctx.path.replace('/twemoji-badge/', '');
+
+ if (!path.match(/^[0-9a-f-]+\.png$/)) {
+ ctx.status = 404;
+ return;
+ }
+
+ const mask = await sharp(
+ `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`,
+ { density: 1000 },
+ )
+ .resize(488, 488)
+ .greyscale()
+ .normalise()
+ .linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+ .flatten({ background: '#000' })
+ .extend({
+ top: 12,
+ bottom: 12,
+ left: 12,
+ right: 12,
+ background: '#000',
+ })
+ .toColorspace('b-w')
+ .png()
+ .toBuffer();
+
+ const buffer = await sharp({
+ create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+ })
+ .pipelineColorspace('b-w')
+ .boolean(mask, 'eor')
+ .resize(96, 96)
+ .png()
+ .toBuffer();
+
+ ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+ ctx.set('Cache-Control', 'max-age=2592000');
+ ctx.set('Content-Type', 'image/png');
+ ctx.body = buffer;
+});
+
// ServiceWorker
router.get(`/sw.js`, async ctx => {
await send(ctx as any, `/sw.js`, {
diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/autocomplete.vue
index 1e4a4506f..ae708026e 100644
--- a/packages/client/src/components/autocomplete.vue
+++ b/packages/client/src/components/autocomplete.vue
@@ -35,6 +35,7 @@
<script lang="ts">
import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import contains from '@/scripts/contains';
+import { char2filePath } from '@/scripts/twemoji-base';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { acct } from '@/filters/user';
import * as os from '@/os';
@@ -42,7 +43,6 @@ import { MFM_TAGS } from '@/scripts/mfm-tags';
import { defaultStore } from '@/store';
import { emojilist } from '@/scripts/emojilist';
import { instance } from '@/instance';
-import { twemojiSvgBase } from '@/scripts/twemoji-base';
import { i18n } from '@/i18n';
type EmojiDef = {
@@ -55,16 +55,10 @@ type EmojiDef = {
const lib = emojilist.filter(x => x.category !== 'flags');
-const char2file = (char: string) => {
- let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
- if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
- return codes.filter(x => x && x.length).join('-');
-};
-
const emjdb: EmojiDef[] = lib.map(x => ({
emoji: x.char,
name: x.name,
- url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
+ url: char2filePath(x.char),
}));
for (const x of lib) {
@@ -74,7 +68,7 @@ for (const x of lib) {
emoji: x.char,
name: k,
aliasOf: x.name,
- url: `${twemojiSvgBase}/${char2file(x.char)}.svg`
+ url: char2filePath(x.char),
});
}
}
diff --git a/packages/client/src/components/global/emoji.vue b/packages/client/src/components/global/emoji.vue
index 0075e0867..23cb649f7 100644
--- a/packages/client/src/components/global/emoji.vue
+++ b/packages/client/src/components/global/emoji.vue
@@ -1,4 +1,4 @@
-<template>
+char2filePath<template>
<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
@@ -8,7 +8,7 @@
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { twemojiSvgBase } from '@/scripts/twemoji-base';
+import { char2filePath } from '@/scripts/twemoji-base';
import { defaultStore } from '@/store';
import { instance } from '@/instance';
@@ -45,10 +45,7 @@ export default defineComponent({
const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
const url = computed(() => {
if (char.value) {
- let codes = Array.from(char.value).map(x => x.codePointAt(0).toString(16));
- if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
- codes = codes.filter(x => x && x.length);
- return `${twemojiSvgBase}/${codes.join('-')}.svg`;
+ return char2filePath(char.value);
} else {
return defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(customEmoji.value.url)
diff --git a/packages/client/src/scripts/twemoji-base.ts b/packages/client/src/scripts/twemoji-base.ts
index cd50311b1..638aae328 100644
--- a/packages/client/src/scripts/twemoji-base.ts
+++ b/packages/client/src/scripts/twemoji-base.ts
@@ -1 +1,12 @@
export const twemojiSvgBase = '/twemoji';
+
+export function char2fileName(char: string): string {
+ let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+ if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+ codes = codes.filter(x => x && x.length);
+ return codes.join('-');
+}
+
+export function char2filePath(char: string): string {
+ return `${twemojiSvgBase}/${char2fileName(char)}.svg`;
+}
diff --git a/packages/sw/src/scripts/create-notification.ts b/packages/sw/src/scripts/create-notification.ts
index 6d7ba7d52..7c95e8e41 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<K extends keyof pushNotificationDataMap>(data: pushNotificationDataMap[K]) {
const n = await composeNotification(data);
@@ -44,6 +48,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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<K extends keyof pushNotificationDataMap>(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',
}
);
diff --git a/packages/sw/src/scripts/twemoji-base.ts b/packages/sw/src/scripts/twemoji-base.ts
new file mode 100644
index 000000000..638aae328
--- /dev/null
+++ b/packages/sw/src/scripts/twemoji-base.ts
@@ -0,0 +1,12 @@
+export const twemojiSvgBase = '/twemoji';
+
+export function char2fileName(char: string): string {
+ let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+ if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+ codes = codes.filter(x => x && x.length);
+ return codes.join('-');
+}
+
+export function char2filePath(char: string): string {
+ return `${twemojiSvgBase}/${char2fileName(char)}.svg`;
+}
diff --git a/packages/sw/src/scripts/url.ts b/packages/sw/src/scripts/url.ts
new file mode 100644
index 000000000..c7f2b7c1e
--- /dev/null
+++ b/packages/sw/src/scripts/url.ts
@@ -0,0 +1,13 @@
+export function query(obj: {}): string {
+ const params = Object.entries(obj)
+ .filter(([, v]) => Array.isArray(v) ? v.length : v !== undefined)
+ .reduce((a, [k, v]) => (a[k] = v, a), {} as Record<string, any>);
+
+ return Object.entries(params)
+ .map((e) => `${e[0]}=${encodeURIComponent(e[1])}`)
+ .join('&');
+}
+
+export function appendQuery(url: string, query: string): string {
+ return `${url}${/\?/.test(url) ? url.endsWith('?') ? '' : '&' : '?'}${query}`;
+}