Quels produits/technos internet après les sites web ?

Bonjour

Effectivement, le réseau Internet sert à communiquer et s'informer, et dans le système actuel, c'est surtout par les sites web que Internet est utilisé.

Mais... Après les sites web, d'autres technologies sont apparues ou en train de l'être ?

Par exemple : Les WebApps ?

Y a-t-il urgence pour élargir nos sites web à des webapps ?

Y a-t-il d'autres technologies en perspective ?

Merci.

Amicalement.

 

Bonjour rick38

Qu'est ce qu'il y aurait comme livres sur les PWA ?

Merci beaucoup.

Amicalement.

 

Merci beaucoup

Déjà, j'ai tendance à procrastiner.

J'attends la diffusion des paiements téléphoniques bancaires qui me permettront de squeezer la Loi Darmanin.

Quant aux PWA, j'ai intérêt à me former aux nouveautés, car si je ne fais rien je n'aurai ni connaissances ni rien.

J'ai de la difficulté à trouver des liens/tutoriaux valables sur les PWA, à part celui de Google Developers dont je viens de charger les codes.

C'est pourquoi, j'aurais besoin d'une bonne bibliographie à propos des PWA.

Amicalement.

 

Bonjour Spout

Ce soir, sur Amazon, j'ai acheté deux livres :

- "Building Progressive WebApps",

- "Progressive Web Application Development by Example: Develop fast, reliable, and engaging user experiences for the web".

Brochés dur dur, ~ 64 euros chacun.

Merci beaucoup pour ton aide.

Amicalement.

 

Merci beaucoup Spout

J'ai trouvé mon bonheur dans : "Google Developers Codelabs".

Et j'ai laissé mes deux books de côté.

Amicalement.

 

Voili voilou

Je vais potasser le lien de Spout.

J'ai vu https://vaadin.com/learn/tutorials/learn-pwa/production-pwa-webpack-setup

Plutôt complexe mais avec Google çà va aller.

Merci beaucoup Spout.

Amicalement.

 

Bon

Dur, dur...

npm, Workbox et Webpack sont des outils actuels et complexes.

Durant les mises à jour de mon Debian, qui me garantira les compatibilités de tous ces composants ?

Au moins un serveur web ( Nginx/php-fpm ), c'est simple et l' OS assure la compatibilité.

Si je me met admettons ( avec beaucoup d'efforts ) , à faire une version PWA de mon site, qu'arrivera-t-il si la technologie devient obsolète ou si j'ai un problème de version ?

Je pense faire "à la mano", en programmant le ( faible ) nombre de composants à la main.

Merci beaucoup pour vos conseils.

Amicalement.

 

Bonjour Spout

Voilà ce que j'ai fait, à partir de ton lien :

Maintenant, je vais me pencher sur les caches qui se font en même temps que le loading.

On appelle çelà "steal", non ?

Merci de vos avis et suggestions.

Amicalement.

Code:

/*** service-worker.js  **/

'use strict';
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';
const FILES_TO_CACHE = [
];
self.addEventListener('install', (evt) => {
  console.log('[ServiceWorker] Install');
  // Precache static resources here.
  evt.waitUntil(
      caches.open(CACHE_NAME).then((cache) => {
        console.log('[ServiceWorker] Pre-caching offline page');
         return cache.addAll(FILES_TO_CACHE);
      })
  );
  self.skipWaiting();
});
self.addEventListener('activate', (evt) => {
  console.log('[ServiceWorker] Activate');
  // Remove previous cached data from disk.
  evt.waitUntil(
      caches.keys().then((keyList) => {
        return Promise.all(keyList.map((key) => {
          if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
            console.log('[ServiceWorker] Removing old cache', key);
            return caches.delete(key);
          }
        }));
      })
  );
  self.clients.claim();
});
self.addEventListener('fetch', (evt) => {
  console.log('[ServiceWorker] Fetch', evt.request.url);
  // Add fetch event handler here.
  if (evt.request.url.includes('/forecast/')) {
      console.log('[Service Worker] Fetch (data)', evt.request.url);
      /**
        caches.open(DATA_CACHE_NAME).then((cache) => {
            return fetch(evt.request).then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      });
      **/
  return;
} // Fin de if ... /forecast.
evt.cacheFirst(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request).then((response) => {
            return response || fetch(evt.request);
          });
    }));
