Apache (sans php) : Problème de cache si MAJ du site (fichier HTML / JS)

Comment faire ?

Le problème exposé dans ce sujet a été résolu.

Bonjour,

Actuellement j’intègre simplement mes fichiers en faisant :

<script type="text/javascript" src="/js/parser.js"></script>

Mes utilisateurs rencontrent un soucis de cache (obligation de faire CTRL+F5). Je voudrais savoir comment faire pour que les fichiers se mettent à jour en cas de changement de version à coup sûr sans pour autant désactiver le cache. Je souhaite lister les solutions qui s’ouvrent à moi avant d’en choisir une.

  • Je voudrais éviter d’utiliser require.js avec un "?prefix="+(+new Date()) à la fin.
  • Je n’ai pas PHP sur mon serveur, je n’ai donc pas de rooter de ressource qui modifie l’Etag.
  • Une autre solution serait de générer mon projet sur Gulp avec des urls différentes.

Avez-vous d’autres idées ?

Bon vol,

A.

+0 -0

Une autre solution serait de générer mon projet sur Gulp avec des urls différentes.

Je pense que c’est une bonne solution.
Je ne connais pas Gulp, pourrais-tu par exemple faire comme cela ?

<script type="text/javascript" src="/js/v1.3/parser.js"></script>
+0 -0

Une autre solution serait de générer mon projet sur Gulp avec des urls différentes.

Je pense que c’est une bonne solution.
Je ne connais pas Gulp, pourrais-tu par exemple faire comme cela ?

<script type="text/javascript" src="/js/v1.3/parser.js"></script>

Nuage

Il n’y a pas vraiment de difficulté, tu écris ce que tu veux faire dans un fichier .js puis tu lances la commande gulp avec nodejs : https://gulpjs.org/

+0 -0

Au final j’utilise la méthode : style.css?v=f3sef1s5d10

gulp-html-replace dans l’usage ça m’a forcé à nommer les fichier différemment. Au lieu de style.css, j’ai du renommer par nom_de_ma_page_html.css.

const cleanHTML = () => 
    gulp.src(watchlist.cleanHTML.src, srcOptions)
        .pipe(htmlreplace({
            beta: "",
            css: {
                src: `?v=${version}`,
                tpl: '<link rel="stylesheet" type="text/css" href="/design/%f.css%s">'
            },
            authcss:  {
                src: `?v=${version}`,
                tpl: '<link rel="stylesheet" type="text/css" href="/design/index.css%s">'
            },
            js: {
                src: `?v=${version}`,
                tpl: '<script type="text/javascript" src="/js/%f.js%s"></script>'
            }
        }))
        .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest(outputBuildFolder))
;

Mon fichier html :

<html>
<head>
    <meta charset="utf-8">
    <meta name="language" content="fr">
    <title>Titre :)</title>
    <link rel="icon" sizes="256x256" type="image/png" href="/favicon.png">
    <!-- build:css --><!-- endbuild -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!-- build:beta -->
        <link rel="stylesheet/less" type="text/css" href="/design/style.less">
        <script type="text/javascript" src="/js/lib/less-3.0.4.min.js"></script>
    <!-- endbuild -->

    <script type="text/javascript" src="/js/lib/jquery-3.3.1.min.js"></script>
    <!-- build:js --><!-- endbuild -->

    <!-- build:beta -->
        <script type="text/javascript" src="/js/app/jquery.caret.js"></script>
        <script type="text/javascript" src="/js/app/interface.js"></script>
        <script type="text/javascript" src="/js/app/spam_filter.js"></script>
    <!-- endbuild -->
</head>
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte