Request persistent storage on wallet save (#2302)

* Also request persistent storage on wallet save

* Request persistent storage on push subscription

components/serviceworker.js

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'
 import { Workbox } from 'workbox-window'
 import { gql, useMutation } from '@apollo/client'
+import { requestPersistentStorage } from './use-indexeddb'
 
 const applicationServerKey = process.env.NEXT_PUBLIC_VAPID_PUBKEY
 
@@ -79,6 +80,8 @@ export const ServiceWorkerProvider = ({ children }) => {
       action: STORE_SUBSCRIPTION,
       subscription: pushSubscription
     })
+    requestPersistentStorage()
+
     // send subscription to server
     const variables = {
       endpoint,
@@ -101,11 +104,6 @@ export const ServiceWorkerProvider = ({ children }) => {
       return await unsubscribeFromPushNotifications(pushSubscription)
     }
     await subscribeToPushNotifications()
-    // request persistent storage: https://web.dev/learn/pwa/offline-data#data_persistence
-    const persisted = await navigator?.storage?.persisted?.()
-    if (!persisted && navigator?.storage?.persist) {
-      return await navigator.storage.persist()
-    }
   })
 
   useEffect(() => {

components/use-indexeddb.js

@@ -129,6 +129,21 @@ async function _delete (dbName) {
   })
 }
 
+export async function requestPersistentStorage () {
+  try {
+    if (!('persisted' in navigator.storage) || !('persist' in navigator.storage)) {
+      throw new Error('persistent storage not supported')
+    }
+    const persisted = await navigator.storage.persisted()
+    if (!persisted) {
+      // browser might prompt the user to allow persistent storage
+      return await navigator.storage.persist()
+    }
+  } catch (err) {
+    console.error('failed to request persistent storage:', err)
+  }
+}
+
 class IndexedDBError extends Error {
   constructor (message) {
     super(message)

wallets/client/hooks/query.js

@@ -33,6 +33,7 @@ import { WALLET_SEND_PAYMENT_TIMEOUT_MS } from '@/lib/constants'
 import { useToast } from '@/components/toast'
 import { useMe } from '@/components/me'
 import { useWallets, useWalletsLoading } from '@/wallets/client/context'
+import { requestPersistentStorage } from '@/components/use-indexeddb'
 
 export function useWalletsQuery () {
   const { me } = useMe()
@@ -189,6 +190,8 @@ export function useWalletProtocolUpsert (wallet, protocol) {
       throw err
     }
 
+    requestPersistentStorage()
+
     return updatedWallet
   }, [wallet, protocol, logger, testSendPayment, encryptConfig, mutate])
 }