evt.networkFirst(
    caches.open(CACHE_NAME).then((cache) => {
    return fetch(evt.request).then((response) => {
        // If the response was good, clone it and store it in the cache.
        if (response.status === 200) {
            cache.put(evt.request.url, response.clone());
        }
        return response;
    }).catch((err) => {
        // Network request failed, try to get it from the cache.
        return cache.match(evt.request);
 });
}));
  return;
}

 

Pardon

Il s'agit de : "Stale whil revalidate".

C'est le 4ème ci-dessous :

XOR signifie que si le cache est alimenté, on ne fait rien d'autre.

|| signifie que les deux s'éxécutent simultanément.

Y a-t-il d'autres techniques/algorithmes de caches ?

Merci.

Amicalement.

Code:

        1) Static
        2) Cache XOR (Network -> Cache)
        3) Cache XOR Network       
        4) Cache || Network       

 

Bonjour

Et voilà le super lien :

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

Voici ce que j'en ai tiré :

Code:

***************************************************************************************************************************************************************************************
|    Types        |    Events        |    Repert.    |    Scripts        |                    Rules                 |
***************************************************************************************************************************************************************************************
|    allCache     |    "install"    |    Install/    |     OnInstallAsDependency.js    | Ideal for: CSS, images, fonts, JS, templates… basically anything you'd consider static to that "version" of your site.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    someCache    |    "install"    |    Install/    |    OnInstallNotAsDependency.js    | Ideal for: Bigger resources that aren't needed straight away, such as assets for later levels of a game.            |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    selectClean    |    "activate"    |    Activate/    |    OnActivate.js            | Ideal for: Clean-up & migration.        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    chooseOffline    |    "click"    |    UI/        |    OnUserInteraction.js        | Ideal for: If the whole site can't be taken offline, you may allow the user to select the content they want available offline. E.g. a video on something like YouTube, an article on Wikipedia, a particular gallery on Flickr.     |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|   Cache || Network    |    "fetch"    |    Then/        |    CacheOrNetwork.js        | Ideal for: Frequently updating resources such as a user's inbox, or article contents. Also useful for non-essential content such as avatars, but care is needed.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Stale        |    "fetch"    |    Stale/        |    StaleWhileRevalidate.js    | Ideal for: Frequently updating resources where having the very latest version is non-essential. Avatars can fall into this category.        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Notification    |    "push"        |    Push/        |    OnPushMessage.js        | Ideal for: Content relating to a notification, such as a chat message, a breaking news story, or an email. Also infrequently changing content that benefits from immediate sync, such as a todo list update or a calendar alteration.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Synchronize    |    "sync"        |    Sync/        |    OnBackgroundSync.js        | Ideal for: Non-urgent updates, especially those that happen so regularly that a push message per update would be too frequent, such as social timelines or news articles.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Cache Audit    |    "temporary"    |    Cache_Storage/    |    CachePersistence.js        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Precise Audit    |            |     Cache_Storage/    |    RequestPersistent.js        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Only Cache    |    "fetch"    |    Only/        |    CacheOnly.js            | Ideal for: Anything you'd consider static to that "version" of your site. You should have cached these in the install event, so you can depend on them being there.        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Only Network    |    "fetch"    |    Only/        |    NetworkOnly.js            | 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Cache XOR Network    |    "fetch"    |    Then/        |    CacheXorNetwork.js        | Ideal for: If you're building offline-first, this is how you'll handle the majority of requests. Other patterns will be exceptions based on the incoming request.        |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Both at once    |    "fetch"    |    Stale/        |    CacheNetworkRace.js        | Ideal for: Small assets where you're chasing performance on devices with slow disk access.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| Cache XOR (Network -> Cache)    |   "fetch"    |    Then/        |    NetworkXorCache.js        | Ideal for: A quick-fix for resources that update frequently, outside of the "version" of the site. E.g. articles, avatars, social media timelines, game leader boards.    |
***************************************************************************************************************************************************************************************
            PAGE
***************************************************************************************************************************************************************************************
|   Cache => Network    |    "fetch"    |    UI/        |    CacheThenNetwork.js        | Ideal for: Content that updates frequently. E.g. articles, social media timelines, game leaderboards.            |
***************************************************************************************************************************************************************************************
            SERVICE WORKER
