interface réseau d'une PWA.

WRInaute accro
Bonjour

J'ai étudié le protocole de cache HTTP.

Je me prépare à la conception/programmation d'une PWA, censée représenter mon site web de statistiques/pronostics courses de chevaux.

Les PWA ont des caches spécifiques avec logique programmée dans les réponses à l'event Fetch.

Mais il y a aussi en amont, la logique du protocole de cache HTTP.

Ma question : ces réponses à l'event Fetch dans la PWA, doivent-elle ( c'est probable ), en amont simuler un navigateur, c'est-à-dire comporter ce protocole de cache HTTP ?

Et en aval, les caches spécifiques de la PWA.

Si oui, ( c'est annexe ), y a-t-il déjà sur le net, des librairies Javascript implémentant ces caches ?

Merci beaucoup de vos réponses.

Amicalement.
 
WRInaute impliqué
https://github.com/jakearchibald/idb
Et de la doc : https://developer.mozilla.org/fr/docs/Web/API/Cache

Mais le fetch passe de toute façon par le cache du navigateur, le reste c'est si tu veux mettre en place un cache toi-même pour un fonctionnement offline (surtout).
Tu devrais commencer par un truc simple où tu ne mets rien en cache toi-même.

There are only two hard things in Computer Science: cache invalidation and naming things.
-- Phil Karlton
 
WRInaute accro
Bonjour colonies

Evidemment, une PWA déjà installée, dépend du navigateur ?

Si non, son javascript et html ne pourrait pas être interprété.

J'hésite surtout sur les types d'objets à mettre en cache simple, je dispose déjà de routines fetch tout azimut.

Merci beaucoup pour ton aide.

Amicalement.
 
WRInaute accro
Bonjour

Voici deux routines faisant : Cache ou Fetch puis mise en cache.

Quelle est la plus rapide des deux ?

Merci beaucoup.


JavaScript:
/**  SIMPLE CACHE THEN NETWORK THEN CACHE  **/

self.addEventListener('fetch', (event) => {
  event.respondWith(async function() {
    const cache = await caches.open('mysite-dynamic');
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) return cachedResponse;
    const networkResponse = await fetch(event.request);
    event.waitUntil(
      cache.put(event.request, networkResponse.clone())
    );
    return networkResponse;
  }());
});


/**  COMPLEX CACHE THEN NETWORK THEN CACHE  **/

self.addEventListener('fetch', (event) => {
  event.respondWith(async function() {
    const cache = await caches.open('mysite-dynamic');
    const cachedResponse = await cache.match(event.request);
    const networkResponsePromise = fetch(event.request);
    event.waitUntil(async function() {
      const networkResponse = await networkResponsePromise;
      await cache.put(event.request, networkResponse.clone());
    }());
    // Returned the cached response if we have one, otherwise return the network response.
    return cachedResponse || networkResponsePromise;
  }());
});
 
Nouveau WRInaute
ortolojf, j'apprécie tes posts, j'aime lire des choses techniques que je ne comprends pas,
Sans vouloir offenser personne, je pense que les participants à ce forum ne sont pas les mieux placés pour t'aider. En dehors de 2 ou 3 geeks. Tu pourrais trouver plus de matière sur les forums de codage.
Mais pour parler seo, c'est ici.
 
WRInaute accro
Ah bon...

Maintenant, j'en suis à la phase de transport des données.

Vaut-il mieux :

- télécharger du HTML?

- télécharger du JSON ?

- lire une base de données distante de type Firebase ?

des points de vue :

- rapidité,

- économie réseau.

Merci beaucoup
 
WRInaute accro
Pardon

En préparation de ma PWA.

J'ai commis une page Mustache, cette technologie semble alourdir le réseau, car les données brutes prennent plus de place que le code html équivalent.

Je pourrais mettre des data avec des variables/clés plus petites.

Voici : https://www.pronostics-courses.fr/tmp_page.php

C'est un calendrier avec des liens hyper-textes réels et pas de onclick.

Merci beaucoup de vos conseils et avis.
 
WRInaute accro
Voilà voilà

C'est beaucoup plus léger.

7944 octet de html.

Vive Mustache ! ;)

Après c'est un pensum de déterminer le fixe et le variable des pages.

Dur, dur...
 
Dernière édition:
Discussions similaires
Haut