 Bonjour, merci d'être là, c'est chouette, on va parler PWA, donc évidemment il y a le sondage de début de conférence, tout le monde connaît le principe, donc levez la main si vous savez ce que c'est qu'une PWA. Ah ouais, est-ce que ces conférences c'est utile en fait ? Ok, en fait je dis ça parce qu'on va essayer de faire un maximum de code, donc c'est un atelier technique, je le dis tout de suite, il n'y a pas de slide à l'infini, c'est genre le chose, mais on avait quand même préparé quelques slides d'intros pour ceux qui ne savent pas ce que c'est qu'une PWA, histoire de ne pas être perdu. Je vais faire rapide du coup, on va pas les faire parce que la majorité des gens savent ce que c'est et on va regarder directement comment on fait une, comment la connecter à WordPress, vous pouvez poser vos questions au fur et à mesure de l'atelier, c'est pas une conférence traditionnelle. Je vais juste préciser un truc en intro, donc on utilise un plugin qui s'appelle WEP Appkit, il faut que c'est nous qui le faisons, c'est un plugin open source et c'est avec ça qu'on fait des PWA, mais on a conçu l'atelier évidemment pour vous faire comprendre ce que c'est qu'une PWA en général et vous n'êtes pas du tout obligé d'utiliser Appkit pour faire une PWA, c'est juste que nous on s'est fait notre petit truc à nous, voilà. Donc une PWA c'est d'abord c'est un acronym, ça veut dire progressive web application, c'est un acronym qui a été trouvé par des ingénieurs de Google je crois en 2015, on retrouvera ça sur Wikipédia j'imagine et c'est un peu comme ma JAX, c'est un concept, c'est pas vraiment une technologie, c'est une espèce d'étiquette un peu marketing qui vise à rassembler un ensemble de technologies dont je vais vous parler et à imiter en fait une application, une application mobile ou une application tout court. Alors ça peut vous paraître un peu étrange mais l'idée de ces ingénieurs c'est en fait de prendre des technologies HTML web en général moderne, l'exemple de ça par exemple on va en parler c'est les service workers et d'aller en fait essayer de concurrencer les technologies natives qui sont proposées par Apple ou même d'ailleurs par Google à travers Android pour essayer de faire des applications qui donc marchent en mode en ligne qui ont des transitions et qui ont de l'animation etc mais avec des technologies web c'est en fait ça tout simplement l'EPWR et je trouve que c'est extrêmement à la mode en ce moment vous allez en entendre parler partout du directeur marketing jusqu'au développeur. On pourra aussi échanger s'il voulait soit pendant la conférence soit après sur l'utilité réelle d'EPWR dans quel cas les utiliser pas les utiliser parce que très honnêtement il y a un petit peu de confusion autour de tout ça, un peu de promotion un petit peu folle autour de tout ça mais ça reste un outil très intéressant et ça préfigure très probablement un changement majeur dans la manière dont on fait des applications notamment mobile avec toutes les histoires d'appstore et de choses comme ça qui se cachent derrière. Voilà donc qu'est ce que vous avez trouvé dans une PWA? Grosso modo il ya un certain de technologies web que vous utilisez peut-être déjà par exemple je peux faire un deuxième petit sondage qui a déjà fait des web notifications sur un site vous l'avez mis en place pour un client. Oups deux personnes donc vous ne savez peut-être pas bravo à vous d'ailleurs. Les web notifications c'est l'idée que votre navigateur vous propose de vous abonner à des notifications qui ressemble beaucoup à ce que vous recevez sur votre téléphone mobile et c'est lui et vous allez envoyer des notifications à travers une plateforme soit de Google soit d'Apple pour l'instant et ces notifications vont apparaître dans le navigateur y compris d'ailleurs sur un téléphone mobile comme Android donc c'est une concurrence directe aux applications mobiles classiques en fait ça c'est une des technologies que vous allez retrouver dans les PWA vous avez aussi des technologies du type service worker c'est une spot form on va le voir c'est quelque chose qui tourne en tâche de fond et qui va vous permettre par exemple d'aller importer des choses sur votre téléphone et de faire en sorte que votre application fonctionne en mode hors ligne et il y a toutes sortes de choses comme ça qui vous permettent de construire des applications qui ressemblent à ce que vous téléchargez dans l'app store par exemple sur Google play chose importante les PWA vous pouvez les faire de mille et une manière mais il faut se rendre compte que c'est une application entièrement écrite en java script donc c'est un peu le une espèce de renversement si vous voulez d'habitude vous faites du html vous faites un time vous mettez du java script plus ou moins dedans je sais pas pour faire ce que vous voulez des animations la vérification de formuleur un peu importe là c'est l'inverse vous allez complètement tout écrire à la base un squelette en java script et vous allez recréer littéralement une espèce de navigateur dans le navigateur ce que je veux dire par là c'est que c'est pas forcément hyper simple et hyper accessible au début pour des gens qui sont habitués à faire autre chose voilà vous pouvez le faire avec plusieurs choses peut-être terminer même là dessus après j'ai passé la main à matieu vous allez entendre beaucoup parler si vous n'avez pas déjà entendu de framer comme réacte qu'il soit gs natif ou je ne sais pas quoi vu vu gs etc fondamentalement vous pouvez même faire une pwa à partir de rien mais mon conseil ce serait quand même de vous équiper d'un framework parce que vous allez vite vous rendre compte qu'il y a un certain nombre de choses qui sont pris en charge par ces frameworks même s'ils sont pas très facile d'accès et qui vous éviteraient des heures de problématiques et de problèmes que peuvent poser ce nouveau type de développement java script peut-être maintenant on va peut-être introduire les quelques points qu'on va aborder parce que évidemment on a 45 minutes à peu près pour vous parler de ça on va pas faire tout ce qu'on peut faire avec une pwa mais les grands points essentiels sont faits avec vous à travers du code qu'on va qu'on va vous montrer voilà donc voici ce qu'on propose c'est de faire déjà de créer l'application la pwa donc avec avec la vp appkit donc ça va prendre quelques minutes donc à partir d'un site WordPress déjà existant donc je vais faire la cette démo la rente locale et puis une fois qu'on est cette pwa d'un petit peu plongée dedans pour pour pour en faire sortir les grands points techniques les principaux points techniques qui font que c'est une pwa voilà donc ça ça va être notamment aller voir le manifeste la gestion du offline voilà la gestion des deep link voilà les trois principaux points c'est vrai que j'ai oublié de préciser un truc d'ailleurs une pwa donc c'est pas quelque chose que vous mettez dans un app store généralement quand vous faites une application vous la compilez et après vous allez la délivrer sur vous la soumettez à apple ou à google et après les gens vont télécharger ça dans un app store là ça change complètement en fait c'est sur votre site ou sur un site n'importe et c'est en fait quand les gens vont accéder à votre site on va proposer notamment le téléphone en oride va proposer d'installer cette pwa sur vous a franchissé en fait finalement des app stores qui peuvent poser problèmes parfois notamment chez apple voilà donc c'est une bonne chose on peut peut-être commencer direct à rentrer donc quand je le redis on a essayé de faire un atelier vraiment technique technique donc là ça commence par un truc un peu fonctionnel mais l'idée c'est qu'on a on a fait on a fait une petite expérience en live donc on a créé une petite instance en presse et on a rentré une partie du programme de la journée et l'idée c'est de faire une petite pwa qui va permettre de consulter ce programme au mode offline faire plein d'autres choses et là nous avons le phénomène du mot de passe c'est l'espace mais c'est bien désolé et c'est parti donc on part sur un wordpress alors l'idée de cette petite application c'est de faire une petite pwa qui affichera le programme du world camp donc une application qu'on pourrait installer sur son téléphone pour avoir en offline les conférences les ateliers et les orateurs donc on est par là sur un wordpress d'une installation fraîche simplement sur laquelle on a installé deux plugins il y a l'effet des mots vous connaissez peut-être pas mais c'est events calendar qui a un plugin assez connu pour en gérer des événements donc on a volontairement pris un plugin classique de base pour vous montrer qu'en fait ça peut s'adapter assez rapidement un wordpress et puis vpa petite donc excellent plugin voilà qui va nous générer là et puis un petit plugin pour adapter les events calendars pour rendre disponible les contenus des events calendars dans vpa petite alors aux petites remarques donc je suis en local là ici pour qu'on n'ait pas besoin du réseau et puis à la fin de la démo on passera sur la même appli qui est on9 celle-ci donc on voit qu'on a, je vais vous présenter un peu les contenus déjà qu'on a pour qu'on s'y retrouve, on a donc les conférences que j'ai rentré ici sous forme d'événements donc on retrouve toutes les conférences et les ateliers le principe c'est un titre un contenu on a les dates de début et de fin les heures de début et de fin on a une la salle que j'ai mis sous l'entité location et puis on a les orateurs qui apparaissent ici dans le champ organisers ensuite on a une taxonomie catégorie sur ce post-event ici c'est une conférence donc à partir de là on va finalement pouvoir générer l'application qui embarque ces différents contenus là donc pour ça avec Appkit on crée une nouvelle application donc dans Appkit on va renseigner pour notre application les composants ça va être les contenus finalement qu'on va envoyer dans l'appli on va ensuite définir l'apparence donc on va pouvoir choisir un thème pour notre appli voilà définir son menu et puis notamment donc la plateforme pour nous ça va être une progressive web app Appkit permet donc de faire de l'appli hybride de pouvoir générer des applits également natifs mais nous aujourd'hui c'est donc la progressive web app donc on va également renseigner les champs de la progressive web app alors là j'en profite pour si tu veux juste redescendre comme c'est une application il y a des nouveautés dans les applications vous avez des icônes et des splash screens et donc du coup vous allez pouvoir les gérer directement dans la quand la personne va finalement faire une sorte de raccourci ou installer l'application il faut que vous lui fournissiez une icône évidemment et il faut que vous lui fournissiez un splash screen c'est pour ça qu'on permet de les gérer et on verra ça tout à l'heure dans le manifeste on peut aussi gérer ce qu'ils appellent des couleurs de thème c'est à dire qu'en fait l'environnement va s'adapter à votre android notamment donc je vais sauver déjà le fait que c'est une progressive web app et on va pouvoir donc introduire les contenus dans l'application alors premier composant on va mettre donc les conférences par exemple donc les conférences ça va être donc une liste d'articles on aurait pu aussi avoir donc une page simplement voir presse et puis on peut éventuellement que je pourrais mettre des éléments referment personnalisés nous ici c'est donc une liste d'articles le type de post ce sont des events il y a donc une taxonomie catégorie d'événements et en choisie les conférences donc à partir de ce moment là l'application aura donc la liste des conférences on va faire la même chose pour l'atelier ce sont des events également qui ont une catégorie atelier et puis pour les orateurs les orateurs ce sont les organisers pour le plugin calendar voilà donc on a tous nos contenus finalement maintenant qui sont envoyés dans l'application qu'est ce que ça veut dire tes contenus ça veut dire qu'en fait on vient de rajouter des endpoints pour l'API en fait qui sert l'application et donc elle est capable maintenant de voir ces types de contenus en fait on va le voir bientôt alors pour l'instant je vais laisser le thème par défaut d'apkite qui est par défaut quand on installe le plugin ici on va on va mettre donc ça c'est le titre qui apparaîtra dans la barre d'adresse par exemple c'est la baliste title du html simplement ensuite on va définir le menu donc le thème a un burger menu là qui soupçonne le côté on va pouvoir donc là il définir les éléments qu'on veut y mettre on va simplement les mettre les trois les conférences les ateliers et les orateurs voilà on est donc sur une progressive web app donc on va pouvoir en fait définir où est-ce qu'on a envie de l'installer la progressive web app puisque c'est vraiment d'une application donc en js qui est installée sur le voilà sur le site donc je vais le mettre carrément à la racine voilà ce sera plus simple et ensuite on définit les éléments du manifeste qui vont être là les informations dont va se servir le téléphone pour afficher par exemple la bannière d'installation afficher l'icône sur le téléphone donc dans la bannière on va afficher alors la bannière d'installation c'est quoi si vous accédez à un site qui possède une pwa donc un manifeste un manifeste c'est juste un fichier de conflit on va voir ça tout à l'heure en fait le téléphone scan le site au moment où il accède voilà et s'il trouve un manifeste il regarde ce qu'il y a dedans il va chercher un certain nombre d'informations pour vous générer une espèce de petit pop-up il dit voulez-vous installer cette application sur votre bureau cette attention sur android il y a une espèce de logique c'est à dire qu'il considère qu'il vous propose ça quand vous venez souvent donc vous pouvez pas vraiment le piloter donc vous ne voyez pas forcément de la première fois donc ça c'est quelque chose à savoir deuxième chose qui est important dans savoir contrairement à ios android vous pouvez installer plusieurs navigateurs sur android et donc firefox supporte également les pwa si vous êtes des utilisateurs de firefox donc j'ai enseigné une petite description le short meme c'est ce qui va apparaître vraiment sur l'écran d'accueil du téléphone quand on a installé l'appli une version bien utile pour les pwa parce que comme on va le voir la gestion du cache est complexe savoir quelle version est couramment affichée sur le téléphone ou dans un navigateur et pas toujours évident donc on pense à une version je sauve tous ces paramètres et on installe voilà et ensuite là ou pour une application il faudrait maintenant aller la compiler etc beaucoup d'appliques beaucoup de encore beaucoup d'étapes et compliqués ici avec les pwa vraiment c'est simplifié généralement on considère que tout avec une application vous faites des certificats vous compilez vous demandez des autorisations vous soumettez vous attendez qu'appel vous disent oui ou non android c'est plus rapide c'est de l'ordre d'une ou deux heures là en fait comme vous l'installez sur votre propre site vous devez mettre à bord c'est avantageux et en même temps faut faire gaffe je sais pas que vous mettez à jour votre pwa concrètement il y a plein de gens sur tous les téléphones ça a été installé et si vous faites n'importe quoi bah vous carbonisez tout ce que les gens ont installé faut quand même faire attention voilà donc une fois que c'est installé on peut aller et bien tout simplement ça y est les prêtres on peut aller d'avoir alors bon on va aller la regarder donc là on est avec le thème par défaut d'appkit donc pour l'instant c'est assez neutre puisque finalement on voit qu'il y a juste les titres puisqu'on est sur le thème par défaut donc ce thème là ne connaît pas toutes les entités des événements etc alors quand on parle de thème dans le pwa kit vous ne connaissez pas le plug-in en fait on a des thèmes mais c'est pas des thèmes WordPress les thèmes WordPress sont des thèmes javascript vous avez la capacité de faire la même chose un peu près que ce que vous feriez avec un thème WordPress mais pour une application et entièrement en javascript donc ce qui permet en fait je pense que tu vas changer l'apparence voilà on va changer le thème donc on va prendre un thème donc qu'on a fait rapidement pour l'occasion qui va justement pouvoir afficher les différents éléments correctement et puis avec un peu la charte graphique qui va donc là on vient de sauver le fait qu'on vous laisse le nouveau thème pour l'application il faut la réexporter on va aller voir juste après où est-ce qu'elle est exportée donc là par exemple petit piège ça passe c'est passé tout le monde connaît la vue la simulation téléphone de crôme il y a des gens qui ne connaissent pas dans la salle c'est bon on peut simuler les événements tactiles notamment quand on passe avec cet outil là là c'est une version web classique et avec cet outil là on simule un device voilà avec la gestion des touches donc là on a maintenant une voilà la progressive web app qui est là qui tourne avec donc la possibilité d'afficher les conférences comme on a vu d'aller voir par exemple les orateurs et puis donc les ateliers qui sont ici alors j'avais pas tout entré bien sûr surtout en local et puis la notre liste d'orateurs donc qui affiche voilà simplement les orateurs donc on va aller voir où est-ce que ça a été installé alors ici on a notre l'essource de notre de notre WordPress donc avec notamment le plugin appliqué ici et puis notre application qui a été installée on a vu à la racine donc du site où on a positionné tout à l'heure c'est-à-dire ici voilà donc finalement les sources ont été créées donc ici on est bien sûr l'application appkit donc voilà vous pouvez déjà voir qu'en fait c'est vraiment du javascript du html c'est c'est une mini application javascript au passage là on n'utilise aucun framework particulier donc vous n'avez pas tous ces histoires de webpack et autres plaisanteries du même goût rien que vous empêche de le faire si vous voulez mais il se trouve que là c'est direct vous l'avez vous l'avez direct ouais ben il est là on va voir le code tout de suite on va voir le code alors est-ce qu'on montre qu'on peut l'installer sur un téléphone non on verra ça après je pense que les gens ont envie de voir comment ça marche concrètement peut-être qu'on peut tout bêtement moi j'avais prévu comme cinq grands points alors si vous voulez oui la structure de l'appli donc tout tout démarre dans un index pour html donc on n'a plus de php du tout on est sur une application html javascript ici l'index finalement ce qu'on va voir c'est qu'on lit un manifest à cet endroit là ce qui est important c'est ce qui fait qu'on va pouvoir l'installer sur le téléphone et ensuite on a notre point d'entrée javascript qui est ici voilà et donc ensuite c'est une appli javascript alors nous on se basé sur un framework qui commence à dater un petit peu mais voilà la petite à cinq ans et jusqu'ici ça tient bien le choc de toutes les évolutions qu'on ajoute ça marche pas mal et on est donc sur backbone js donc c'est une structure ben avec des modèles pour définir les grandes entités et puis des vues voilà pour définir par exemple on a la vue du menu alors là on est sur des fiers qui sont minifiés puisqu'on a exporté la mais tu devrais montrer le thème je pense juste pour les gens voilà là c'est pour la structure générale de l'appli alors on peut avoir le thème moi j'avais prévu de de passer sur les grandes notions de ouais mais bon je vous souviens très rapidement parce que je pense que les gens se rendent pas compte de ce que c'est qu'un thème en javascript très vite ouais et ben alors le thème des events c'est ça ici vous voyez on a vous retrouvez le même système que les templates php mais avec des noms layout menu page etc ce qui peut juste en ouvrir un très rapidement ouais voilà par exemple le layout vous voyez c'est du html pur et dur et vous avez juste des en fait le javascript va servir de ça pour générer votre appui tout bêtement et après il y a juste le fonction et après on passera au manifeste le fonction donc c'est le point d'entrée qui est un peu le fonction pour php dans les thèmes dans les thèmes WordPress et là vous allez avoir un fonction point js il y a à peu près les mêmes les mêmes la même fonction justement désolé il y a une petite question non oui tu pourrais ah non c'est pas vrai parce que tu as besoin des endpoints tu as besoin de la paix c'est ta pwa sans endpoints elle a pas de elle peut pas aller chercher ses contenus voilà ça c'est important maintenant ce qu'on peut faire c'est prendre c'est quelque chose que certains de nos utilisateurs font ils prennent la pwa et ils ont une autre instance WordPress avec p la petite quelque part et cette pwa interagit avec et tu as forcément besoin de la petite quelque part en fait ou d'une reste à paix oui oui tout à fait alors ça c'est une bonne question parce qu'on n'utilise pas la paix reste native il y a d'autres personnes je comprends ça qui pourra en parler ça on a des problèmes de performance avec cette paix alors nous voilà on avait la paix je peux vous la montrer donc on a ici un bouton qui s'appelle le le pour voir les données du web service voilà et là on voit qu'on a toutes les données de notre appli à l'intérieur d'un d'un même web service de synchronisation donc il va comprendre tous les articles et qui va comprendre les données des composants donc c'est un petit peu se servir de la reste à pays nous dans le cadre d'un plugin comme celui-ci qui va pouvoir s'installer sur n'importe quelle blog lambda ou n'importe quel site wordpress alors le premier problème c'est que tout le monde n'active pas la reste à pays c'était compliqué de se baser dessus et deuxièmement on avait besoin donc de de n points très personnalisés et donc il puisse être également personnalisable c'est à dire si que la personne dans son application ne veut pas afficher ce transformer ce contenu là le contenu de l'article avec la reste à pays on est un petit peu bloqué puisqu'il y a quand même une des clauses importantes qui disent qu'il faut pas modifier les n points de la reste à pays en tout cas ne pas enlever des champs ou modifier des champs parce que d'autres plugins qui se basaient dessus pourraient pour être plantés tout simplement donc nous on avait besoin de rester indépendant de la reste à pays pour ça ensuite on pourrait entièrement faire avec la reste à pays des n points custom voilà se baser sur cela mais consommer la reste à pays par défaut de wordpress pour l'instant c'est pas nous ça ne correspond pas à l'utilisation qu'on a dans la petite la reste à pays elle est dans la petite et ensuite je peux vous montrer les petits plugins qui permettent donc de customiser les données qui sont en lien avec l'event calendar c'est celui-là on se bat sur des hooks d'appkit donc on va ici par exemple on ajoute les post types de events calendars pour qu'on puisse les choisir dans l'interface d'appkit puisque par défaut il n'était pas public dans events calendars ces post types là ça permet de voir des custom post types dans l'appli en fait voilà ici je modifie le nombre d'articles par page que va afficher à petite que va récupérer à petite pour pouvoir avoir toutes les conférences et pas être limitées à 10 et puis ici je j'ajoute les données spéciales donc la ça c'est la salle de conférence et ça sont les orateurs j'ajoute les données spéciales aux données de chaque post qui va tomber dans l'appkit par contre j'ai juste un terme un peu il faut qu'on regarde les manifests etc pour pouvoir parler d'appkit après c'est pas forcément c'était moins sur appkit que sur la pay double verre mais bien sûr pour toute question ensuite on en discute peut-être regarder le manifeste qui est généré du coup ouais c'est ça donc bon bon déjà le premier le premier requis de la pwa c'était d'avoir du https c'est la première chose donc ça c'est important pour pouvoir générer une progressive web app il faut avoir un site workpress en https voilà pour pouvoir faire tourner en fest on le verra un petit peu après mais les services workers qui ne s'exécute que dans un contexte sécurisé voilà ensuite donc en effet on peut passer au manifeste qui est vraiment ce qui fait que l'application va pouvoir s'installer sur le téléphone alors chez nous on a donc c'est assez simple le manifeste il est j'avais mettez mis l'aspect là de c'est le web app manifeste qui est qui est spécifié donc avec avec plusieurs donc éléments qu'on peut régler dedans donc les principaux ça va être le nom de l'application c'est ce qu'on a renseigné tout en back office le nom de la de l'appli sur le bureau une petite description les icônes qu'on a renseigné en back office également et puis donc la start url qui est l'url qui va être lancé par le téléphone lorsqu'on va lancer l'application et après vous pouvez gérer un peu les couleurs le format display standalone ça veut dire que cette application peut être lancée par tout seul sans navigateur en fait sans les éléments du navigateur donc grosso modo c'est un petit petit configuration qui vous permettent piloter l'apparence et le fonctionnement de la de votre future application ceux qui ont déjà fait des applis mobiles ça se renseigne aussi un peu de la même manière dans des applications mobiles classiques on va dire et c'est ça donc le téléphone va scanner en premier voilà le navigateur et le téléphone va scanner ce fichier là pour le display standalone il est important c'est celui qui fait apparaître vraiment l'application comme une application native dans le téléphone donc ensuite donc après le manifeste qui est un point très important parmi les grandes spécifications de la grande checklist finalement des points techniques à respecter pour avoir une pwa c'est d'avoir donc un fonctionnement offline alors fonctionnement en train c'est le plus dur alors il veut dire plusieurs choses il ya déjà il faut que l'application puisse se lancer lorsque vraiment le device est offline alors une fois bien sûr qu'on a déjà lancé au moins une fois en étant en ligne il faut que la start url c'est à dire l'url de base de notre application puisse être lancable quand on est offline et ça si vous allez sur n'importe quel site et que vous mettez offline et que vous rafraîchissez vous avez généralement le dinosaure on a le dinosaure voilà on pourrait le faire on a du offline ici voilà sur une progressive web app quand on rafraîchit en étant offline ce que je ne suis pas on a notre contenu qui s'affiche quand même voilà tout est là on peut l'application est ici alors ça c'est un peu autre disons que le fait déjà qu'on puisse lancer la start url en étant offline ça c'est grâce au service worker c'est là c'est vraiment peu la grosse nouveauté technique des pwa c'est le service worker qui permet d'avoir les sources puisque là on est en train de rendre des des sources js alors qu'on est offline donc ça veut bien dire que le navigateur les a mis en cache pour pouvoir les rafraîcher le service worker il faut l'imaginer comme si vous ne l'avez pas utilisé peut-être des gens dans un sac d'enthusie c'est une sorte de proxy qui est dans votre navigateur et qui va intercepter toutes les communications qui passent par le network en fait et si vous êtes en mode offline vous avez la capacité de lui dire qu'en fait il faut qu'il aille cuiser sur le disque local et non pas aller chercher quelque chose de distance évidemment préalablement est plutôt malin d'avoir mis des choses en local et donc du coup c'est ce qu'on fait d'ailleurs là donc là on a mis à la fois les contenus et on a mis ce que vous allez voir il ya un terme s'appelle shell donc la coque on a mis tous les éléments design tout tout la structure en fait de l'application en local et c'est pour ça qu'en fait si vous coupez le réseau il y a tout ça fonctionne en fait tout simplement d'ailleurs ça pose des problèmes parce qu'il faut c'est un nouveau type de cache donc souvent on oublie tout peut-être en local et on voit jamais ces modifs donc il faut gérer ça aussi mais c'est vraiment la grande nouveauté c'est une espèce de proxy qu'on a à disposition pour intercepter ce qui sort est ce qui entre et aller lui dire là j'ai pas de réseau s'il te plaît fait ça voilà donc on peut jeter un oeil au service worker qui est généré par appkit voilà donc on est obligé de renseigner tous les fichiers qu'on va vouloir mettre en cache ici on a une petite clé cache name donc ça c'est important c'est ce qui va changer à chaque fois qu'on va modifier les sources de notre appli il va falloir changer cette clé là pour que le service worker puisse se dire ok j'ai de nouvelles sources il faut que je me rafraîchisse puisque là ce qui est gênant finalement enfin ce qui pourrait être gênant c'est que maintenant il ne passe plus du tout par le réseau il voit qu'il ya un service worker il affiche les sources il ne passe plus du tout donc c'est grâce à cette clé de cache qu'on va changer à chaque export qui va nous permettre de rafraîchir les sources quand on les a changé alors il est juste il ya trois grandes étapes dans les service workers il ya l'installation l'activation et ensuite l'interception d'événements qui arrivent dans le navigateur donc rapidement à l'installation donc à l'installation c'est là où on va parcourir tous les fichiers qu'on a demandé de mettre en cache et le navigateur va les chercher et va les mettre en cache donc on voit ce process là quand on on va là donc on a là nos donc là la console de chrome est essentielle honnêtement quand vous faites une pwa il faut apprendre parfaitement à utiliser la console chrome sinon vous êtes vraiment vraiment foutu et donc ils ont rajouté leur leur onglet application qui sert à ça vous allez pouvoir explorer vos caches les renouveler regarder vos service workers sinon vous êtes complètement aveugle et alors espérez pas faire des alertes des consoles pour un log là ça va juste pas du tout marcher enfin vous pouvez vous terminer étardivement donc si vous voulez vous économiser du temps donc là on voit un service forker typiquement qui est référencé donc on le voit rapidement en fait il réessaye d'installer hop mais il voit que c'est le même que ça n'a pas changé là ça reste cette version là qui est qui est bonne voilà donc ensuite une fois qu'il a installé il y a la phase d'activation voilà où en fait il nous dit bon bah je suis prêt je m'active et c'est là où donc c'est tous ces morceaux de code sont bien renseignés sur la dans la dog google voilà il explique le rôle donc c'est ici qui conseille donc de d'enlever les fichiers mis en cache du cache précédent donc ici on va on va regarder on va regarder les anciennes clés qui existent dans le cache et si ce n'est pas celle la courante c'est ben on va effacer hop tous les fichiers les anciens fichiers de cache et ensuite le navigateur enfin le service worker tombe dans un dans un état où il va écouter les événements du navigateur et à chaque fois que le navigateur va vouloir aller chercher un fichier js il va d'abord regarder s'il est en cache et s'il est en cache il va le il va le renvoyer au lieu d'aller chercher sur le réseau c'est ce qui nous on on fait ça mais évidemment vous n'êtes pas obligé d'utiliser un service worker pour l'instant pour n'importe quoi là c'est utilisé pour une pwa c'est pour ça que je vous disais qu'en fait c'est pas une technologie et pwa c'est juste une utilisation des services worker dans ce cas là et c'est particulièrement efficace parce que concrètement là vous voyez il suffit d'être dans un avion n'importe quoi vous avez été chargé un guide un livre ce que vous voulez vous pouvez le consulter entièrement off-line donc ça réellement c'est ce qui permet le lancement de l'appli en étant complètement off-line quand on est sur le téléphone mode avion l'appli se lance voilà ensuite ce qui permet bah comme on a dit tout à l'heure ce qui permet d'avoir le contenu en lui-même les contenus c'est le fait qu'on les stock en local storé c'est à dire dans le cache du navigateur lui-même donc on voit ici qu'on a tous nos tous les éléments de notre notre application est ce qu'il y a des gens qui ont utilisé le local storage déjà pour faire d'autres choses ok moins local storage faut vous l'imaginer comme un petit base de données ou un dictionnaire clé valeur pour faire court c'est donc du coup voyez c'est ce qui se passe sur le côté vous avez les clés là à gauche et là vous avez toutes les valeurs qu'on stocke dedans au format jason ça veut dire quoi ça veut dire qu'en fait ça normalement c'est retourné par le web service ou forme d'un arbre jason et que en fait là il suffit juste d'aller chercher en local pareil je vais juste préciser un truc sur le local storage c'est un sujet un peu compliqué parce que en fait vous ne savez jamais dans quel contexte ça va être exécuté c'est à dire ça peut être par exemple sur safari enfin sur ios il va créer des local storage à gogo il y en a un pour chaque appli un pour chaque instance du browser etc ne partez pas du principe qu'il n'y a qu'un seul local storage et que tout le monde l'utilise en fait c'est souvent des choses un peu compartimentées et donc du tout pareil vous avez des phénomènes vous dites mais où sont passés mes contenus c'est juste qu'ils sont dans un autre local storage en fait voilà c'est pas le cas sur android mais sur ios ça peut conduire à des arrachages de cheveux réguliers ils sont en train de le changer donc d'ailleurs vous pouvez vider le local storage grâce à la console chrome ce que je vous conseille de faire régulièrement voilà donc ensuite dans les dans la checklist des choses à respecter par google c'est que toutes les url soient également accessible hors ligne donc là bon on voit que c'est le cas et on voit également donc ça me permet de passer sur le fait qu'il faut voilà qu'on a ici des url qui sont qui sont formatés sous forme de slug et qui ne sont plus comme on voit parfois dans des applis dans des applis mobiles dans des web apps disons avec le disse quelque chose c'est à dire que ça c'est grâce en fait au push state voilà qui nous permet d'avoir les url on va dire bien formaté le push state finalement c'est c'est juste c'est une technologie donc d'html 5 qui permet de modifier l'historique du navigateur sur qui donne accès en javascript à l'historique simplement voilà cette fonction là et qui va permettre donc de changer l'url du navigateur au moment où on a vu donc c'est là que je répète ce sont des applications javascript donc tout ce qu'on connaît tout ce qu'on connaît de navigation avec le bouton basc etc et il faut le refaire donc c'est une vraie application tous les grands frémoires que javascript bien sûr supportent ce push state de manière transparente enfin c'est un mode activeur général et ensuite ça se gère bien c'est pas le moteur voilà donc c'est qui est requis aussi dans les points techniques c'est qu'on puisse accéder donc le fameux deep links le lien profond c'est à dire qu'on puisse accéder aux différentes pages de l'application par leur url c'est à dire qu'on ne soit pas obligé de passer par le point d'entrée de l'application pour aller voir le reste donc voilà si on recharge cette page on voit que c'est bien notre article qui se charge à ce moment là donc ça c'est pareil dans tous les frémoires que j'ai s'il ya des routers et c'est le faut avoir une appli avec un routage qui nous permet à partir d'une url de rediriger vers c'est à dire que le frémoire va analyser la structure cette url et il doit être capable de comprendre quoi générer comme vu dans l'application quand même pas si vous faites à la main c'est un peu compliqué parce qu'en fait il faut qu'il découpe l'url et qu'il se dise ok c'est cet écran donc je dois générer l'écran je dois aller chercher le contenu je regarde si je suis en offline je vais chercher je fais juste une petite appartée là souvent matieu dit qu'il y a une checklist donc en fait les pwa c'est une checklist si vous tapez pwa ou progressive web application vous allez tomber sur cette checklist qui n'en finit pas google vous demande de respecter x point en fait et après vous avez un outil s'appelle light house donc le phare qui est une espèce de scanner il va vous dire si vous respectez ou pas les prérequis d'une progressive web app en fait voilà on fera tourner on fera tourner tout à l'heure donc pour terminer sur ces url ce qui permet aussi quand même d'accéder à l'application par par toutes les url c'est également bien sûr une petite redirection dans le ht access pour que votre configuration serveur qui permet de rediriger tout ce qui n'est pas un fichier tout tout ce qui est une url vers le index pour faire tourner l'application qui elle démarre bien sûr dans l'index donc ça combiné voilà un routeur permet d'avoir cette gestion du rl accessible directement voilà pour les diplômes et puis un dernier grand point des pwa c'est une nécessité d'avoir voilà des certaines performances et certaines voilà dans la grande dans la checklist il y a ça c'est à dire d'avoir une interface fluide qui n'attend pas le réseau d'avoir un temps de chargement ce qu'ils appellent le first meaning full content et le first interactive content c'est à dire qu'il faut proposer à l'utilisateur même sur un réseau lent il se base sur le réseau 3g voilà ils veulent que l'application puisse se rendre correctement sur un réseau 3g et bien on est tout de suite un quelque chose en tout cas à donner à l'utilisateur alors ça peut être par exemple nous on affiche un petit convoi ici petit playsolder en attendant que les choses se chargent voilà c'est peut-être ce type d'essuie là ça peut être un texte par défaut pas de y patienter il faut aussi que la page est quelque chose à afficher si nos gs n'est pas actif dans les spécifications il y a une question il y a beaucoup d'applications quiz dans la rue qui font ça alors aujourd'hui ils le font avec des applications mobiles souvent qui d'ailleurs c'est une espèce d'initation de ce que font les applications mobiles fondamentalement il y a aussi des notions de local storage mais oui la réponse est oui puisque en fait tu vas pouvoir alors comment ça va marcher c'est à dire que concrètement tu vas pouvoir remplir ton formulaire le sauvegarder en local bon là en local storage par exemple la personne qui fait les quiz par exemple la rue aura déjà préchargé la pwa donc ce sera rapide et quand le service worker va voir que tu retrouves du réseau il y a des événements où tu peux déclencher quand tu passes d'un réseau à l'autre alors en html tu peux pas détecter le type de réseau c'est un peu dérangeant ça peut pas savoir si c'est du age c'est rare contrairement aux apps mobiles mais tu peux dire offline ou online quand tu repasses en online puis tu pousses toutes les toutes les données il y a un exemple excellent ça c'est ce que fait google analytics dans son cache c'est à dire ce qu'il fait ça il accumule tout ce que vous faites si vous êtes en offline et il va repousser tout ça dans google analytics à la fin en fait donc oui c'est tout à fait possible d'ailleurs on a des utilisateurs qui je crois c'est en angleterre il y a quelqu'un qui a conçu un petit truc comme ça alors il le fait avec une application native mais la pwa pour le coup est tout à fait utile pour ça et et faisant par contre je te vois pas pour une application pour l'afrique justement je ne vois pas quoi je lui dis ça oui c'est ça voilà quand tu perds le réseau etc c'est bien géré par les pwa d'ailleurs c'est une bonne on peut juste toucher un tout petit mot de salle ne fait pas des pwa juste pour imiter un site ne fait pas des applications mobiles pour imiter un site ça sert à rien fait un super site mobile et sera très bien contrairement ce que vous pouvez entendre à droite à gauche ça pose des problèmes de sio notamment qui sont vraiment durs à résoudre voilà donc ne le fait pas par contre voilà des applications qui sont finalement des extensions votre site on peut penser à un truc bête mais des favoris online un reader pour un guide dans un musée un quiz dans la rue peu importe à la limite mais c'est plutôt pour ce genre d'application là c'est vraiment c'est plus simple qu'une application native mais croyez nous sur parole quand vous lancez dans ça demande quand même c'est plus compliqué qu'un site voilà ne fait ne répliquez pas votre site avec ça honnêtement ça n'a pas d'intérêt c'est quelque chose en plus c'est vraiment fait pour des faits pour des applications il y a plein d'applications pour moi c'est un service supplémentaire c'est vraiment mon avis personnel et le meilleur exemple que j'ai à disposition c'est je pense que vous visissez tous des châteaux l'été si vous allez en vacances en france et moi je suis repealé par les petits papiers qu'on vous donne avec les machins et je me dis pourquoi j'aurais pas une progressive web app qui me permet offline c'est généralement dans ce coin là il n'y a pas de réseau d'aller voir mon avoir mon guide quoi en fait pour ça donc c'est des services en plus pour un média ça va être un reader pour un musée ça va être son guide pour une boîte ou avant bonjour vous avez acheté votre ticket deux jours avant vous envoie un email accéder à notre site installer notre application t'as même pas besoin de dire pw parce que là tu as déjà perdu la personne c'est de pense que c'est quoi en fait la personne installe l'application d'android c'est particulièrement bien fait dans ios il faut attendre quelques mois là ils sont en train de le faire mais ça va arriver et subitement tu est installé sur le bureau sur le springboard de ton téléphone avec des choses comme les notifications et c'est un point de vue marketing c'est assez agréable le tout en te passant joyeusement des app stores et autres certificats délirants et autres procès délirants donc c'est vraiment pour moi quelque chose en plus il ya une autre application qu'elle on pensait avec matieu souvent la carte d'un restaurant t'es offline tu veux passer dans enfin tu veux avoir quelque chose l'adresse de quelque chose tu peux proposer une petite partie de ton site les informations essentielles de ton site par exemple sous forme d'une petite application installée ou ce genre de choses pas cas typique les formuleurs de contact pour les médecins t'es online tu as une petite application qui permet de prendre un rendez-vous tu vois c'est donc vraiment une extension en pensant notification orli et applicatif et pas site web non ça il faudrait que tu fasses soit une application hybrid soit une application mobile html 5 te permet certaines enfin te proposent certaines certains accès par exemple la webcam tu peux accéder en html simple à l'appareil photo à la webcam de ton de ton utilisateur et tout ce qui est adresse book ça va pas être possible grosso modo tu vas pouvoir faire de la géolocalisation ça c'est sûr tu vas pouvoir manipuler la partie la partie caméra mais il ya beaucoup de choses par exemple tu n'auras pas le cher center le petit pop-up qui s'ouvre où tu vas partager par facebook twitter avec les comptes préenregistrés d'utilisateurs ça t'auras pas accès pour l'instant je croyais qu'il y avait créé l'activité vous pouvez avoir le last call mais alors le réact natif c'est une application hybride ça c'est pas une pwa donc c'est l'idée c'est que ça va être compilé distribué dans un app store et installé et tu retombe dans le cycle normal c'est très bien on en fait aussi mais c'est complètement différent en fait tu parles de la gestion des images alors pareil alors ça c'est un des trucs les plus durs parce que ça prend de la place voilà mais tu peux stocker en local les images avec toutes les précautions d'usage où tu peux mettre des alternatives tu peux préciser il ya des gens qui se content de préciser qu'il n'y a pas d'image ou qui met une image basse résolution d'y mettre autre chose mais au même titre que tu stockes du texte tu pourrais stocker des images il faut les encoder d'une certaine d'une certaine manière alors les pws ou a us c'est c'est un problème non en fait c'est un secret polychinelle mais a us vit enfin apple vit en grande partie de son magasin d'application qui résiste aussi longtemps que possible au pwa mais on a eu une divine surprise qu'on pensait qu'il ne fera jamais honnêtement voilà et je ne sais pas pourquoi en octobre ils ont annoncé qu'ils allaient supporter les services workers parce qu'en fait c'est pas qu'ils supportent pas les pws c'est vrai qu'ils ne veulent pas implémenter les services workers mais comme ils prennent du retard tout le monde leur demande ils ont commencé à le faire là donc il ya la beta 3 de la version a us actuelle qui commence à supporter les services workers ne la testait pas c'est un peu ça marche pas très bien mais ça arrive si la fichage de commentaire en fait le fait d'avoir un formula c'est rien d'autre que quelque chose que connecté en ligne ça veut juste dire que quand tu vas être en mode hors ligne il y a peut-être des choses que tu vas pas proposer à ton utilisateur tout simplement il va falloir le gérer tu vas détecter que tu es hors ligne tu vas dire désolé faut que tu retrouves du réseau pour poster où tu vas faire comme facebook tu vas mettre cette petite publicité qui dit vous pouvez poster hors ligne il n'y a aucun souci et puis je m'occuperai d'envoyer votre commentaire quand vous aurez du raison on le fait pas nativement parce qu'en fait c'est une sorte de frémoire que l'aptique mais en fait tu peux même le faire en dehors d'aptique c'est juste voilà nous on affiche les commentaires mais on pourrait on pourrait en poster on l'a déjà fait pour des utilisateurs c'est pas le plus dur pour le cours parce qu'un moyen d'advertir l'utilisateur quelle soit la main de ce qui est avec téléchargement de cache c'est moi qui suis dans j'ai pas de repos en france là j'ai que de son méga moi donc je veux pas c'est une bonne question ça c'est une bonne question c'est pas si je crois pas qu'il y a une chose dans le manifestement ça c'est sûr que non non non et bien il va falloir qu'on y travaille là là je veux pour un peu il faut regarder tu veux dire est-ce que les contenus sont disponibles off-line si ça s'agit d'un site d'articles je veux dire est-ce que juste avant d'entraîner trop je peux avoir oui là nous on fait de manière on a eu une x une pardonnera un peu basique on tapera pour ça mais oui il y a une fois l'espèce de bouton de refresh là-bas et on affiche un petit espèce de truc en haut là si tu peux cliquer dessus voilà et donc à la fin de ce process tu vois il y a marqué contente d'études c'est que ça ce n'est pas hyper clair mais tu pourras faire un message si oui si si tu peux pour ça on commence à rien avoir avec le pw a ni rien tu peux en général encore une fois le local saurage si vous voulez l'utiliser en dehors du pw a il n'y a aucun souci il y a d'ailleurs beaucoup de sites médias dont le gardien je crois qu'il le faut il est stock une partie du contenu off-line il y a aussi le Washington post voilà il a tout à fait parce que parce qu'il y a le la coq qui est téléchargé en local non ça c'est vraiment génial enfin moi je trouve ça c'est la partie qui me plaît de plus c'est ce qui me plaît dans une application mobile c'est que finalement tout est stocké en local tout tout ce que vous téléchargez en permanence et qui sont toujours la même chose genre le com du burger menu c'est embêtant ça repasse et là le fait pour la première fois avec une technologie web de mettre tout ça en local et l'utilisateur l'a une bonne fois pour toutes finalement vous ne téléchargez que les contenus voire que les contenus mis à jour donc évidemment c'est pas que la pw a est performante par essence c'est juste qu'elle a besoin de télécharger moins de choses et si votre web service est bien bien boosté ben on a une impression vous voyez là il y a tout le délire marketing autour c'est ultra performant je peux vous assurer que vous pouvez faire des pwa ultra lente si vous le voulez mais normalement elle a besoin de moins de moins de données de télécharger de moins de données en fait alors moi je travaille sur l'afrique en l'occurrence julien d'ailleurs mais et donc c'est très pratique pour nous parce qu'ils ont des forfaits qui coûtent extrêmement cher et donc si on s'amuse à chaque fois à leur balancer tout le contenu tous les éléments on crame leurs forfaits à chaque fois et donc ça c'est un des moyens de d'économiser l'avant-passe en quelque sorte oui d'autres d'autres questions pas qu'il y a une demi-mille maximum oui oui on est d'accord en fait je pense qu'il y a une politique de il y a une vraie politique pour en parler avec julien c'est problème là mais on a une politique il faut une politique très très précise de mise offline c'est sûr que si vous avez une politique bourrine qui dit je prends tout ce qu'il y a dans le site vous avez une knowledge base de 10 000 fiches et vous téléchargez tout sur le téléphone alors là personne ne va pas vous remercier d'ailleurs je pense que ça va faire éclater le cal storage et en plus ça sert à rien parce que l'utilisateur il voit concrètement il a envie de voir une fiche quoi probablement et pas 80 000 et donc je pense que dans le produit on le fait pas là on en est vraiment désolé mais c'est des tout qui contenu il faut dire télécharger les 10 dernières fiches et écharger 7 fiches là pour l'avoir offline un petit peu comme le fait le kindle d'amazon par exemple qui vous t'écharge pas tout parce que si vous avez 500 livres c'est l'enfer il ya toute une petite ergonomie et une interaction avec l'utilisateur il faut lui faire comprendre qu'il peut faire passer des choses offline et peut-être que vous pouvez télécharger les contenus les plus récents pour le cas d'utilisation on parlait adriant je rends dans le métro j'ai envie d'avoir les 10 dernières news et c'est sûr que si vous téléchargez tout de manière indistin que ça a aucun sens puis en passant c'est exactement le même problème avec les appels mobiles vous amusez à tout télécharger ça va être l'enfer sur terre pour l'utilisateur c'est gestion du offline il y a les toutes nouvelles c'est un nouveau cas d'usage ok il va falloir s'adopter et il va falloir être prudent effectivement oui une dernière question allé c'est exécuté par un navigateur qu'on bâtisse crôme les ce qu'il y a pas le autour alors d'ailleurs vous pouvez choisir de l'avoir c'est-à-dire en passant mais la plupart des gens ne le font pas pour imiter une application mobile dans google analytics tu as la possibilité facilement d'androïne d'avoir de détecter le mode enfin tu dois envoyer à google analytics l'information mais tu as en javascript la possibilité de détecter le mode standalone tu peux dire je suis en standalone ou pas sur ios c'est un petit peu plus utile ça va venir aussi mais il donne moins d'outils pour le faire mais la réponse est oui comme tu peux d'ailleurs comme je le disais avec le kit google analytics le sdk tu peux stocker tout ce que fait l'utilisateur y compris le fait qu'il vient de consommer des pages offline et donc tu auras la proportion d'utilisation si tu veux en mode de flingue nous on le fait typiquement c'est assez surprenant il peut y avoir 15 20 % des pages consommer en mode de flingue mais c'est juste pour dire vous utilisez la couche universelle analytics qui fait des choses par défaut mais si vous descendez d'un niveau vous pouvez customiser ce qui est envoyé analytics de toutes les manières j'ai rencontré un petit qui est vachement bien qui traque des cache en caisse enregistreuse avec google analytics donc non non ça c'est pas un problème vous pouvez tout à fait adapter d'ailleurs on le fait un petit ça pose aucun problème je pense qu'on a fini