Définir le cache pour les fichiers dans Firebase Storage

Question

J'ai un PWA fonctionnant sur Firebase. Mes fichiers image sont hébergés sur le stockage Firebase. J'ai remarqué que mon navigateur n'enregistre pas le cache pour les fichiers chargés depuis le système de stockage. Le navigateur demande les fichiers à chaque rafraîchissement de page. Cela entraîne un retard et un trafic inutiles.

Mon JS script charge les fichiers depuis le lien de téléchargement de Firebase Storage, exemple : https://firebasestorage.googleapis.com/v0/b/discipulado-7b14b.appspot.com/o/book3.png?alt=media&token=65b2cde7-c8a4-45da-a743-401759663c17 .

Puis-je mettre ces demandes en cache ?

UPDATE

Selon ces réponse Je ne devrais pas utiliser Firebase Storage pour héberger les fichiers de mon site. Seulement pour gérer les téléchargements et les téléversements des utilisateurs. Est-ce correct ?

Answer 1

cacheControl pour le stockage : https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl

---

Vous aurez un meilleur service avec Hosting, et le déploiement avec le CLI de firebase est extrêmement simple. Je pense que par défaut le Cache-Control sur les images dans Hosting est de 2 heures, et vous pouvez l'augmenter globalement avec le .json.

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

L'hébergement peut faire évoluer votre site et le déplacer vers différents nœuds périphériques plus proches de la demande. Le stockage est limité aux buckets, mais vous pouvez spécifier un bucket pour l'Europe, un pour la Chine, un pour l'Amérique du Nord, etc.

Le stockage est plus adapté au téléchargement de fichiers par les utilisateurs et l'hébergement au contenu statique (bien qu'ils soient en train de mettre en place un hébergement dynamique avec des fonctions de cloud computing, je pense).

Answer 2

storageRef.updateMetadata(yourMetadata) pourrait être la solution dont vous avez besoin.

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

o

storageRef.put(file, yourMetadata)

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

Answer 3

Pour compléter la réponse, vous pouvez également utiliser un travailleur de service, peut-être avec boîte de travail avec un cacheFirst pour mettre en cache toutes les images dans le navigateur de l'utilisateur. Ensuite, après le premier cache, les images seront d'abord chargées à partir du cache local.

S'il n'y a pas de cache, les images seront demandées à Firebase Storage, où les images peuvent également être mises en cache si vous avez spécifié l'attribut cacheControl dans les métadonnées du fichier ou si vous utilisez Firebase Hosting avec un en-tête personnalisé. Cache-Control pour les images.

Answer 4

Utilisez le Serviceworker pour cela.

Vous pouvez enregistrer les urls sans le jeton dans le cache et les récupérer plus tard.

De cette façon, les changements de jetons n'affecteront pas votre mise en cache.

Pour mettre en cache sans jeton, utilisez quelque chose comme

cacheUrl = url.origin + url.pathname.substr(0, url.pathname.length - urlPath.length) + urlPath;

et ensuite cache.put(cacheUrl, response);