2018 sera les Progressive Web Apps et fin des apps mobiles

[rick38]

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

 

[UsagiYojimbo]

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.

 

[spout]

Si j'ai déjà évoqué PWA sur WRI, et c'est clairement le futur.

PWA != SPA donc ça peut très bien être SEO friendly.

Un peu de lecture:
https://developers.google.com/web/progressive-web-apps/
https://makina-corpus.com/blog/metier/2016/introduction-progressive-web-apps
https://fr.semrush.com/blog/progressive-web-app/
https://whatwebcando.today/
https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1

 

[spout]

 

[passion]

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 !

 

[spout]

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.

 

[Icipierrot]

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.

 

[spout]

donc la transformation d'un site existant en PWA reste chère.

Ah bon ? T'as demandé des devis pour cette affirmation ?
C'est bcp plus facile qu'AMP.

 

[spout]

https://pwa.rocks

 

[passion]

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.

 

[WebRankInfo]

mes notations se sont envolées

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 ?

 

[passion]

je n'ai pas compris ce que tu as voulu dire ici ?

Je veux dire par là, mes tests sur insight avaient dû mal à monter malgré mes optimisations (codes).

 

[passion]

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:

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

 

[spout]

Le service worker doit mettre les fichiers en cache et les fetcher aussi.
Tutos:
Service Workers: an Introduction  |  Web Fundamentals  |  Google Developers
Adding a Service Worker and Offline into your Web App
Add Your Web App to a User's Home Screen

 

[WebRankInfo]

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) ?

 

[spout]

manifest + service worker:

 

[WebRankInfo]

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)

 

[spout]

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.

 

[spout]

A mon travail mes collègues utilisent déjà depuis plusieurs années le cache manifest :

<html manifest="manifest.php">

Pour faire de l'application offline.

/!\ c'est déprécié depuis un moment au profit des service workers.

 

[passion]

C'est transparent ?

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.

"juste" plus rapide ?

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.

 

[spout]

https://www.julienpradet.fr/fiches-...ter-les-requetes-http-et-les-mettre-en-cache/

 

[spout]

 

[Sezar]

Super thread !
Je vais essayer de me lancer sur mon petit site perso.

Merci pour toutes ces ressources, et longue vie a ce thread

 

[Sezar]

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?

 

[passion]

Amp est voué à disparaître puisqu'il sera intégré de base dans l'algo de Google.
Pwa est la meilleure alternative.

 

[WebRankInfo]

Amp est voué à disparaître puisqu'il sera intégré de base dans l'algo de Google.

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 ?

 

[UsagiYojimbo]

Sachant que Google en tient déjà explicitement compte...

 

[saluts92]

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à

 

[spout]

1/ https://stackoverflow.com/questions/49739438/when-and-how-does-a-pwa-update-itself
2/ Pas obligatoire, NB: c'est pas pour faire plaisir à Google mais aux utilisateurs.
3/ Plus que jamais

question subsidiaire : ça reste un site "classique" donc pas d’interférence avec le SEO

 

[saluts92]

2/ Pas obligatoire

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

question subsidiaire : ça reste un site "classique" donc pas d’interférence avec le SEO

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 ?

 

[spout]

connaissez vous un site qui aurait implémenté le PWA ?

https://pwa.rocks/

 

[saluts92]

https://pwa.rocks/

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 ?

 

[Sezar]

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 ?

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

 

[saluts92]

surtout le critère performance

pour des sites dynamiques, la mise en cache n'a aucun intéret, donc il n'y aura pas de gain de performance

 

[spout]

Si si, pour tous les assets par exemple.

 

[Sezar]

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.

 

[saluts92]

c'est déjà le cas avec la mise en cache du navigateur

 

[saluts92]

tu peux spécifier la liste des ressources a mettre en cache (images, JS, CSS, etc) dans ton service-worker,

et il y a til une possibilité de forcer le rafraichissement à tout moment ?

 

[UsagiYojimbo]

et sinon quelqu'un aurait il un retour d'expérience SEO ?

https://medium.com/lequipe-tech/la-genèse-de-la-progressive-web-app-à-léquipe-45bf9e35981a

 

[spout]

Hot news https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

 

[saluts92]

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) ?

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"

 

[saluts92]

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

 

[saluts92]

Bonjour,

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

Je ne trouve que en anaglais

 

[spout]

Un bouquin ? Même pas encore imprimé, déjà obsolète.

 

[saluts92]

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

 

[rollback]

on en parlait il y a déjà quelques temps
https://makina-corpus.com/blog/metier/2016/decouvrir-le-service-worker

ca n'a pas non plus décollé tant que ça

 

[saluts92]

Bonjour,
Comme je suis obstiné, je reviens à la charge avec cette histoire de PWA.
J'ai besoin de modifier une application (2 versions : ios + android) en (j'espère) PWA pour ne plus avoir à la maintenir et surtout pour controler les effets de bord.

Cette application est "juste" un outil supplémentaire à mon site et non une application autonome.
Cela me permet de partager (en cliquant sur "partager") l'URL du site en train d'être consulter par l'internaute pour faire un traitement spécifique par la suite.
Ce serait donc moins lourd (financièrement et temps homme) d'avoir à la gérer un PWA plutot que de gérer 2 versions d'applis.

Ma question principale étant, la compatibilité avec IOS est-elle désormais assurée ? et surtout pérenne ?