tag:linuxfr.org,2005:/tags/pwa/publicLinuxFr.org : les contenus étiquetés avec « pwa »2024-03-05T07:44:09+01:00/favicon.pngtag:linuxfr.org,2005:Bookmark/80082024-03-05T07:44:09+01:002024-03-05T07:44:09+01:00Apple rétropédale un tout petit peu sur les Web App.<a href="https://open-web-advocacy.org/blog/apple-backs-off-killing-web-apps/">https://open-web-advocacy.org/blog/apple-backs-off-killing-web-apps/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/135045/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/wilk/liens/apple-retropedale-un-tout-petit-peu-sur-les-web-app#comments">ouvrir dans le navigateur</a>
</p>
wilkhttps://linuxfr.org/nodes/135045/comments.atomtag:linuxfr.org,2005:Bookmark/79482024-02-16T00:11:41+01:002024-02-16T00:11:41+01:00Apple intentionally kills web applications for EU users in iOS 17.4 onward to spite its EU users<a href="https://www.osnews.com/story/138605/apple-intentionally-kills-web-applications-for-eu-users-in-ios-17-4-onward-to-spite-its-eu-users/">https://www.osnews.com/story/138605/apple-intentionally-kills-web-applications-for-eu-users-in-ios-17-4-onward-to-spite-its-eu-users/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/134922/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/antistress/liens/apple-intentionally-kills-web-applications-for-eu-users-in-ios-17-4-onward-to-spite-its-eu-users#comments">ouvrir dans le navigateur</a>
</p>
antistresshttps://linuxfr.org/nodes/134922/comments.atomtag:linuxfr.org,2005:Diary/402472022-04-25T17:49:54+02:002022-04-25T17:49:54+02:00Our Shopping List : sortie de la v2 !Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Nal,</p>
<p>L'année dernière je me suis lancé sur un projet un peu fou : développer une <a href="https://fr.wikipedia.org/wiki/Progressive_web_app">PWA</a> en <a href="https://fr.wikipedia.org/wiki/Node.js">Node</a> avec frontend en <a href="https://fr.wikipedia.org/wiki/Vue.js">Vue</a>, moi qui ne fais normalement que du <a href="https://fr.wikipedia.org/wiki/PHP">PHP</a> backend et qui crache volontier (mais gentiment) sur le Javascript.</p>
<p>Pour ceux qui l'avaient raté, j'avais fait un journal de la v1 : <a href="//linuxfr.org/users/nanawel/journaux/our-shopping-list-liste-de-courses-partagee-et-libre">Our Shopping List : liste de courses partagée et libre</a></p>
<p>Faut croire que je me suis pris au jeu puisque je continue depuis à travailler lentement mais régulièrement sur <a href="https://github.com/nanawel/our-shopping-list">cette appli</a> et que je me suis même lancé il y a quelques semaines sur un refactoring en profondeur afin de permettre - enfin - de partager une même instance de serveur avec plusieurs groupes de personnes ne se connaissent pas nécessairement, et cela surtout, sans se gêner.</p>
<p>À la notion de <em>liste</em> s'est donc ajoutée celle de <em>tableau</em>. Une liste appartenant désormais à un tableau, et un tableau ayant une ou plusieurs listes. La clé du partage est l'identifiant du tableau, que j'ai souhaité le plus simple possible : c'est donc le <a href="https://fr.wikipedia.org/wiki/Slug_(journalisme)#En_informatique">slug</a> de celui-ci (dérivé de son nom) qui est utilisable.</p>
<p>Exemple : pour un tableau nommé "Louise et Michel", le <em>slug</em> sera <code>louise-et-michel</code>, et son URL <code>https://osl.example/#/board/louise-et-michel</code></p>
<p>Un bouton "Partager" est présent dans le menu principal sur mobile pour simplifier l'envoi de l'URL par toute application enregistrée pour cet usage (SMS, email, messagerie, chat, etc.).</p>
<h3 id="toc-exemple-dusage">Exemple d'usage</h3>
<p>Petite démo issue du README (merci <a href="https://github.com/phw/peek">Peek</a>) :</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6e616e6177656c2f6f75722d73686f7070696e672d6c6973742f626c6f622f356263393338343938383639626535366162323763626535373361663561396232363835613432302f646f632f6f736c2d75736167652e6769663f7261773d74727565/osl-usage.gif?raw=true" alt="" title="Source : https://github.com/nanawel/our-shopping-list/blob/5bc938498869be56ab27cbe573af5a9b2685a420/doc/osl-usage.gif?raw=true"> </p>
<h3 id="toc-ce-qui-change-et-ce-qui-ne-change-pas">Ce qui change et ce qui ne change pas</h3>
<p>En vrac et pour faire court, les différences avec la v1 :</p>
<ul>
<li>L'ajout des tableaux donc, mais <strong>débrayables</strong> via une variable d'environnement, de manière à pouvoir retrouver le fonctionnement de la v1 (= toutes les listes sont accessibles directement, la notion de tableau est masquée)</li>
<li>Le support de la traduction (i18n), avec l'inclusion de la traduction FR de base</li>
<li>Une correction du tri des items pour ignorer les <a href="https://fr.wiktionary.org/wiki/diacritique#Nom_commun_1">diacritiques</a>
</li>
<li>le mode "voir tous les articles" a été remplacé par "voir les articles cochés par date de cochage décroissant" afin de faciliter l'annulation d'un cochage involontaire</li>
<li>Une architecture mieux découpée et plus maintenable</li>
<li>Une empreinte réseau plus faible</li>
</ul>
<p>Et tout ça, en essayant de ne pas sacrifier les perfs que j'essaye de conserver les meilleures possibles sur un appareil "ancien" (type Galaxy J5/S5), ce qui n'est pas chose aisée.</p>
<p>Côté <strong>comportement et interactions</strong>, on reste sur ce qui existe et qui a été éprouvé :</p>
<ul>
<li>
<em>swiper</em> vers la droite pour cocher, vers la gauche pour décocher</li>
<li>la recherche filtre la liste en temps-réel</li>
<li>quand la recherche est active, un simple clic/touch sur un article le coche ou le décoche</li>
<li>un appui prolongé sur un article ouvre le formulaire d'édition (mobile)</li>
</ul>
<p>Je reste à l'écoute de tous les retours et suggestions, voire PR pour les plus intéressés/volontaires.</p>
<hr>
<h3 id="toc--avertissement-nécessaire">⚠ Avertissement nécessaire</h3>
<p>Si vous avez bien lu et compris le fonctionnement, vous aurez vite déduit que <strong>rien ne garantit la confidentialité des données sur un serveur OSL partagé</strong>, et vous aurez raison. Si vous connaissez le nom ou le <em>slug</em> d'un tableau, vous pouvez l'ouvrir et modifier ou supprimer les informations sans y avoir été autorisé.</p>
<p>C'est néanmoins un fonctionnement qu'on retrouve déjà sur 2 célèbres webapps collaboratives : <a href="https://fr.wikipedia.org/wiki/Etherpad">Etherpad</a> et <a href="https://fr.wikipedia.org/wiki/EtherCalc">Ethercalc</a>.</p>
<p>Une évolution future permetta peut-être de pouvoir - par configuration - sacrifier à la simplicité des <em>slugs user-friendly</em>, un fonctionnement plutôt basé sur des identifiants aléatoires et difficilement devinables (sécurité par l'obscurité mais bon).</p>
<hr>
<h3 id="toc-liens">Liens</h3>
<ul>
<li>Sources : <a href="https://github.com/nanawel/our-shopping-list">https://github.com/nanawel/our-shopping-list</a>
</li>
<li>Release 2.0.0 : <a href="https://github.com/nanawel/our-shopping-list/releases/tag/2.0.0">https://github.com/nanawel/our-shopping-list/releases/tag/2.0.0</a>
</li>
<li>Image Docker : <a href="https://hub.docker.com/r/nanawel/our-shopping-list/tags?page=1&name=2.0.0">https://hub.docker.com/r/nanawel/our-shopping-list</a>
</li>
<li>Démo auto-hébergée : <a href="https://ourshoppinglist.homelinux.org/">https://ourshoppinglist.homelinux.org/</a>
</li>
</ul>
<div><a href="https://linuxfr.org/users/nanawel/journaux/our-shopping-list-sortie-de-la-v2.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127566/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/nanawel/journaux/our-shopping-list-sortie-de-la-v2#comments">ouvrir dans le navigateur</a>
</p>
Nanawelhttps://linuxfr.org/nodes/127566/comments.atomtag:linuxfr.org,2005:Diary/400902022-01-15T00:51:54+01:002022-01-15T00:51:54+01:00opensara : les doigts dans l'icôneLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Bonjour Nal,</p>
<p>Je t'écris pour te faire part d'une histoire qui me donne envie de faire un gros doigt aux développeurs d'un certain brouteur. N'étant pas mapolinus, je vais plutôt expliquer le problème que j'ai rencontré.</p>
<p>Je travaille sur l'accessibilité de mon dernier jeu <a href="https://play.devnewton.fr/opensara/">opensara</a>: les jeunes générations n'étant vraiment pas doué avec l'informatique, mais plus à l'aise avec le digital, ils veulent tout faire avec leurs doigts boudinés et sales sur les écrans minuscules des smartphones tournant avec des OS privateurs. Bref moi de mon temps, c'était mieux avant, on avait une souris et un clavier. Le monde était pur, on avait l'avenir devant nous avec des voitures volantes et des répliquants…</p>
<p>Mais je dis verge: je travaille donc sur l'adaptation aux écrans tactiles de ce jeu en implémentant une manette virtuelle:</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f7774662e726f666c636f707465722e66722f706963732f6264777946784f732f504b44734177666f2e706e67/PKDsAwfo.png" alt="virtual pad" title="Source : https://wtf.roflcopter.fr/pics/bdwyFxOs/PKDsAwfo.png"></p>
<p>Et puis je me suis dit que j'allais ajouter un petit manifest.json pour faire d'opensara <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#why_a2hs">une PWA (Progressive Web App) capable A2HS (Add to Home Screen)</a> pour que le joueur puisse ajouter une icône pour lancer le jeu avec un brouteur en plein écran sur son écran d'accueil.</p>
<p>En plein écran, grâce à la propriété <code>"display" : "fullscreen"</code>.</p>
<p>Et là ça coince: le jeu ne se lance pas en plein écran.</p>
<p>3h de debug plus tard, j'ai compris: Firefox pour Android n'applique le mode fullscreen que si l'application déclare une icône en 512x512.</p>
<p>Pourquoi? Sans doute un bout de code fait avec le cul, je vais éviter d'y mettre les doigts.</p>
<p>Ah Nal, quel est le dernier bug rigolo que tu as recontré?</p>
<div><a href="https://linuxfr.org/users/devnewton/journaux/opensara-les-doigts-dans-l-icone.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/126576/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/devnewton/journaux/opensara-les-doigts-dans-l-icone#comments">ouvrir dans le navigateur</a>
</p>
devnewton 🍺https://linuxfr.org/nodes/126576/comments.atomtag:linuxfr.org,2005:Diary/397552021-05-07T14:07:15+02:002021-05-07T14:07:15+02:00Our Shopping List : liste de courses partagée et libreLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p><em>TL;DR; Par manque d'alternative à la solution privative de référence, j'ai initié un projet de liste de courses partagée en technos web, auto-hébergeable et utilisable facilement sur mobile : <a href="https://github.com/nanawel/our-shopping-list">https://github.com/nanawel/our-shopping-list</a></em></p>
<h3 id="toc-lintroduction-nécessaire">L'introduction nécessaire</h3>
<p>Nal,</p>
<p>J'utilise depuis déjà pas mal de de temps <a href="https://www.getbring.com/en/home">Bring</a> pour gérer ma liste de courses avec ma moitié. Quoi de plus classique me direz-vous, c'est quand même la solution la plus évidente pour des utilisateurs d'Android.</p>
<p>Oui mais voilà, Bring c'était bien au début, quand ça faisait <em>une chose une seule et que ça la faisait bien</em> ™, mais ça c'était au début. L'application légère et efficace a depuis laissé place à un truc lourd, plutôt lent, à la synchro capricieuse, qui pousse des notifications inutiles et qui demande des permissions… surprenantes (position GPS ?).</p>
<p>Bref, c'est devenu une appli Android mature quoi. (troll inside ah bien tiens non pas tant que ça)</p>
<p>Puis un jour de colère - et de motivation - j'ai décidé de chercher un équivalent auto-hébergeable parce que bon, une liste de courses partagée, c'est un besoin tellement commun et simple qu'on doit en trouver par cagettes entières (tu l'as ?).</p>
<p>Ha ha. Non.</p>
<p>Des listes de courses oui. Libres, mobile-friendly et collaboratives, pas trouvé.</p>
<p>Donc je me suis dit "Oh ben tiens t'as qu'à la faire toi qui cherchais un projet support pour faire une autre techno que PHP pour changer". Ah oui, bonne idée, puis on peut pas dire que le modèle de données soit d'une complexité affolante, on frise le <em>hello world</em>.</p>
<p>Donc, mon objectif était de créer une appli <a href="https://en.wikipedia.org/wiki/Progressive_web_app">PWA</a>, collaborative, simple et efficace pour gérer nos listes de courses.</p>
<h3 id="toc-les-technos">Les technos</h3>
<p>J'ai choisi pour ça de sortir de ma zone de confort (non sans mal) et d'opter pour un backend en <strong>NodeJS</strong> avec persistance dans du <strong>MongoDB</strong>. Pour le front j'ai jeté mon dévolu sur un socle <strong>VueJS</strong> (après avoir comparé les niveaux de hype des différentes technos similaires), auquel j'ai été finalement obligé d'ajouter Vuetify, Vuex, Vue-Router, Vuex ORM et son plugin Agios.</p>
<p>Et 2-3 autres trucs. Oui moi aussi j'ai été un peu choqué mais c'est comme ça, si on veut pas réinventer la roue, faut accepter d'avoir 200 Mo de dépendances.</p>
<p>Le résultat est désormais suffisamment stable et complet pour être utilisable en auto-hébergement, pour un usage privé seulement puisqu'une instance ne gère actuellement qu'un ensemble unique de listes, partagée par tous les utilisateurs de celle-ci (ce qui correspond bien à l'utilisation pas un foyer donc).</p>
<h3 id="toc-cest-où">C'est où ?</h3>
<p>Le dépôt Githubcrosoft est là : <a href="https://github.com/nanawel/our-shopping-list">https://github.com/nanawel/our-shopping-list</a></p>
<p>Les quelques features suivantes sont en place, ou au moins sont initiées :</p>
<ul>
<li>Gestion de plusieurs listes indépendantes</li>
<li>Synchro temps-réel entre les clients connectés</li>
<li>Gestion des états sur les items (coché/non coché)</li>
<li>Recherche/filtrage des items en cours de frappe</li>
<li>Swipe pour cocher ou décocher facilement les items</li>
<li>Support PWA de base (permettant quand même d'ajouter l'instance sur l'écran d'accueil pour accès facilité)</li>
</ul>
<h3 id="toc-vas-y-montre">Vas-y montre</h3>
<p>Et à quoi ça ressemble me direz-vous ? À une interface Material minimale, répondrai-je.</p>
<p><strong>Mobile</strong></p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6e616e6177656c2f6f75722d73686f7070696e672d6c6973742f7261772f6d61737465722f646f632f6d6f62696c652d30312e706e67/mobile-01.png" alt="Vue mobile" title="Source : https://github.com/nanawel/our-shopping-list/raw/master/doc/mobile-01.png"><br>
<img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6e616e6177656c2f6f75722d73686f7070696e672d6c6973742f7261772f6d61737465722f646f632f6d6f62696c652d30332d7365617263682e706e67/mobile-03-search.png" alt="Recherche mobile" title="Source : https://github.com/nanawel/our-shopping-list/raw/master/doc/mobile-03-search.png"></p>
<p><strong>Desktop</strong></p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6e616e6177656c2f6f75722d73686f7070696e672d6c6973742f7261772f6d61737465722f646f632f6465736b746f702d30312d73776970652e706e67/desktop-01-swipe.png" alt="Vue desktop" title="Source : https://github.com/nanawel/our-shopping-list/raw/master/doc/desktop-01-swipe.png"></p>
<p>Dans ma wishlist j'ai déjà les features suivantes :</p>
<ul>
<li>i18n</li>
<li>Gestion de comptes avec authentification (notamment pour permettre plusieurs jeux de listes, avec partages fins, etc.)</li>
<li>Mode hors-ligne avec synchro différée (ce qui doit être possible avec un mode PWA complet)</li>
</ul>
<p>mais pour le moment je dois encore me remettre mentalement de tant de JS (haha).</p>
<p>Pour installer le bouzin, vous avez un <a href="https://github.com/nanawel/our-shopping-list/blob/master/doc/docker-compose.yml">docker-compose.yml</a> proposé et il vous suffira ensuite d'ouvrir le port 8080 ou de déclarer le container dans votre reverse-proxy préféré. Attention, comme cela utilise des WebSockets, il faut prévoir une petite configuration supplémentaire (<a href="https://github.com/nanawel/our-shopping-list#twisted_rightwards_arrows-notes-for-reverse-proxy-ssl-offloading">voir README</a>).</p>
<p>Bien entendu, les idées et (surtout) les contributions sont les bienvenues pour améliorer cette base.</p>
<h3 id="toc-liens">Liens</h3>
<ul>
<li>Le projet sur Github : <a href="https://github.com/nanawel/our-shopping-list">https://github.com/nanawel/our-shopping-list</a>
</li>
<li>L'image sur Docker Hub : <a href="https://hub.docker.com/r/nanawel/our-shopping-list">https://hub.docker.com/r/nanawel/our-shopping-list</a>
</li>
</ul>
<div><a href="https://linuxfr.org/users/nanawel/journaux/our-shopping-list-liste-de-courses-partagee-et-libre.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124202/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/nanawel/journaux/our-shopping-list-liste-de-courses-partagee-et-libre#comments">ouvrir dans le navigateur</a>
</p>
Nanawelhttps://linuxfr.org/nodes/124202/comments.atomtag:linuxfr.org,2005:Bookmark/4122019-01-06T16:49:26+01:002019-01-06T16:49:26+01:00Stratégie de Google pour un OS Open Source : AOSP/ Chromium OS / Fuchsia OS - Capitole du Libre<a href="https://www.youtube.com/watch?v=AIkVCHCyEgU">https://www.youtube.com/watch?v=AIkVCHCyEgU</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/116131/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/antistress/liens/strategie-de-google-pour-un-os-open-source-aosp-chromium-os-fuchsia-os-capitole-du-libre#comments">ouvrir dans le navigateur</a>
</p>
antistresshttps://linuxfr.org/nodes/116131/comments.atomtag:linuxfr.org,2005:Diary/377662018-03-02T02:53:38+01:002018-03-02T02:53:38+01:00TapTempo sur mobile en PWALicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Bonjour à tous.</p>
<p>Suite aux portages de TapTempo en divers langages (Rust, Ada, Javascript, Perl (5.10 et 6), Python (2.7), bash, Haskel), pourquoi pas une <a href="https://chutelib.net/taptempo/">version pour ordiphone</a>.</p>
<p>Non, c'est pas un portage. L'interface n'est pas la même, y'a pas d'internationalisation ni d'option… L'idée était de découvrir rapidement le fonctionnement des progressive web apps.</p>
<p>Première étape, faire un TapTempo en html/javascript. Par exemple en reprenant le code d'un des commentaires sur <a href="//linuxfr.org/users/wawet76/journaux/portage-de-taptempo-en-javascript">ce journal</a> avec un peu de css et quelques modifs pour que ça réagisse aux clics sur desktop et aux taps sur mobile.</p>
<pre><code class="html"><span class="cp"><!doctype html></span>
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"user-scalable=0"</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="nt">body</span> <span class="p">{</span>
<span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">vh</span><span class="p">;</span>
<span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">text-align</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
<span class="k">font</span><span class="p">:</span> <span class="kc">bold</span> <span class="mi">25</span><span class="kt">vw</span> <span class="n">Lucida</span> <span class="n">Console</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span>
<span class="k">background-color</span><span class="p">:</span> <span class="mh">#A8C64E</span><span class="p">;</span> <span class="k">color</span><span class="p">:</span> <span class="mh">#3C412C</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span> <span class="na">onload</span><span class="o">=</span><span class="s">"t=[];h=e=>{l=t.length;n=t[l]=Date.now();if(l)document.body.innerHTML=Math.floor(60000/(n-t[0])*l);t=t.slice(-4);e.preventDefault()};addEventListener('touchstart',h);addEventListener('mou\</span>
<span class="s">sedown',h);addEventListener('touchend',e=>{e.preventDefault()})"</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span></code></pre>
<h3 id="le-manifest">Le manifest</h3>
<p>Il s'agit d'un fichier json donnant quelques infos sur l'application :</p>
<pre><code class="javascript"><span class="p">{</span>
<span class="s2">"name"</span><span class="o">:</span> <span class="s2">"Tap Tempo Progressive Web App"</span><span class="p">,</span>
<span class="s2">"short_name"</span><span class="o">:</span> <span class="s2">"TapTempo"</span><span class="p">,</span>
<span class="s2">"icons"</span><span class="o">:</span> <span class="p">[{</span>
<span class="s2">"src"</span><span class="o">:</span> <span class="s2">"taptempo.png"</span><span class="p">,</span>
<span class="s2">"sizes"</span><span class="o">:</span> <span class="s2">"192x192"</span><span class="p">,</span>
<span class="s2">"type"</span><span class="o">:</span> <span class="s2">"image/png"</span>
<span class="p">}],</span>
<span class="s2">"background_color"</span><span class="o">:</span> <span class="s2">"#A8C64E"</span><span class="p">,</span>
<span class="s2">"start_url"</span><span class="o">:</span> <span class="s2">"/taptempo/"</span><span class="p">,</span>
<span class="s2">"display"</span><span class="o">:</span> <span class="s2">"standalone"</span>
<span class="p">}</span></code></pre>
<p>On indique où se situe le manifest, avec une balise link dans le fichier html :</p>
<pre><code class="html"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"manifest"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/taptempo/manifest.json"</span><span class="p">></span></code></pre>
<p>Une fois le manifest en place, les navigateurs mobiles proposent d'ajouter à l'écran d'accueil un lien vers l'application. Avec Chrome il faut passer par le menu; avec Firefox une icône dédiée apparaît dans la barre d'url.</p>
<p>On a une icône. La page se lance sans barre d'url. Ça ressemble à une application Android.</p>
<p>Sauf… Sauf que ça ne marche pas hors-ligne.</p>
<h3 id="le-service-worker">Le service worker</h3>
<p>Les services workers permettent de gérer en javascript le comportement d'un cache. Pour l'instant on va s'en tenir au minimum, sans gestion des mises à jour :<br>
- À l'installation de l'application, on met les fichiers nécessaires dans un cache.<br>
- Quand les fichiers sont demandés, on utilise la version en cache.</p>
<pre><code class="javascript"><span class="k">this</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'install'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">waitUntil</span><span class="p">(</span>
<span class="nx">caches</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">'v1'</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">cache</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">cache</span><span class="p">.</span><span class="nx">addAll</span><span class="p">([</span>
<span class="s1">'/taptempo/'</span><span class="p">,</span>
<span class="s1">'/taptempo/sw.js'</span>
<span class="p">]);</span>
<span class="p">})</span>
<span class="p">);</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'fetch'</span><span class="p">,</span> <span class="nx">event</span> <span class="p">=></span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">respondWith</span><span class="p">(</span>
<span class="nx">caches</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">request</span><span class="p">)</span>
<span class="p">);</span>
<span class="p">});</span></code></pre>
<p>Un dernier bout de javascript est ajouté à la page pour lancer le service worker :</p>
<pre><code class="javascript"><span class="k">if</span> <span class="p">(</span><span class="s1">'serviceWorker'</span> <span class="k">in</span> <span class="nx">navigator</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">navigator</span><span class="p">.</span><span class="nx">serviceWorker</span><span class="p">.</span><span class="nx">register</span><span class="p">(</span><span class="s1">'/taptempo/sw.js'</span><span class="p">);</span>
<span class="p">}</span></code></pre>
<p>L'application est maintenant utilisable hors-ligne.</p>
<p>Une fois qu'il y un manifest, un service worker suffisant pour le hors-ligne, et que l'accès est en https, Chrome pour Android propose automatiquement l'installation de l'appli quand on visite son URL. Avec Firefox il faut utiliser l'icône située dans la barre d'url.</p>
<p>À essayer ici : <a href="https://chutelib.net/taptempo/">https://chutelib.net/taptempo/</a></p>
<p>Pour aller un peu plus loin dans les web workers, avec une introduction au "Promesses" utilisées pour l'exécution asynchrone : <a href="https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers</a></p><div><a href="https://linuxfr.org/users/wawet76/journaux/taptempo-sur-mobile-en-pwa.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/113837/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/wawet76/journaux/taptempo-sur-mobile-en-pwa#comments">ouvrir dans le navigateur</a>
</p>
Wawet76https://linuxfr.org/nodes/113837/comments.atom