Deuxfleurs
/
guichet
23
3
Fork 1
Code Issues 44 Pull Requests 1 Projects 2 Releases Wiki Activity

Réglage de cache navigateur par défaut ou sur option #65

New Issue
Open
opened 2024-04-25 05:49:24 +00:00 by youenchene · 0 comments
youenchene commented 2024-04-25 05:49:24 +00:00
Copy Link

Un des cas d'usage principal de deux fleurs est le site web de contenu statique.

Hors aucun réglage de cache navigateur n'est mis par défaut. Cela oblige toutes les visites à re-charger l'ensemble des images, polices, js, css.

C'est une fonctionnalité de base quand on héberge derrière du Apache HTTPD ou Nginx.

L'option peut être par défaut ou sur option (pas par fichier mais sur l'ensemble d'un site).

A noter que les réglages de cache ne sont souvent pas les mêmes entre une applications web (type SaaS, application de gestion) et du web de contenu (site vitrine, blog, ecommerce, média). 2 profils peuvent être créés.

Tous les réglages suivants sont pour du web de contenu.

Le cache navigateur est contrôlé par 4 entêtes HTTP :

Cache-Control
Expires
ETag
Last-Modified

Le plus rétro compatible est l'entête cache control.

Cache-Control: public, max-age=31536000

Le réglage est ici pour 1 an qui est la bonne pratique générale standardisée par Lighthouse.

Plus d'information : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Expires
Tout comme Cache-Control, l’en-tête Expires permet de définir combien de temps la ressource peut être mise en cache, mais en indiquant une date fixe au lieu d’une durée. En revanche, si l’en-tête Cache-Control est présent avec la directive max-age, l’en-tête Expires est ignoré par le navigateur. Il est généralement préférable d’utiliser l’en-tête Cache-Control plutôt que Expires.

Exemple : Expires: Wed, 21 Oct 2015 07:28:00 GMT

Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires

ETag
L’en-tête ETag définit un identifiant calculé spécifique à une version d’une ressource. Ainsi, lorsqu’une ressource a passé sa période de mise en cache (défini par l’en-tête Cache-Control ou Expires), le navigateur peut demander à nouveau la ressource en précisant le ETag de la version en cache. Si la ressource n’a pas changé depuis (donc si l’ETag est toujours le même), le serveur indiquera au navigateur que la ressource en cache est toujours valable via une réponse avec un code HTTP 304 Not Modified. L’en-tête ETag est donc un supplément à l’en-tête Cache-Control.

Exemple: ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

Last-Modified

L’en-tête Last-Modified offre un mécanisme équivalent à ETag mais utilise la date de dernière modification au lieu d’un identifiant calculé. Cette méthode reste moins précise que ETag. Par conséquent, l’en-tête ETag reste préférable à Last-Modified.

Exemple : Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified

Le réglage se fait généralement par type de fichier.

Voici les réglages typiques :

HTTPD :

BEGIN Webvert

AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/avif .avif AddType image/avif-sequence .avifs AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType image/webp .webp AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType video/webm .webm AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType video/ogg .ogv AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType image/svg+xml .svg .svgz AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/avif A31536000 ExpiresByType image/avif-sequence A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType video/webm A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType video/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 FileETag MTime Size Header set Pragma "public" Header set Cache-Control "max-age=31536000, public" Header unset Last-Modified # END Webvert

Nginx :

location ~ .(asf|ASF|asx|ASX|avi|AVI|avif|AVIF|avifs|AVIFS|bmp|BMP|class|CLASS|css|CSS|divx|DIVX|doc|DOC|docx|DOCX|eot|EOT|exe|EXE|gif|GIF|gz|GZ|gzip|GZIP|htc|HTC|ico|ICO|jpe|JPE|jpeg|JPEG|jpg|JPG|js|JS|js2|JS2|js3|JS3|js4|JS4|json|JSON|less|LESS|m4a|M4A|m4v|M4V|mdb|MDB|mid|MID|midi|MIDI|mov|MOV|mp3|MP3|mp4|MP4|mpe|MPE|mpeg|MPEG|mpg|MPG|mpp|MPP|odb|ODB|odc|ODC|odf|ODF|odg|ODG|odp|ODP|ods|ODS|odt|ODT|ogg|OGG|ogv|OGV|_otf|otf|_OTF|OTF|pdf|PDF|png|PNG|pot|POT|pps|PPS|ppt|PPT|pptx|PPTX|qt|QT|ra|RA|ram|RAM|svg|SVG|svgz|SVGZ|swf|SWF|tar|TAR|tif|TIF|tiff|TIFF|ttc|TTC|_ttf|ttf|_TTF|TTF|wav|WAV|wax|WAX|webm|WEBM|webp|WEBP|wma|WMA|wmv|WMV|wmx|WMX|woff|WOFF|woff2|WOFF2|wri|WRI|xla|XLA|xls|XLS|xlsx|XLSX|xlt|XLT|xlw|XLW|zip|ZIP)$ {
etag on;
add_header Cache-Control "max-age=31536000, public";
add_header Last-Modified "";
}

Sans doute lié à cette demande.

Originally posted by @quentin in #43 (comment)

