web-dev-qa-db-ja.com

Firebase Storageのファイルにキャッシュを設定する

Firebaseで [〜＃〜] pwa [〜＃〜] を実行しています。画像ファイルはFirebase Storageでホストされています。ブラウザがストレージシステムからロードされたファイルのキャッシュを保存しないことに気づきました。ブラウザは、ページを更新するたびにファイルを要求します。不要な遅延とトラフィックが発生します。

Network stats

私のJSスクリプトは、Firebase Storageのダウンロードリンクからファイルをロードします。例： https://firebasestorage.googleapis.com/v0/b/discipulado-7b14b.appspot.com/o/book3.png?alt=media&token = 65b2cde7-c8a4-45da-a743-401759663c17 。

それらのリクエストをキャッシュできますか？

[〜＃〜]更新[〜＃〜]

これらによると answer 私のサイトからファイルをホストするためにFirebase Storageを使用するべきではありません。ユーザーからのダウンロードとアップロードを管理するだけです。これは正しいです？

javascriptjsoncachingfirebasefirebase-storage
14
bodruk

cacheControl for Storage： https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl

Hostingでのサービスが向上し、firebase CLIでのデプロイは非常に簡単です。 Hostingの画像のCache-Controlのデフォルトは2時間で、.jsonを使用してグローバルに増やすことができると思います。

https://firebase.google.com/docs/hosting/full-config#headers

ホスティングでは、サイトをスケーリングして、需要がある場所に近い別のエッジノードに移動できます。ストレージはバケットに制限されていますが、ヨーロッパ用、中国用、北米用などのバケットを指定できます。

ユーザーファイルのアップロードにはストレージが優れ、静的コンテンツにはホスティングが適していました（ただし、クラウド機能を使用して動的ホスティングを展開していると思います）。

7
James Poag

答えを補足するために、おそらく workbox でサービスワーカーを使用し、cacheFirst戦略を使用してすべての画像をユーザーのブラウザーにキャッシュすることもできます。次に、最初のキャッシュの後、画像は最初にローカルキャッシュから読み込まれます。

キャッシュがない場合、画像はFirebase Storageからリクエストされます。ファイルメタデータでcacheControlプロパティを指定した場合や、画像にカスタムヘッダーCache-Controlを指定してFirebase Hostingを使用している場合も、画像をキャッシュできます。

1
Diego R. Antunes

storageRef.updateMetadata(yourMetadata)が必要な解決策かもしれません。

https://firebase.google.com/docs/storage/web/file-metadata#update_file_metadata

または

storageRef.put(file, yourMetadata)

https://firebase.google.com/docs/storage/web/upload-files#upload_files

1
Ruslan

Serviceworkerを使用します。

トークンなしでURLをキャッシュに保存し、後でフェッチすることができます。

この方法では、トークンの変更はキャッシュに影響しません。

トークンなしでキャッシュするには、次のようなものを使用します

_cacheUrl = url.Origin + url.pathname.substr(0, url.pathname.length - urlPath.length) + urlPath;
_

そしてcache.put(cacheUrl, response);

0
Haim763