URL: https://linuxfr.org/users/wawet76/journaux/taptempo-sur-mobile-en-pwa Title: TapTempo sur mobile en PWA Authors: Wawet76 Date: 2018-03-02T02:53:38+01:00 License: CC by-sa Tags: taptempo, javascript et pwa Score: 18 Bonjour à tous. Suite aux portages de TapTempo en divers langages (Rust, Ada, Javascript, Perl (5.10 et 6), Python (2.7), bash, Haskel), pourquoi pas une [version pour ordiphone](https://chutelib.net/taptempo/). 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. Première étape, faire un TapTempo en html/javascript. Par exemple en reprenant le code d'un des commentaires sur [ce journal](https://linuxfr.org/users/wawet76/journaux/portage-de-taptempo-en-javascript) avec un peu de css et quelques modifs pour que ça réagisse aux clics sur desktop et aux taps sur mobile. ```html ``` Le manifest ----------- Il s'agit d'un fichier json donnant quelques infos sur l'application : ```javascript { "name": "Tap Tempo Progressive Web App", "short_name": "TapTempo", "icons": [{ "src": "taptempo.png", "sizes": "192x192", "type": "image/png" }], "background_color": "#A8C64E", "start_url": "/taptempo/", "display": "standalone" } ``` On indique où se situe le manifest, avec une balise link dans le fichier html : ```html ``` 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. On a une icône. La page se lance sans barre d'url. Ça ressemble à une application Android. Sauf... Sauf que ça ne marche pas hors-ligne. Le service worker ----------------- 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 : - À l'installation de l'application, on met les fichiers nécessaires dans un cache. - Quand les fichiers sont demandés, on utilise la version en cache. ```javascript this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/taptempo/', '/taptempo/sw.js' ]); }) ); }); this.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) ); }); ``` Un dernier bout de javascript est ajouté à la page pour lancer le service worker : ```javascript if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/taptempo/sw.js'); } ``` L'application est maintenant utilisable hors-ligne. 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. À essayer ici : https://chutelib.net/taptempo/ Pour aller un peu plus loin dans les web workers, avec une introduction au "Promesses" utilisées pour l'exécution asynchrone : https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers