Un minuteur en PWA pour vos ateliers

J’ai fait un minu­teur, il est joli, il est cool, il est dispo­nible ici.

Quoi qu’est-ce que c’est ?

C’est un minu­teur. il décompte le temps. Enfin, pas tout le temps. Il compte le temps pendant un certain temps, que juste­ment vous défi­nissez, c’est le but. Il ne décompte pas le temps jusqu’à la fin des temps. Enfin, vous pouvez essayer de le régler à une valeur très très haute et attendre très très long­temps jusqu’à la mort ther­mique de l’uni­vers, mais vous risquez d’at­tendre pour rien, ou de vous tromper dans votre esti­ma­tion et de rater la fin à deux minutes près. Ce serait ballot.

Mais il est parfait pour minuter du collage de post-it.

  • Il est pensé pour être bien visible, par exemple projeté en réunion ou en forma­tion, pas sur télé­phone ou dans un coin de votre écran.
  • Les touches espace et entrée permettent de lancer et d’arrêter le minu­teur.
  • Si vous les acceptez, des noti­fi­ca­tions natives appa­rai­tront à 50, 25, 10 et 0% du temps.
  • D’après mes tests, il fonc­tionne même sans réseau.
  • Via Chrome, il peut être installé en cliquant sur l’icône « plus » dans la barre d’adresse et appa­raitra comme n’im­porte quelle appli­ca­tion locale.

Pourquoi ?

  • Ce n’est pas sans utilité.
  • C’était l’oc­ca­sion de s’ini­tier à Vue.js.
  • Comme il y a plusieurs manières de modi­fier le temps, c’est un bon exer­cice de concep­tion tech­nique pour la gestion des états.
  • Il y aussi des choix de concep­tion à faire sur des actions d’ap­pa­rence anodines. Par exemple : faut-il auto­riser l’ajout de minutes en cours de route, sans même faire pause ? Pour moi oui, c’est un cas d’usage en pleine forma­tion. OK, mais alors l’ac­tion de remise à zéro doit-elle réini­tia­liser à la durée d’ori­gine, ou à cette durée assortie des minutes ajou­tées ? Plein de petites ques­tions comme ça.

Détails tech­niques

App en Vue.js, avec vue-cli et le module cli-plugin-pwa qui se charge d’une bonne partie de la trans­for­ma­tion en PWA.

Si vous voulez rire, le code est ici.

PWA : progres­sive web appli­ca­tion. Un ensemble de tech­no­lo­gies permet­tant d’en­ri­chir une page web de fonc­tions réser­vées tradi­tion­nel­le­ment à des appli­ca­tions natives et locales. Notifications, fonc­tions hors-ligne, accès aux péri­phé­riques, etc,