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

ortolojf · 14 Décembre 2019

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.

rick38 · 14 Décembre 2019

Je maintiens ce que j'avais dit, l'avenir (et le présent), c'est les PWA.

Est-ce qu'il y a urgence ? Ca n'est pas la bonne question, c'est plutôt, s'il y a urgence à développer une app Android et Apple, ne pas s'embarquer sur les technos du passées, et préférer une PWA.

Après les gens font ce qu'ils veulent, c'est juste mon avis

ortolojf · 14 Décembre 2019

Bonjour rick38

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

Merci beaucoup.

Amicalement.

Wiloooo · 14 Décembre 2019

J'apporterai toutefois une nuance. Tout dépend de ton domaine d'activité.
Exemple concret : tout ce qui est communauté / rencontres etc les applications natives resteront encore longtemps dominantes. Les PWAs ont une grande faiblesses elles ne donnent pas la visibilité du playstore.

De plus la célèbre pomme est encore à la traîne.... Sans compter que PWA et SEO ne font pas toujorus bon ménage même si ça s'améliore beaucoup !

ortolojf · 14 Décembre 2019

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.

spout · 14 Décembre 2019

Tous livres sur les PWA (comme la plupart des technos Web) sont déjà obsolètes avant même d'être imprimés.

rick38 · 15 Décembre 2019

Wiloooo a dit:
Les PWAs ont une grande faiblesses elles ne donnent pas la visibilité du playstore.

Il y a des moulinettes pour les encapsuler dans une app Android ou iPhone, c'est possible à peu de frais. Même si je suis sceptique sur la "visibilité" d'un Store. Les gens ne découvrent pas une appli en se baladant dans un store, mais sur le web, sur le site web de l'app, ou la pub... Et il suffit de visiter un site qui a une PWA pour que le site nous propose de l'installer, sans rien à télécharger, donc beaucoup plus facile que de devoir chopper une app...

Et le store de Microsoft accepte les PWA, même s'il me recale à chaque fois parce qu'il trouve que mes icônes ne sont pas originales ! pfff

rick38 · 15 Décembre 2019

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

Arf, encore des excuses par peur de vous lancer

On vous a déjà expliqué, vous pouvez très bien commencer en auto-entrepreneur, là AUCUNE LOI DARMARIN, 70,000 euros de CA par an c'est déjà large pour commencer ! Ah oui mais vous prévoyez de faire 1 million d'euros dès le 1er mois je comprends

Pour les PWA, il y a plein de bons tutoriaux. Il faut taper tutorial PWA dans Google (en anglais, il y aura plus de choix). Ca va du basique (juste faire qu'un site existant soit une PWA), à plus avancé qui est la gestion des caches en local, et les notifications (ce qui est le but quand même pour faire comme une "vraie app"). Le reste, ce n'est pas spécifique aux PWA, il faut connaître le JS, le responsive, faire qu'en format mobile ça ressemble le plus possible à une app, éviter de recharger les pages à chaque clic de liens, mais utiliser au lieu de ça de l'ajax pour juste récupérer le contenu puis l'afficher dans le template html, qui lui reste dans le cache local... Il n'y a pas grand chose à apprendre avec les PWA, il faut juste utiliser les techniques existantes.

spout · 15 Décembre 2019

Avec Workbox webpack plugins c'est easy game : https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin

ortolojf · 15 Décembre 2019

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.

ortolojf · 24 Décembre 2019

spout a dit:
Tous livres sur les PWA (comme la plupart des technos Web) sont déjà obsolètes avant même d'être imprimés.

Merci beaucoup Spout

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

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

Amicalement.

phonyclic · 29 Décembre 2019

ortolojf a dit:
Merci beaucoup Spout

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

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

Amicalement.

@spout l'a dit, les livres sont obsoléte avant même leur publication, tu en a eu la preuve, tu vient de les acheter et tu les mets au placard direct. CQFD

ortolojf · 9 Janvier 2020

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.

ortolojf · 9 Janvier 2020

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.

spout · 9 Janvier 2020

C'est des outils sur la machine de développement, pas besoin sur la prod.

ortolojf · 10 Janvier 2020

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;
}

ortolojf · 10 Janvier 2020

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

ortolojf · 13 Janvier 2020

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.    |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

ortolojf · 15 Janvier 2020

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.

ortolojf · 15 Janvier 2020

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.

ortolojf · 18 Janvier 2020

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.

ortolojf · 20 Janvier 2020

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.