***************************************************************************************************************************************************************************************
|    ServiceWorker    |    "fetch"    |    ServiceWorker/    |    ServiceWorker.js        | We always go to the network & update a cache as we go.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Failing Display    |    "fetch"    |    Fallback/    |    GenericFalllback.js        | Ideal for: Secondary imagery such as avatars, failed POST requests, "Unavailable while offline" page.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
|    Data => Template    |    "fetch"    |    UI/        |    ServiceWorkerSideTemplating.js    | Ideal for: Pages that cannot have their server response cached.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

Bonjour

Je prépare la mise en cache de mon site.

J'ai fait le tableau suivant :

Code:

*********************************************************************************************************************************
*     Events    *        Scripts            * Heures Renew    *            Pages                *
*********************************************************************************************************************************
*    "install"    *    OnInstallAsDependency.js    *   chargement    *                            *
*                            *   chargement    * /partenaires.php                    *
*                            *   chargement    * /php/cgu/mentions_legales.html            *
*********************************************************************************************************************************
*   "activate"    *         OnActivate.js        *   activation    *
*********************************************************************************************************************************
*    "fetch"    *        CacheOnly.js        *    never    * /partenaires.php                    *
*    "fetch"    *        CacheOnly.js        *    never    * /php/cgu/mentions_legales.html            *
*********************************************************************************************************************************
*    "fetch"    *        NetworkOnly.js        *   always    * /php/contact/contact.php                *
*********************************************************************************************************************************
*    "fetch"    *        NetworkOnly.js        *   always    * /php/courses_anciennes/statistiques_old_courses.php    *
*********************************************************************************************************************************
*    "fetch"    *        NetworkOnly.js        *   always    * /php/courses_nouvelles/statistiques_new_courses.php    *
*********************************************************************************************************************************
*    "fetch"    *        NetworkOnly.js        *   always    * /php/courses_actuelles/statistiques_new_courses.php    *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *    6:00    * /php/stats/derniers_gagnes.php            *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *    6:00    * /php/stats/new_new_affic_stats.php            *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *    6:00    * /php/stats/affic_stats.php                *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   13:15    * /php/courses_nouvelles/new_courses.php        *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   13:15    * /php/courses_nouvelles/pronostics_new_courses.php    *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   11-23:50    * /php/courses_anciennes/old_courses.php        *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   11-23:50    * /php/courses_anciennes/action_old_courses.php        *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   11-23:50    * /php/courses_anciennes/pronostics_new_old_courses.php *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   11-23:50    * /php/courses_actuelles/new_courses.php        *
*********************************************************************************************************************************
*    "fetch"    *        CacheXorNetwork.js    *   11-23:50    * /php/courses_actuelles/pronostics_new_courses.php    *
*********************************************************************************************************************************

Et voici le code de CacheXorNetwork.js :

Code:

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Ma question : Est-ce que ce script serait valable pour ce type de timing ( 1/jour ou 1/heure ) ?

Merci beaucoup de votre aide.

Amicalement.

 

Bonjour

Pour gérer/limiter les fichiers en cache ( ajout/suppression ) en fonction du nombre d'octets, y a-t-il une autre solution que de hasher les noms des fichiers avec leur timing de créat. ?

Après, on pourrait envisager cacheName.delete() ciblés par le fonctionnalités et en mode LRU ou autre.

Merci beaucoup.

Amicalement.

 

Pardon

Excusez-moi pour toutes ces questions stupides.

Je fais actuellement les réponses aux events : "install" et "activate".

Une chose m'échappe.

Il faut théoriquement mettre en cache les pages statiques en réponse à "install".

...Mais il faut aussi ( dans "activate" ), nettoyer le cache.

Si des fichiers statiques ont peut-être changé, comment fait-on pour les mettre en cache si on doit les nettoyer après ?

Cette question équivaut probablement au fait de savoir si une mise en cache écrase ou non le fichier déjà caché ?

Merci beaucoup de votre aide.

Amicalement.

 

Bonjour

Voilà, j'ai fait l'install et l'activate de ma PWA.

Une question :

Vu la complexité de l'arborescence des éléments des pages web d'une PWA, comment vous faites pour alimenter les éléments de ces pages ?

Peut-être par groupes d'éléments, et après avoir fetché ou décaché les data ?

Merci beaucoup.

Respectueusement.