Un des cas d'usage principal de deux fleurs est le site web de contenu statique. Hors aucun réglage de cache navigateur n'est mis par défaut. Cela oblige toutes les visites à re-charger l'ensemble des images, polices, js, css. C'est une fonctionnalité de base quand on héberge derrière du Apache HTTPD ou Nginx. L'option peut être par défaut ou sur option (pas par fichier mais sur l'ensemble d'un site). A noter que les réglages de cache ne sont souvent pas les mêmes entre une applications web (type SaaS, application de gestion) et du web de contenu (site vitrine, blog, ecommerce, média). 2 profils peuvent être créés. Tous les réglages suivants sont pour du web de contenu. Le cache navigateur est contrôlé par 4 entêtes HTTP : Cache-Control Expires ETag Last-Modified Le plus rétro compatible est l'entête cache control. Cache-Control: public, max-age=31536000 Le réglage est ici pour 1 an qui est la bonne pratique générale standardisée par Lighthouse. Plus d'information : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control Expires Tout comme Cache-Control, l’en-tête Expires permet de définir combien de temps la ressource peut être mise en cache, mais en indiquant une date fixe au lieu d’une durée. En revanche, si l’en-tête Cache-Control est présent avec la directive max-age, l’en-tête Expires est ignoré par le navigateur. Il est généralement préférable d’utiliser l’en-tête Cache-Control plutôt que Expires. Exemple : Expires: Wed, 21 Oct 2015 07:28:00 GMT Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires ETag L’en-tête ETag définit un identifiant calculé spécifique à une version d’une ressource. Ainsi, lorsqu’une ressource a passé sa période de mise en cache (défini par l’en-tête Cache-Control ou Expires), le navigateur peut demander à nouveau la ressource en précisant le ETag de la version en cache. Si la ressource n’a pas changé depuis (donc si l’ETag est toujours le même), le serveur indiquera au navigateur que la ressource en cache est toujours valable via une réponse avec un code HTTP 304 Not Modified. L’en-tête ETag est donc un supplément à l’en-tête Cache-Control. Exemple: ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4" Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag Last-Modified L’en-tête Last-Modified offre un mécanisme équivalent à ETag mais utilise la date de dernière modification au lieu d’un identifiant calculé. Cette méthode reste moins précise que ETag. Par conséquent, l’en-tête ETag reste préférable à Last-Modified. Exemple : Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT Pour en savoir plus, voir la documentation Mozilla : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified Le réglage se fait généralement par type de fichier. Voici les réglages typiques : HTTPD : # BEGIN Webvert <IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/avif .avif AddType image/avif-sequence .avifs AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType image/webp .webp AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType video/webm .webm AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType video/ogg .ogv AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType image/svg+xml .svg .svgz AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/avif A31536000 ExpiresByType image/avif-sequence A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType video/webm A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType video/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <FilesMatch "\.(asf|ASF|asx|ASX|avi|AVI|avif|AVIF|avifs|AVIFS|bmp|BMP|class|CLASS|css|CSS|divx|DIVX|doc|DOC|docx|DOCX|eot|EOT|exe|EXE|gif|GIF|gz|GZ|gzip|GZIP|htc|HTC|ico|ICO|jpe|JPE|jpeg|JPEG|jpg|JPG|js|JS|js2|JS2|js3|JS3|js4|JS4|json|JSON|less|LESS|m4a|M4A|m4v|M4V|mdb|MDB|mid|MID|midi|MIDI|mov|MOV|mp3|MP3|mp4|MP4|mpe|MPE|mpeg|MPEG|mpg|MPG|mpp|MPP|odb|ODB|odc|ODC|odf|ODF|odg|ODG|odp|ODP|ods|ODS|odt|ODT|ogg|OGG|ogv|OGV|_otf|otf|_OTF|OTF|pdf|PDF|png|PNG|pot|POT|pps|PPS|ppt|PPT|pptx|PPTX|qt|QT|ra|RA|ram|RAM|svg|SVG|svgz|SVGZ|swf|SWF|tar|TAR|tif|TIF|tiff|TIFF|ttc|TTC|_ttf|ttf|_TTF|TTF|wav|WAV|wax|WAX|webm|WEBM|webp|WEBP|wma|WMA|wmv|WMV|wmx|WMX|woff|WOFF|woff2|WOFF2|wri|WRI|xla|XLA|xls|XLS|xlsx|XLSX|xlt|XLT|xlw|XLW|zip|ZIP)$"> FileETag MTime Size <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "max-age=31536000, public" Header unset Last-Modified </IfModule> </FilesMatch> # END Webvert Nginx : location ~ \.(asf|ASF|asx|ASX|avi|AVI|avif|AVIF|avifs|AVIFS|bmp|BMP|class|CLASS|css|CSS|divx|DIVX|doc|DOC|docx|DOCX|eot|EOT|exe|EXE|gif|GIF|gz|GZ|gzip|GZIP|htc|HTC|ico|ICO|jpe|JPE|jpeg|JPEG|jpg|JPG|js|JS|js2|JS2|js3|JS3|js4|JS4|json|JSON|less|LESS|m4a|M4A|m4v|M4V|mdb|MDB|mid|MID|midi|MIDI|mov|MOV|mp3|MP3|mp4|MP4|mpe|MPE|mpeg|MPEG|mpg|MPG|mpp|MPP|odb|ODB|odc|ODC|odf|ODF|odg|ODG|odp|ODP|ods|ODS|odt|ODT|ogg|OGG|ogv|OGV|_otf|otf|_OTF|OTF|pdf|PDF|png|PNG|pot|POT|pps|PPS|ppt|PPT|pptx|PPTX|qt|QT|ra|RA|ram|RAM|svg|SVG|svgz|SVGZ|swf|SWF|tar|TAR|tif|TIF|tiff|TIFF|ttc|TTC|_ttf|ttf|_TTF|TTF|wav|WAV|wax|WAX|webm|WEBM|webp|WEBP|wma|WMA|wmv|WMV|wmx|WMX|woff|WOFF|woff2|WOFF2|wri|WRI|xla|XLA|xls|XLS|xlsx|XLSX|xlt|XLT|xlw|XLW|zip|ZIP)$ { etag on; add_header Cache-Control "max-age=31536000, public"; add_header Last-Modified ""; } Sans doute lié à cette demande. _Originally posted by @quentin in https://git.deuxfleurs.fr/Deuxfleurs/guichet/issues/43#issue-1092_
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
main
feat/aerogramme
nix
show-everyone-by-default
Labels
Clear labels   
cat
bug

  
cat
feature

  
cat
idea

  
cat
performance

  
cat
reliability

  
cat
security

  
cat
ui

  
difficulty
high

  
difficulty
low

  
difficulty
mid

  
prio
high

  
prio
low

  
prio
mid

No Label
cat
bug
cat
feature
cat
idea
cat
performance
cat
reliability
cat
security
cat
ui
difficulty
high
difficulty
low
difficulty
mid
prio
high
prio
low
prio
mid
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: Deuxfleurs/guichet#65
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?