PWA avancées. Ce qu'il faut savoir pour construire des appli métier mobiles

Ce que j’ai appris en créant des applications métier mobiles

Cet article a pour but de vous donner un aperçu technique général des principaux points à prendre en compte lors de la création PWA métier.

PWA, une excellente technologie pour :

Applications mobiles pour travailleurs de première ligne et collaborateurs sur le terrain

Les premiers à avoir fait bouger les choses dans le domaine des PWA a été la presse en ligne, qui s’est rendu compte que les gens n’étaient pas si impatients de télécharger une application dans un app store. Puis le commerce électronique est entré dans la danse. Aujourd’hui, d’autres secteurs d’activité commencent à voir l’avantage de créer une PWA au lieu de développer une application native pour deux ou trois plateformes différentes.

Les applications métier pour les travailleurs de première ligne et les collaborateurs « qui ne sont pas devant leur bureau » est un cas qui me semble être bien adapté aux les Application Web Progressive.
Vous pouvez créer une application mobile fonctionnelle rapidement, en utilisant uniquement les technologies du web : HTML, CSS, Javascript.
Et vous n’avez pas besoin de passer par une procédure de soumission à l’App Store.

Si vous voulez en savoir plus sur les raisons pour lesquelles vous devriez envisager de créer une application mobile, cliquez pour lire.

Vous n’avez pas besoin d’une application « Single page ».

Vous n’avez pas besoin d’un framework obésiciel à la React, Angular, Vue…

Votre utilisateur sera hors ligne. Souvent. C’est comme ça.

On peut être hors ligne pour plein de raisons : il y a encore beaucoup d’endroits, même dans les pays riches, qui ont une très faible connectivité Internet / réseau mobile. Votre utilisateur peut être dans le train, le métro, à bord d’un avion, au milieu de la mer, peut ne pas avoir assez de batterie pour désactiver le mode avion. Il n’y a tout simplement pas de 3G/4G.

try{
    const response = await fetch(url, init)
    return await response.json();
} catch (fetchError){
    // see https://github.com/github/fetch/issues/201#issuecomment-308213104 for fetch fail
    console.log('Tu es hors ligne, désolé!')
    throw new Error('transmission_failed')
}

Utilisez workbox.

Un point c’est tout :)

Cette bibliothèque vous fournit plein de méthodes bien pensées. Vous pouvez organiser votre logique pour le routage, la mise en cache, …

La synchronisation avec un serveur distant n’est pas toujours facile.

L’événement background-sync n’est pas toujours disponible (iOS) ni fiable (parfois background-sync ne se déclenche pas, ou bien il épuise les 3 tentatives sans atteindre le serveur).

// pseudo code
try { 
    <DB handler>::insert('myDB', myData);
} catch (UniqueConstraintViolationException $e) {
   // retouner un état significatif pour pouvoir mettre à jour le syncState coté client 
    retun ['errorContent' => [ 
      'myObject' => [
        'uuid' => $myObject->uuid(),
        'msg' => 'Duplicate myObject'
      ]]];
}

Vous aurez besoin d’indexedDB pour stocker vos données.

Réfléchissez bien lorsque vous créez un objet Store

L’exceptionnalisme d’iOS

iOS Safari présente certaine bizarreries … intéressantes

function blobToArrayBuffer(blob)
{
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.addEventListener('loadend', (e) => {
            resolve(reader.result);
        });
    reader.addEventListener('error', reject);
    reader.readAsArrayBuffer(blob);
    });
}

Soignez particulièrement l’UI

Autres trucs pénibles

Les constructeurs de téléphones portables ont la fâcheuse habitude de ne pas permettre à l’utilisateur de paramétrer le poids de la photo prise.
Il n’est pas rare qu’une photo pèse environ 9-10Mo.
Bonne chance pour le téléchargement de ce monstre sur une connexion vacillante.
Et le redimensionnement côté client est juste… une tâche qui demande beaucoup de resource :/ Voir le vidage de la batterie ci-dessus.

Voilà, vous en savez assez pour aller construire des PWA extraordianires !