fix(frontend): secure contextではない場合はストレージ永続化を確認しないように (#17189)

* fix(frontend): secure contextではない場合はストレージ永続化を確認しないように

* Update Changelog

CHANGELOG.md

@@ -34,6 +34,7 @@
   - モザイクの色味がより自然になるように修正
   - ぼかしに不自然な縦線が入る問題を修正
 - Fix: フォロー承認通知でフォローされた際のメッセージの絵文字が表示されない問題を修正
+- Fix: HTTP環境など（Secure Contextのない環境）で、設定画面が閲覧できない問題を修正
 
 ### Server
 - Enhance: OAuthのクライアント情報取得（Client Information Discovery）において、IndieWeb Living Standard 11 July 2024で定義されているJSONドキュメント形式に対応しました

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

@@ -11,7 +11,7 @@ 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">
+						<MkInfo v-if="storagePersistenceSupported && !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>
@@ -51,7 +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';
+import { enableStoragePersistence, storagePersisted, storagePersistenceSupported, skipStoragePersistence } from '@/utility/storage.js';
 
 const searchIndex = await import('search-index:settings').then(({ searchIndexes }) => genSearchIndexes(searchIndexes));
 

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

@@ -142,7 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<hr>
 		</template>
 
-		<MkButton v-if="!storagePersisted" @click="enableStoragePersistence">{{ i18n.ts._settings.settingsPersistence_title }}</MkButton>
+		<MkButton v-if="storagePersistenceSupported && !storagePersisted" @click="enableStoragePersistence">{{ i18n.ts._settings.settingsPersistence_title }}</MkButton>
 
 		<MkButton @click="forceCloudBackup">{{ i18n.ts._preferencesBackup.forceBackup }}</MkButton>
 
@@ -165,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 { enableStoragePersistence, storagePersisted, skipStoragePersistence } from '@/utility/storage.js';
+import { enableStoragePersistence, storagePersisted, storagePersistenceSupported } from '@/utility/storage.js';
 import { ensureSignin } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';

packages/frontend/src/utility/storage.ts

@@ -3,14 +3,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, ref, shallowRef, watch, defineAsyncComponent } from 'vue';
+import { ref } 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 const storagePersistenceSupported = window.isSecureContext && 'storage' in navigator;
+export const storagePersisted = ref(storagePersistenceSupported ? await navigator.storage.persisted() : false);
 
 export async function enableStoragePersistence() {
+	if (!storagePersistenceSupported) return;
 	try {
 		const persisted = await navigator.storage.persist();
 		if (persisted) {