Définir le cache pour les fichiers dans le stockage Firebase
J'ai un PWA 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 à partir du système de stockage. Le navigateur demande les fichiers pour chaque actualisation de page. Cela provoque des retards et du trafic inutiles.
Mon script JS charge les fichiers à partir du 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 en cache ces demandes?
UPDATE
Selon ces réponse , je ne devrais pas utiliser les fichiers Firebase Storage to Host de mon site. Juste pour gérer les téléchargements et les envois des utilisateurs. Est-ce correct?
cacheControl pour le stockage: https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl
L'hébergement vous servira mieux, et le déploiement avec l'interface de ligne de commande firebase est extrêmement simple. Je pense que par défaut, le contrôle du cache sur les images dans l'hébergement 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 redimensionner votre site et le déplacer vers différents nœuds Edge plus proches de la demande. Le stockage est limité aux seaux, mais vous pouvez spécifier un seau pour l'Europe, un pour la Chine, pour l'Amérique du Nord, etc.
Le stockage est préférable pour les téléchargements de fichiers utilisateur et l'hébergement était destiné au contenu statique (bien qu'ils déploient un hébergement dynamique avec des fonctions cloud, je pense)
Pour compléter la réponse, vous pouvez également utiliser un agent de service, éventuellement avec workbox , avec une stratégie 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ù elles peuvent également être mises en cache si vous avez spécifié la propriété cacheControl dans les métadonnées du fichier ou si vous utilisez Firebase Hosting avec l'en-tête personnalisé Cache-Control pour les images.
Utilisez Serviceworker pour cela.
Vous pouvez enregistrer les URL sans le jeton dans le cache et les récupérer plus tard.
De cette façon, les modifications des 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 puis cache.put(cacheUrl, response);