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.
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 avec un peu de css et quelques modifs pour que ça réagisse aux clics sur desktop et aux taps sur mobile.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=0">
<style>
body {
height: 100vh;
margin: 0; padding: 0;
text-align: center;
font: bold 25vw Lucida Console, monospace;
background-color: #A8C64E; color: #3C412C;
}
</style>
</head>
<body onload="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\
sedown',h);addEventListener('touchend',e=>{e.preventDefault()})">
</body>
</html>Le manifest
Il s'agit d'un fichier json donnant quelques infos sur l'application :
{
"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 :
<link rel="manifest" href="/taptempo/manifest.json">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.
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 :
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
# Hello World
Posté par mzf (site web personnel) . Évalué à 9.
Je vois que mon TapTempo sert maintenant de "Hello World!" pour tester des langages. Cool :-)
(et bravo pour l'exploration des worker manifest)
# PWA ?
Posté par Jona . Évalué à 3.
Et voici le lien vers l'article Wikipédia qui introduit le concept de Progressive web app pour ceux que ça intéresse.
[^] # Re: PWA ?
Posté par totof2000 . Évalué à 3.
PWA ? Pouah !
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.