2018 sera les Progressive Web Apps et fin des apps mobiles

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par rick38, 28 Décembre 2017.

  1. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 186
    J'aime reçus:
    141
    Un petit post parce que je n'ai encore jamais vu abordé les PWA (Progressive Web Apps) dans le forum, alors que c'est l'avenir !
    Désolé pour tous ceux qui ont cru aux apps mobiles, mais le fait est que convaincre un utilisateur d'installer une app, ou encore de lui faire savoir que notre app existe, devient de plus en plus une mission impossible. La plupart des gens ne téléchargent pas plus que Facebook, Instagram... quand tout ça n'est pas déjà installé sur le mobile. Pas les apps des sites qu'ils ne consultent pas tous les jours.

    Donc bref, les PWA ont l'avantage de ne demander aucune installation, et d'être moins coûteuses à développer puisque non dépendante d'un OS. Windows Store a annoncé qu'ils les intègrera bientôt (ok personne n'utilise Windows Store...), et Apple a annoncé que Safari aussi sera bientôt compatible (alors que c'est une techno Google à la base, qui va lui faire perdre des millions de $ car les apps se passent de l'App Store).

    Donc ma théorie est que dans l'avenir, tout projet reposant à la base sur un site Web, ne développera plus à côté une app Android/iOS, mais "mettra à jour" son site afin d'être compatible PWA.

    Site web responsive et app ne feront plus qu'un.

    Désolé pour ceux qui se sont formés au dev Android ou iOS, ils peuvent oublier Java, Swift, Objective C++.... :D
     
    #1 rick38, 28 Décembre 2017
    Dernière édition: 28 Décembre 2017
    Sezar apprécie ceci.
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 874
    J'aime reçus:
    72
    Par contre, autant la plupart des conférenciers louent les capacités SEO de PWA, autant une PWA correctement pensée pour le SEO, je n'en ai jamais vu.
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  5. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Donc si je comprends bien une PWA remplace en faite la version responsive, en clair ?!
    Donc plus besoin de se prendre la tête à faire des sites responsive puisque via le manifest on va prévenir notre internaute en mobile, qu'il sera relayé sur la version PWA.

    Comme c'est développé par google donc opérationnel sur IOS Android mais j'ai cru comprendre que cela ne l'était pas encore sur les autres genre Apple ?

    Donc n'est-il pas trop tôt de se lancer dans une version PWA en sachant que nous risquerions de perdre des internautes puisqu'ils ne pourraient pas accéder à la version PWA ? Dans ce cas, qu'en est-il de la version responsive ?

    Doit-on faire une version PWA + responsive pour répondre à tout type de supports ?
    ça risque de devenir vite laborieux ?!
    Non ?

    C'est tout beau parce que c'est tout neuf mais n'est- pas trop tôt de se lancer là-dedans en sachant que se fut la même chose pour la version AMP. ça très vite démarré et maintenant c'est déjà obsolète !
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    Non PWA c'est en bref: Web mobile + utilisation de l'API HTML5 (cfr: https://whatwebcando.today/ ) + application cache + pas d'utilisation du store.
    Lis l'article de Semrush ça explique ça très bien.
     
    Sezar apprécie ceci.
  7. Icipierrot
    Icipierrot WRInaute occasionnel
    Inscrit:
    30 Octobre 2013
    Messages:
    336
    J'aime reçus:
    14
    Le problème c'est plutôt pour trouver des techniciens qui maîtrisent déjà le PWA. Il n'y en a pas beaucoup, donc la transformation d'un site existant en PWA reste chère. Pour ma part je fignole ma version AMP, et je garde un œil sur ce qui se fait pour passer en PWA cette année.
     
    Sezar apprécie ceci.
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    Ah bon ? T'as demandé des devis pour cette affirmation ?
    C'est bcp plus facile qu'AMP.
     
  9. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  10. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Bonjour,
    Voici mon retour...

    Tout d'abord, comme c'est encore expérimental, c'est chaud à trouver de bons tutos.
    Sur youtube pfffffff c'est plus des cours que du concret !
    Bref... j'ai vraiment galéré au début pour comprendre le fonctionnement. Je me suis fait peur en voyant la doc:
    https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API
    Donc mon point de départ a été un excellent générateur de service worker. Très bien fait.
    http://manifoldjs.com/generator

    De là, il a fallu que je mettes un peu les mains dedans pour l'adapter à mes besoins. Disons que cela m'a aidé à 70%. grâce au générateur, j'ai compris 100 fois plus vite que les vidéos youtube et Cie. Je suis allé à l'essentiel pour éviter de me pourrir l'esprit avec trop de technicité. Le cas pratique + la doc et ça roule ;)
    Ma pwa stocke les pages visitées et en mode offline, elle affiche les pages stockées si dispo sinon, c'est une page personnalisée "offline".

    Donc après env. 4 jours dessus... j'ai réussi à faire tourner ma pwa et mes notations se sont envolées !

    Maintenant je vais attendre que google digère ces modifs pour voir si cela est aussi bénéfique dans mes stats. Parce qu'après tout ça... c'est bien le but :)

    Bonne chance.

    [​IMG]
     
    Sezar et spout aiment ça.
  11. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    19 059
    J'aime reçus:
    329
    je n'ai pas compris ce que tu as voulu dire ici ?

    par ailleurs, où peut-on tester ce que tu viens de développer ?
     
  12. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Je veux dire par là, mes tests sur insight avaient dû mal à monter malgré mes optimisations (codes).
     
  13. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Maintenant que je suis un "pwa-user" lol je vais vous donner mon avis sur pwa ou pas ?!
    Voilà...
    Je pensais comme il s'agissait d'une "app-like", j'allais me retrouver à devoir coder une version spécifique comme pour une appli pour le coup. Faisant sous-entendre, à chaque amélioration de mon site, il faudrait doubler sur la version pwa.
    Alors en regardant sur le web, youtube, etc... ça parle de frameworks genre React, Polymer... ça parle surtout en javascript.... pffffffff ça m'a fait vraiment peur. Je me suis dit mais dans quoi je m'embarque ! :( Pas étonnant que ça reste expérimental !

    Les informaticiens sont en général cartésiens et donc quand ils s'expliquent, soit ils sont dans leur monde et là, pour les comprendre pfffff pas simple surtout quand il faut se lancer dans ce nouveau genre de projet !
    Ou soit, c'est juste aborder un bout du projet.

    Bref... je ferme la parenthèse.... lol
    Pour résumer, la pwa encapsule votre version responsive. En d'autres termes, la pwa est une boite dans laquelle vous allez mettre votre version responsive.
    Donc 1 seul développement.
    Votre boite se créée en rajoutant :
    - un manifest.json à la racine de votre site (pour la configuration de votre pwa) :
    https://developer.mozilla.org/fr/docs/Web/Manifest
    - un bout de code JS dans le header de vos pages pour initialiser le "service worker" genre:
    PHP:
    <script>
        if (
    navigator.serviceWorker.controller) {
            
    console.log('[PWA Builder] active service worker found, no need to register')
        } else {
            
    //Register the ServiceWorker
            
    navigator.serviceWorker.register('sw.js', {
                
    scope'./'
            
    }).then(function(reg) {
                
    console.log('Service worker has been registered for scope:'reg.scope);
            });
        }
        </
    script>
    - un fichier "sw.js" avec les instructions pour faire fonctionner votre pwa.

    C'est tout !!!!!!
    Sans rien y connaitre, j'ai mis 2 jours pour lire et découvrir, un jour pour le développer et un dernier jour pour corriger les erreurs.
    Je vous fait gagner un temps précieux ;)

    Après bien entendu, nous pouvons faire évoluer notre pwa en la complexifiant genre : https://whatwebcando.today/
     
    #13 passion, 11 Janvier 2018
    Dernière édition: 11 Janvier 2018
    Sezar et WebRankInfo aiment ça.
  14. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  15. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    19 059
    J'aime reçus:
    329
    question bête : à quoi reconnait-on qu'un site a défini une PWA (je doute que ce soit la bonne expression à utiliser d'ailleurs) ?
     
  16. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    manifest + service worker:

    [​IMG]
     
  17. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    19 059
    J'aime reçus:
    329
    là tu réponds en développeur, moi je pose la question en tant qu'utilisateur. C'est transparent ? "juste" plus rapide ? (à part les histoires d'accès offline qui ne sont pas encore assez claires pour moi)
     
  18. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    En utilisateur final, la navigation sur smartphone propose l'installation sur la page d'accueil.
    Et la navigation est plus rapide, voir même utilisable en offline.
     
    WebRankInfo apprécie ceci.
  19. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    A mon travail mes collègues utilisent déjà depuis plusieurs années le cache manifest :
    HTML:
    <html manifest="manifest.php">
    Pour faire de l'application offline.

    /!\ c'est déprécié depuis un moment au profit des service workers.
     
  20. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Oui et non. Je m'explique... Oui c'est transparent quand tu es en version desktop mais si tu utilises une version smartphone ou tablette, la version responsive de ton site va s'afficher. Jusqu'à là, rien d'extraordinaire... sauf que le service worker va te proposer d'installer ton application (pwa). Cette fonctionnalité n'est pas intrusive. Si tu valides l'installation (environ 2 à 3 secondes), via le manifest, un icône va s'ajouter sur ton bureau avec la même présentation que n'importe quelle appli native. Il est recommandé d'utiliser un script "polyfills".
    http://docs.pwabuilder.com/quickstart/quick-start-polyfills/ : Quick start polyfills - PWA Builder Docs
    En utilisant le "mode offline" dans ton SW, tu vas permettre à tes utilisateurs de continuer à utiliser ton site hors connexion. Très utile quand tu as une rubrique rédactionnelle.

    Donc site beaucoup plus rapide car tu stockes chacune de tes pages dans un cache du SW. Gain de temps énorme.

    Je comprends pourquoi Apple a dû mal à s'y mettre car c'est une perte sèche pour son Apple store mais je reconnais que c'est incontournable quand tu veux toucher un site grand public. Un site nickel responsive fort en performance serveur + sa version pwa = tip top !

    J'ai boosté mon site avec de nombreuses recommandations telles que:
    - https
    - protocole http/2 (multiplex)
    - activation modules compression serveur
    - minimifier codes sources
    - compression images
    - pwa (version https obligatoire)
    - etc...
    ça en fait des choses quand tu veux faire les choses pro, ça laisse peu de place pour improviser mais l'onglet chrome "audit" est excellent pour découvrir des critères sélectifs de performances que google doit tenir compte, en ces temps de recherches de performances d'un site.
     
    #20 passion, 11 Janvier 2018
    Dernière édition: 11 Janvier 2018
    Sezar et spout aiment ça.
  21. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  22. Sezar
    Sezar WRInaute discret
    Inscrit:
    20 Juin 2018
    Messages:
    169
    J'aime reçus:
    12
    Super thread !
    Je vais essayer de me lancer sur mon petit site perso.

    Merci pour toutes ces ressources, et longue vie a ce thread
     
  23. Sezar
    Sezar WRInaute discret
    Inscrit:
    20 Juin 2018
    Messages:
    169
    J'aime reçus:
    12
    PWA ou AMP ?
    PWA + AMP ?
    PWA seul ?

    Je pense abandonner AMP (trop complexe et je n'aime pas le faire d'avoir une page AMP dédiée).

    Je pense que PWA c'est le future, et que les principe AMP vont peut a peu etre integre a PWA.
    Et vous?
     
  24. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 640
    J'aime reçus:
    114
    Amp est voué à disparaître puisqu'il sera intégré de base dans l'algo de Google.
    Pwa est la meilleure alternative.
     
  25. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    19 059
    J'aime reçus:
    329
    peux-tu préciser ? je n'ai pas compris... AMP est un format, pourquoi disparaitrait-il si l'algo de Google en tenait explicitement compte ?
     
  26. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 874
    J'aime reçus:
    72
    Sachant que Google en tient déjà explicitement compte...
     
  27. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    Bonjour,
    Je commence à étudier les PWA et essaye de comprendre l'intérêt.
    Le premier est que Chrome (les autres suivront j'imagine, si ce n'est déjà fait) proposera automatiquement d'installer un icone sur le bureau des appareils mobiles lors de l'utilisation du site (Responsive Design bien évidemment). Cela via l'intermédiaire du fichier manifest (qui semble assez aisé à construire via https://www.pwabuilder.com/generate par exemple).
    Egalement cela permettra de mettre en cache les pages du site pour essayer de travailler hors connexion.

    Cela me fait poser les questions suivantes :
    1/ qu'en est-il des sites avec du contenu dynamique ? Quel est le fonctionnement pour savoir quand une page est redemandé au serveur ou non ?
    2/ Qu'est ce que sont les "Service workers" pour les PWA ? est ce obligatoire d'en implémenter ? ou peut on juste se contenter du fichier manifest (pour, entre autre) faire plaisir à Google ?
    3/ Et enfin les PWA sont ils toujours d'actualité ? En effet dans Lighthouse , il y a encore qqes jours, il y avait une note pour la compatibilité PWA, aujourd'hui je constate que c'es toujorus affiché mais ce n'est plus noté.

    question subsidiaire : quid du SEO / PWA ?

    voilà, voilà
     
  28. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  29. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    j'ai effectivement découvert peu après mon Post qu'a minima il conviendrait juste de construire une page en cas de non connexion de l'utilisateur de type offline.html

    effectivement le site ne bouge pas du tout techniquement, mais est ce que Google m'aimera plus si j'implémente le manifest ? retour d'expérience ?

    connaissez vous un site qui aurait implémenté le PWA ?
     
  30. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    https://pwa.rocks/
     
  31. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    merci, c'est une implémentation très basique en effet, sans aucun service worker


    et sinon quelqu'un aurait il un retour d'expérience SEO ? WRI ?
    j'insiste sur le sujet, car si dans Lighthouse il y a (ou avait) une notation c'est bien pour quelque chose, non ?
     
  32. Sezar
    Sezar WRInaute discret
    Inscrit:
    20 Juin 2018
    Messages:
    169
    J'aime reçus:
    12
    je ne pense pas que la notation remplacée par un "badge" qui passe au vert quand tout (ou partie) est bon soit quelque signe que ce soit que Google n'aime plus PWA.

    Bien au contraire, je pense que c'est le future, (plus gros succès que AMP)

    et je pense aussi que c'est tout benef pour le SEO (surtout le critère performance, et "techno up-to-date" qui vous fera monter dans les résultats par rapport a vos compétiteurs lents et avec des vielles technologies
     
  33. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    pour des sites dynamiques, la mise en cache n'a aucun intéret, donc il n'y aura pas de gain de performance
     
  34. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    Si si, pour tous les assets par exemple.
     
  35. Sezar
    Sezar WRInaute discret
    Inscrit:
    20 Juin 2018
    Messages:
    169
    J'aime reçus:
    12
    si si,
    tu peux spécifier la liste des ressources a mettre en cache (images, JS, CSS, etc) dans ton service-worker,

    pas forcement des pages dynamiques.
     
  36. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    c'est déjà le cas avec la mise en cache du navigateur
     
  37. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    et il y a til une possibilité de forcer le rafraichissement à tout moment ?
     
  38. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 874
    J'aime reçus:
    72
  39. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
  40. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    il y a un fichier manifest dans une balise link

    et quand on est sur un mobile, il t'es proposé d'installer "l'application"
     
  41. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    Hello,
    je déterre ce post (pas si vieux que ça et plus que jamais d'actualité)

    En effet, mon prochain projet est de "rendre" PWA mon site
    Basiquement il n'y a pas grand chose à faire comme je le disais en février.

    MA seule interrogation est : est-ce que les smartphone IOS sont enfin compatibles ?
    je ne trouve pas d'information concrète la dessus.

    Quelqu'un aurait-il des nouvelles informations s'il vous plait ?

    Egalement coté SEO : il y a t-il un impact ? sur lighthouse cet élément n'est plus "noté" mais existe toujours bel et bien
     
  42. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    Bonjour,

    Je recherche un bouquin sur les progressive Web App en français.

    Je ne trouve que en anaglais
     
  43. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 809
    J'aime reçus:
    242
    Un bouquin ? Même pas encore imprimé, déjà obsolète.
     
  44. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    692
    J'aime reçus:
    25
    un bouquin ou un Tuto sérieux et exhaustif

    je suis surpris qu'un tel sujet n'est pas plus d'ampleur en France alors que depuis 2017 one ne parlait que de ça

    ça retombe ou c'est moi ?

    personnellment je trouve ça plutot génial, j'attends la compatibilité avec IOS pour me lancer là dedans
     
  45. rollback
    rollback WRInaute occasionnel
    Inscrit:
    5 Novembre 2018
    Messages:
    461
    J'aime reçus:
    49
Chargement...
Similar Threads - 2018 Progressive Web Forum Date
Qwant 20 milliards de requetes en 2018? 2 x plus que Google? Autres moteurs de recherche connus 2 Avril 2019
Tests nov. 2018 : plusieurs liens vers même page, liens JS, contenu caché Techniques avancées de référencement 29 Novembre 2018
Grosse baisse de pages indexées depuis le 1er août 2018 Crawl et indexation Google, sitemaps 15 Novembre 2018
Rebooster une page rétrogradée après #Medic (update 1er août 2018) Problèmes de référencement spécifiques à vos sites 31 Octobre 2018
Lenteur BO Prestashop 01/10/2018 e-commerce 1 Octobre 2018
Update Google le 27 septembre 2018 ? Référencement Google 28 Septembre 2018
Skype 7 tire sa révérence (2018) Le café de WebRankInfo 28 Septembre 2018
Google Images : Nouveau design (2018) YouTube, Google Images et Google Maps 28 Septembre 2018
Événement SEO : le SEOByNight 2018 Débuter en référencement 30 Août 2018
Consignes Google Search Quality Raters AOUT 2018 Référencement Google 3 Août 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice