enhance(frontend): 서버에서 푸시 알림을 사용할 수 있으면 푸시 알림을 활성화 하도록 대화 상자를 표시

CHANGELOG_CHERRYPICK.md

@@ -69,6 +69,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Enhance: 링크 또는 내용을 복사할 때 토스트 알림 표시
 - Enhance: HTML 태그 및 Markdown 태그가 자동 완성을 지원함
   - `<`를 입력하면 ``<b>, ~~, <i>, <small>, <center>, <plain>, `, ```, \(\), \(\\ \) `` 태그를 자동으로 입력할 수 있음
+- Enhance: 서버에서 푸시 알림을 사용할 수 있으면 푸시 알림을 활성화 하도록 대화 상자를 표시
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 리액션이 '더 보기'를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)

packages/frontend/src/boot/common.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, watch, version as vueVersion, App } from 'vue';
+import { computed, watch, version as vueVersion, App, defineAsyncComponent } from 'vue';
 import { compareVersions } from 'compare-versions';
 import widgets from '@/widgets/index.js';
 import directives from '@/directives/index.js';
@@ -22,6 +22,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
+import { popup } from '@/os.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`CherryPick v${version}`);
@@ -67,6 +68,11 @@ export async function common(createVue: () => App<Element>) {
 
 	let isClientUpdated = false;
 	let isClientMigrated = false;
+	const showPushNotificationDialog = miLocalStorage.getItem('showPushNotificationDialog');
+
+	if (instance.swPublickey && ('PushManager' in window) && $i && $i.token && showPushNotificationDialog == null) {
+		popup(defineAsyncComponent(() => import('@/components/MkPushNotification.vue')), {}, {}, 'closed');
+	}
 
 	//#region クライアントが更新されたかチェック
 	const lastVersion = miLocalStorage.getItem('lastVersion');

packages/frontend/src/components/MkPushNotification.vue

@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and noridev and other misskey, cherrypick contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModal ref="modal" :zPriority="'middle'">
+	<div :class="$style.root">
+		<i class="ti ti-notification" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+		<div :class="$style.title">{{ i18n.ts.pushNotification }}</div>
+		<small style="opacity: 0.7;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</small>
+		<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 8px auto 14px;"/>
+		<MkButton :class="$style.ok" primary rounded full @click="close ">{{ i18n.ts.ok }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { instance } from '@/instance.js';
+import { host } from '@/config.js';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+import { miLocalStorage } from '@/local-storage.js';
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+
+const close = async () => {
+	modal.value.close();
+	miLocalStorage.setItem('showPushNotificationDialog', 'false');
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+	margin: 4px auto;
+}
+
+.ok {
+	margin: 8px 0 0 0;
+}
+</style>

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -127,7 +127,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.centerPage">
 					<MkSpacer :marginMin="20" :marginMax="28">
 						<div class="_gaps" style="text-align: center;">
-							<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
+							<i class="ti ti-notification" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
 							<div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div>
 							<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>

packages/frontend/src/local-storage.ts

@@ -40,7 +40,8 @@ type Keys =
 	'lastEmojisFetchedAt' | // DEPRECATED, stored in indexeddb (13.9.0~)
 	'emojis' | // DEPRECATED, stored in indexeddb (13.9.0~);
 	`channelLastReadedAt:${string}` |
-	'neverShowNoteEditInfo'
+	'neverShowNoteEditInfo' |
+	'showPushNotificationDialog'
 
 export const miLocalStorage = {
 	getItem: (key: Keys): string | null => window.localStorage.getItem(key),