Découvrez comment ZDF a créé une progressive web app (PWA) avec des fonctionnalités modernes telles que le mode hors connexion, l'installabilité et le mode sombre.
Lorsque le diffuseur ZDF envisage de repenser sa technologie d'interface elle a décidé d'étudier de plus près les progressive web apps pour son de streaming ZDFmediathek. Agence de développement Mobile a relevé le défi de créer un réseau une expérience équivalente à celle des applications iOS et Android propres à ZDF. La Les PWA offrent une facilité d'installation, la lecture de vidéos hors connexion, des animations de transition et un mode sombre.
Ajouter un service worker
L'une des principales fonctionnalités d'une PWA est sa compatibilité hors connexion. Pour la ZDF, la majeure partie du travail est effectuée Workbox, un ensemble de bibliothèques et des modules Node pour faciliter l'application de différentes stratégies de mise en cache. La La PWA ZDF est conçue avec TypeScript et React. Elle utilise donc la bibliothèque Workbox. déjà intégré à create-react-app pour mettre en cache les éléments statiques. Cela permet à l'application de se concentrer sur la création du contenu disponible hors connexion, ici les vidéos et leurs métadonnées.
L'idée de base est assez simple: récupérer la vidéo et la stocker sous forme de blob dans Base de données indexée. Pendant la lecture, écoutez les événements en ligne ou hors connexion, et passez aux la version téléchargée lorsque l'appareil est hors connexion.
Malheureusement, les choses se sont avérées un peu plus complexes. L’un des projets a été d'utiliser le lecteur Web officiel de la ZDF, qui ne fournit hors connexion. Le lecteur prend un identifiant de contenu en entrée, communique avec l'API ZDF, et lit la vidéo associée.
C'est là que l'une des fonctionnalités les plus puissantes du Web vient à la rescousse: service workers.
Le service worker peut intercepter les différentes requêtes effectuées par le joueur et avec les données de IndexedDB. Cela ajoute de façon transparente sans avoir à modifier une seule ligne du code du joueur.
Les vidéos hors connexion sont généralement volumineuses. Il est donc essentiel de déterminer leur nombre peut être stocké sur un appareil. À l'aide de la classe StorageManager API pour laquelle l'application peut estimer l'espace disponible et informer l'utilisateur que l'espace est insuffisant avant même pour lancer le téléchargement. Malheureusement, Safari ne figure pas dans la liste des navigateurs et implémenté cette API. Au moment de la rédaction de ce document, les mises à jour des informations sur l'application des quotas par les autres navigateurs. Par conséquent, l'équipe a rédigé un petit utilitaire pour tester le comportement divers appareils. Vous disposez désormais d'un guide un article qui résume tous les plus de détails.
Ajouter une invite d'installation personnalisée
La PWA ZDF propose un flux d'installation personnalisé dans l'application et invite les utilisateurs à installent l'application dès qu'ils veulent télécharger leur première vidéo. Il s'agit d'un au bon moment pour inviter l'utilisateur à installer l'application, car l'utilisateur a clairement exprimé son intention de utiliser l'application hors connexion.
Créer une page hors connexion pour accéder aux téléchargements
Lorsque l'appareil n'est pas connecté à Internet et que l'utilisateur accède à un une page qui n'est pas disponible en mode hors connexion, une page spéciale s'affiche à la place. répertorie toutes les vidéos qui ont déjà été téléchargées ou (si aucun contenu n'a avez déjà été téléchargée), une brève explication de la fonctionnalité hors connexion.
Utiliser la fréquence de chargement d'images pour les fonctionnalités adaptatives
Pour offrir une expérience utilisateur riche, la PWA ZDF inclut quelques transitions subtiles
qui se produisent lorsque l'utilisateur
fait défiler l'écran ou navigue. Sur les appareils bas de gamme tels que
les animations ont généralement l'effet inverse
et rendent l'application lent et
moins réactives s'ils ne s'exécutent pas
à 60 images par seconde. Pour intégrer
l'application mesure la fréquence d'images réelle via requestAnimationFrame(), tandis que
l'application charge et désactive toutes les animations lorsque la valeur passe en dessous d'une
un certain seuil.
const frameRate = new Promise(resolve => {
let lastTick;
const samples = [];
function measure() {
const tick = Date.now();
if (lastTick) samples.push(tick - lastTick);
lastTick = tick;
if (samples.length < 20) requestAnimationFrame(measure);
else {
const avg = samples.reduce((a, b) => a + b) / samples.length;
const fps = 1000 / avg;
resolve(fps);
}
}
measure();
});
Même si cette mesure ne donne qu'une indication approximative de l'état et varie en fonction de la charge, il s'agissait toujours d'une bonne base pour la prise de décision. Notez que selon le cas d'utilisation, d'autres techniques de chargement adaptatif que les développeurs peuvent implémenter. L'un des grands avantages de cette approche est disponible sur toutes les plates-formes.
Mode sombre
Une fonctionnalité populaire dans les expériences mobiles modernes est mode sombre. Surtout lorsque lorsque l'éclairage ambiant est faible, de nombreuses personnes préfèrent avoir une interface utilisateur atténuée. La PWA ZDF fournit non seulement un interrupteur qui permet aux utilisateurs de basculer entre une lumière et un le thème sombre, il réagit également aux changements des préférences de couleur de l'OS. Par ici l'application change automatiquement d'apparence sur les appareils disposant d'un pour modifier le thème en fonction de l'heure de la journée.
Résultats
La nouvelle progressive web app a été lancée silencieusement en tant que version bêta publique en mars 2020 et a reçu de nombreux commentaires positifs depuis. Bien que la phase bêta continue, la PWA s’exécute toujours sous son propre domaine temporaire. Même si Les PWA n'ont pas fait l'objet d'une promotion publique. Le nombre d'utilisateurs augmente régulièrement. Beaucoup proviennent du Microsoft Store, qui permet aux utilisateurs de Windows 10 les PWA et les installent comme des applications spécifiques à une plate-forme.
Étape suivante
ZDF prévoit de continuer à ajouter des fonctionnalités à sa PWA, y compris la connexion à la personnalisation, l'affichage multi-appareil et multi-plateforme, et les notifications push.