Stratégie de cache PWA : timestamp ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 2 Septembre 2022.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Bonjour

    Problème de cache pour une PWA :

    J'imagine ceci :

    Le contenu en cache a sa première ligne => timestamp server & timestamp client.

    Ces timestamp sont enregistrés par le dernier fetch.

    Le smartphone ne connait que le timestamp client au moment de la lecture du cache, et sa longitude peut avoir changé depuis le dernier fetch.

    Comment évaluer les timestamps, si le cache ne doit, par ex., pas être plus vieux que 120 minutes ?

    Merci beaucoup de votre aide.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Pardon

    2 solutions :

    Date.now() qui ne tient pas compte des "secondes intercalaires" ou "leap seconds",

    TC39 Temporal qui en tient compte mais est encore en développement.

    Pour un simple cache, Date.now() est largement suffisant ?

    Merci beaucoup.
     
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 095
    J'aime reçus:
    380
    Première fois que je vois quelqu'un se prendre la tête pour les secondes intercalaires...
    La dernière qui a été ajoutée a été en 2016.
    Et que le cache soit alors à 120 ou 119 secondes à ce moment-là ne va pas perturber les utilisateurs...
     
    spout, ortolojf et Marie-Aude aiment ça.
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Voilà, voilà.

    Merci des avis et critiques.

    Pour l'intant, seules les response sont données, pas les data.

    C'est pour plus de modularité.

    Pas testé.

    Bien amicalement.


    Code:
    // "use strict";
    const CACHE_MAX = 200000;
    function inArray(needle, haystack) {
     let i; const len = haystack.length;
     for (i = 0; i < len; i += 1) {
      if (haystack[i].includes(needle)) {
       return true;
      }
     }
     return false;
    }
    const CACHE_NAME = 'cache-v1'; const FILES_TO_CACHE = [];
    /*****************/
    /**    INSTALL  **/
    /*****************/
    self.addEventListener('install', (event) => {
     console.log('[ServiceWorker] Install');
     // Precache static resources here.
     event.waitUntil(
      caches.open(CACHE_NAME).then((cache) => {
       console.log('[ServiceWorker] Pre-caching offline page');
       return cache.addAll(FILES_TO_CACHE);
      }),
     );
     self.skipWaiting();
    });
    /*******************/
    /**    ACTIVATE   **/
    /*******************/
    self.addEventListener('activate', (event) => {
     console.log('[ServiceWorker] Activate');
     // Remove previous cached data from disk.
     event.waitUntil(
      caches.keys().then((keyList) => Promise.all(keyList.map((key) => {
       if (key !== CACHE_NAME) {
        console.log('[ServiceWorker] Removing old cache', key);
        return caches.delete(key);
       }
      }))),
     );
     self.clients.claim();
    });
    /****************/
    /**     FETCH  **/
    /****************/
    function resolve(response) {
     let maintenant = Date.now();
     let delta = maintenant - parseInt(response.clone().slice(0, response.clone().indexOf('\n')), 10);
     if (delta > CACHE_MAX) {
      return fetch(event.request).then((response2) => {
       let newResponse = response2.clone().replace(/^[0-9]+\n/, maintenant);
       cache.put(event.request, newResponse);
      }).then((response) => // fetch(event.request).then(function (response)
       response);
     } // if (delta > CACHE_MAX)
     return response;
    }
    function reject(error) {
     console.log(`Erreur : ${error}`);
     let maintenant = Date.now();
     return fetch(event.request).then((response3) => {
      let newResponse2 = response3.clone().replace(/^[0-9]+\n/, maintenant);
      cache.put(event.request, newResponse2);
      return response3;
     });
    }
    self.addEventListener('fetch', (event) => {
     console.log(`[ServiceWorker] Fetch ${event.request.url} in ${event.request.method}`);
     //  Autres conditions/caches après.
     if (inArray(event.request.url, FILES_TO_CACHE) !== true) {
      if (event.request.url.includes('statistiques')) {
       event.respondWith(
        fetch(event.request).then((response) => response).then((response) => // fetch(event.request).then(function (response)
         response).catch((error) => {
          console.log(`Erreur : ${error}`);
         }),
       ); // event.respondWith(
      } // if (event.request.url.includes("statistiques"))
      event.respondWith(
       maPromise = new Promise((resolve, reject) => {
        caches.open(CACHE_NAME).then((cache) => cache.match(event.request).then((response) => resolve(response)).catch((error) => reject(error)).catch((error) => {
         console.log(`Erreur : ${error}`);
        }));
       }),
      ); // event.respondWith(
     }
    });
    
    
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Bonjour

    Comment est-il possible d'ajouter une ligne en début de cache ?

    Le cache est-il une string ?

    Merci beaucoup.
     
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Plus généralement :

    Est-il possible d'associer une variable/timestamp à une ressource en cache ?

    Evidemment, de lire et écrire dessus.

    Amicalement.
     
  7. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Rebonjour

    Est-il possible d'enregistrer une variable dans le cache ?

    Genre :


    Code:
    const CACHE_KEY_PREFIX = 'XYZT_';
    
    self.addEventListener('fetch', function(event) {
     let Request = event.request;
     let cacheRequest =  new Request(CACHE_KEY_PREFIX + Request.url);
     let maintenant = Date.now();
        caches.open(CACHE_NAME).then(function(cache) {
                timestamp = parseInt(timestamp, 10);
                cache.put(cacheRequest, maintenant);
            }      
    }
    
    
    Comme le cache fait correspondre une Request clé à une valeur, est-ce que ce hack est valide ?

    Merci beaucoup.
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Pardon

    Il y a une autre solution que le timestamp.

    C'est l'équivalent de l'ETag.

    Soit dans le header soit en lecture d'une url associée à l'url à charger.

    Si c'est dans le header, je suis obligé de lire aussi le body.

    Si c'est une autre url, comment côté serveur, présenter de manière automatique, un ETag hash code de l'url initiale ?

    Merci beaucoup.

    Amicalement.
     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Repardon.

    J'ai récupéré dans mes fichiers l'algorithme complet de cache HTTP.

    Je vais l'implémenter dans class_cache_inc.php ( merci à Noren ) pour mon site, et puis ma PWA.

    Bien amicalement.
     
  10. nicodak
    nicodak WRInaute occasionnel
    Inscrit:
    21 Octobre 2020
    Messages:
    273
    J'aime reçus:
    65
    Je savais que tu trouverais la solution !
     
    ortolojf apprécie ceci.
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Bonjour nicodak

    Parmi les headers à prendre en compte, le Cache-Control n'est-il pas plus ou moins obsolète ?

    Même chose pour le Expires?

    Pour un "Cache-Control: max-age=n" et n fixe, le browser adapte son header client Age ad hoc ?

    Merci beaucoup.
     
Chargement...
Similar Threads - Stratégie cache PWA Forum Date
Stratégie SEO Wordpress : Quelle Page Exclure? Débuter en référencement Lundi à 19:38
Bloqués sur notre Stratégie de SEO Demandes d'avis et de conseils sur vos sites 30 Octobre 2022
Utiliser YouTube Shorts dans sa stratégie marketing Autres réseaux sociaux 25 Mars 2022
htaccess vs modifications site, quelle stratégie ? Merci URL Rewriting et .htaccess 10 Mars 2022
Stratégie Blog de Niche Internationalisé et duplicate content Référencement Google 19 Décembre 2021
Stratégie d'enchère Google Ads : conversion ou CPC ? AdWords 7 Septembre 2021
Stratégie Back Link - B2B - Industriel / BTP Netlinking, backlinks, liens et redirections 8 Juillet 2021
Soyez plus fin dans votre stratégie de question / réponse ! Débuter en référencement 23 Mai 2021
Stratégies d'enchères automatiques de google Ads AdWords 29 Mars 2021
Bloc de liens de mots-clés : stratégie correcte ? Débuter en référencement 13 Janvier 2021
Entreprise existante mais sans site : quelle stratégie seo? Débuter en référencement 22 Novembre 2020
Stratégie de domaine et sous-domaine en SEO Noms de domaine et référencement 14 Octobre 2020
Maillage Interne : stratégie Netlinking, backlinks, liens et redirections 22 Juin 2020
Critique d'une stratégie de netliking Netlinking, backlinks, liens et redirections 21 Avril 2020
AMP stories : quelle stratégie SEO mettre en place ? Référencement Google 12 Mars 2020
Backlinks et meilleure stratégie SEO Netlinking, backlinks, liens et redirections 14 Octobre 2019
Etre dans le top 3 des résultats de recherche seulement avec une stratégie de contenu ? Référencement Google 17 Septembre 2019
Le succès SEO de HomeToGo : une stratégie anti pages zombies Techniques avancées de référencement 9 Août 2019
Stratégie de référencement site ecommerce avec un seul type de produits Débuter en référencement 7 Février 2019
EMD en poche quelle stratégie ? Noms de domaine et référencement 31 Décembre 2018