fix(frontend): ストレージが消去される事がある問題を軽減 (#16704)

* fix(frontend): ストレージが消去される事がある問題を軽減

* add comment

* add catch to continue request permissions

* Update Changelog

* update changelog

* fix

通知権限の許可取得はボタン押下時に移動

* fix

* wip

* Update main-boot.ts

* wip

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -17,6 +17,7 @@ v2025.12.0で行われた「configの`trustProxy`のデフォルト値を`false`
 
 ### Client
 - Enhance: デッキのUI説明を追加
+- Enhance: 設定がブラウザによって消去されないようにするオプションを追加
 - Fix: バージョン表記のないPlayが正しく動作しない問題を修正  
   バージョン表記のないものは v0.x 系として実行されます。v1.x 系で動作させたい場合は必ずバージョン表記を含めてください。
 - Fix: デッキUIでメニュー位置を下にしているとプロファイル削除ボタンが表示されないのを修正  

locales/ja-JP.yml

@@ -1557,6 +1557,9 @@ _settings:
   showPageTabBarBottom: "ページのタブバーを下部に表示"
   emojiPaletteBanner: "絵文字ピッカーに固定表示するプリセットをパレットとして登録したり、ピッカーの表示方法をカスタマイズしたりできます。"
   enableAnimatedImages: "アニメーション画像を有効にする"
+  settingsPersistence_title: "設定の永続化"
+  settingsPersistence_description1: "設定の永続化を有効にすると、設定情報が失われるのを防止できます。"
+  settingsPersistence_description2: "環境によっては有効化できない場合があります。"
 
   _chat:
     showSenderName: "送信者の名前を表示"

packages/frontend/src/pages/settings/index.vue

@@ -11,6 +11,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-if="!narrow || currentPage?.route.name == null" class="nav">
 					<div class="_gaps_s">
 						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+						<MkInfo v-if="!storagePersisted && store.r.showStoragePersistenceSuggestion.value" class="info">
+							<div>{{ i18n.ts._settings.settingsPersistence_description1 }}</div>
+							<div>{{ i18n.ts._settings.settingsPersistence_description2 }}</div>
+							<div><button class="_textButton" @click="enableStoragePersistence">{{ i18n.ts.enable }}</button> | <button class="_textButton" @click="skipStoragePersistence">{{ i18n.ts.skip }}</button></div>
+						</MkInfo>
 						<MkInfo v-if="!store.r.enablePreferencesAutoCloudBackup.value && store.r.showPreferencesAutoCloudBackupSuggestion.value" class="info">
 							<div>{{ i18n.ts._preferencesBackup.autoPreferencesBackupIsNotEnabledForThisDevice }}</div>
 							<div><button class="_textButton" @click="enableAutoBackup">{{ i18n.ts.enable }}</button> | <button class="_textButton" @click="skipAutoBackup">{{ i18n.ts.skip }}</button></div>
@@ -46,6 +51,7 @@ import { enableAutoBackup, getPreferencesProfileMenu } from '@/preferences/utili
 import { store } from '@/store.js';
 import { signout } from '@/signout.js';
 import { genSearchIndexes } from '@/utility/inapp-search.js';
+import { enableStoragePersistence, storagePersisted, skipStoragePersistence } from '@/utility/storage.js';
 
 const searchIndex = await import('search-index:settings').then(({ searchIndexes }) => genSearchIndexes(searchIndexes));
 

packages/frontend/src/pages/settings/other.vue

@@ -142,6 +142,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<hr>
 		</template>
 
+		<MkButton v-if="!storagePersisted" @click="enableStoragePersistence">{{ i18n.ts._settings.settingsPersistence_title }}</MkButton>
+
 		<MkButton @click="forceCloudBackup">{{ i18n.ts._preferencesBackup.forceBackup }}</MkButton>
 
 		<FormSlot>
@@ -163,7 +165,7 @@ import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
+import { enableStoragePersistence, storagePersisted, skipStoragePersistence } from '@/utility/storage.js';
 import { ensureSignin } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';

packages/frontend/src/store.ts

@@ -118,6 +118,10 @@ export const store = markRaw(new Pizzax('base', {
 		where: 'device',
 		default: true,
 	},
+	showStoragePersistenceSuggestion: {
+		where: 'device',
+		default: true,
+	},
 
 	//#region TODO: そのうち消す (preferに移行済み)
 	defaultWithReplies: {

packages/frontend/src/utility/storage.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { computed, ref, shallowRef, watch, defineAsyncComponent } from 'vue';
+import * as os from '@/os.js';
+import { store } from '@/store.js';
+import { i18n } from '@/i18n.js';
+
+export const storagePersisted = ref(await navigator.storage.persisted());
+
+export async function enableStoragePersistence() {
+	try {
+		const persisted = await navigator.storage.persist();
+		if (persisted) {
+			storagePersisted.value = true;
+		} else {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.somethingHappened,
+			});
+		}
+	}	catch (err) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.somethingHappened,
+		});
+	}
+}
+
+export function skipStoragePersistence() {
+	store.set('showStoragePersistenceSuggestion', false);
+}

packages/i18n/src/autogen/locale.ts

@@ -6193,6 +6193,18 @@ export interface Locale extends ILocale {
          * アニメーション画像を有効にする
          */
         "enableAnimatedImages": string;
+        /**
+         * 設定の永続化
+         */
+        "settingsPersistence_title": string;
+        /**
+         * 設定の永続化を有効にすると、設定情報が失われるのを防止できます。
+         */
+        "settingsPersistence_description1": string;
+        /**
+         * 環境によっては有効化できない場合があります。
+         */
+        "settingsPersistence_description2": string;
         "_chat": {
             /**
              * 送信者の名前を表示