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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 14 Décembre 2019.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 533
    J'aime reçus:
    205
    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 :rolleyes:
     
    UsagiYojimbo apprécie ceci.
  3. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    Bonjour rick38

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

    Merci beaucoup.

    Amicalement.
     
  4. Wiloooo
    Wiloooo Nouveau WRInaute
    Inscrit:
    14 Décembre 2012
    Messages:
    43
    J'aime reçus:
    4
    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 !
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 078
    J'aime reçus:
    295
    Tous livres sur les PWA (comme la plupart des technos Web) sont déjà obsolètes avant même d'être imprimés.
     
    UsagiYojimbo et theunholy aiment ça.
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 533
    J'aime reçus:
    205
    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
     
    #7 rick38, 15 Décembre 2019
    Dernière édition: 15 Décembre 2019
  8. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 533
    J'aime reçus:
    205
    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 :D

    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.
     
    #8 rick38, 15 Décembre 2019
    Dernière édition: 15 Décembre 2019
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 078
    J'aime reçus:
    295
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    Merci beaucoup Spout ;)

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

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

    Amicalement.
     
  12. phonyclic
    phonyclic WRInaute occasionnel
    Inscrit:
    25 Octobre 2017
    Messages:
    406
    J'aime reçus:
    88
    @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
     
  13. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
  14. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  15. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 078
    J'aime reçus:
    295
    C'est des outils sur la machine de développement, pas besoin sur la prod.
     
  16. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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;
    }
    
    
    
    
    
     
  17. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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       
    
    
     
  18. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.    |
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    
    
     
  19. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  20. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  21. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
  22. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 137
    J'aime reçus:
    12
    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.
     
Chargement...
Similar Threads - produits technos internet Forum Date
Mes fiches produits ne s'affichent pas sur Google Demandes d'avis et de conseils sur vos sites Aujourd'hui à 12:18
Référencement des fiches produits e-commerce Aujourd'hui à 10:34
Les ID dans l'URL des fiches produits Techniques avancées de référencement Lundi à 14:01
Search Console Problème d'indexations de pages produits Crawl et indexation Google, sitemaps 30 Septembre 2020
Optimisation pour la catégorie de produits de commerce électronique Rédaction web et référencement 26 Juin 2020
Afficher les produits suivants en ajax Développement d'un site Web ou d'une appli mobile 12 Mai 2020
Que faire des produits en rupture définitive ? Redirection 301 ? e-commerce 20 Avril 2020
Une page d'accueil peut-elle phagocyter des pages produits? Référencement Google 31 Mars 2020
Pages mal référencées à cause des "produits suggérés" Problèmes de référencement spécifiques à vos sites 18 Mars 2020
WordPress Metadonnées pour des produits Woocommerce Débuter en référencement 25 Février 2020