9 secrets PWA incroyables

Applications Web progressives (PWA) sont une nouvelle frontière site Web adaptatif , et ils gagnent en popularité. La prise en charge de PWA a commencé avec Chrome sur Android et est désormais disponible sur la plupart des autres navigateurs Android, tels que Opera, Firefox, Samsung Internet et UCWeb, ainsi que sur les iPhones et iPads d'iOS 11.3 et Edge pour Windows et Chrome sur les systèmes d'exploitation de bureau.

Pour vous aider à créer un bien expérience utilisateur pour ce public croissant, nous allons partager quelques astuces et idées vitales. Pour plus de conseils, consultez notre article sur comment créer une application .

01. Raccourci WebAPK vs Android

En 2017, Chrome a déployé une nouvelle fonctionnalité pour les utilisateurs d'Android: WebAPK. Désormais, lorsque vos utilisateurs installent votre PWA (si elle répond aux exigences), un serveur Google Play crée un APK (package Android, un conteneur d'application native) à la volée et l'installe dans l'appareil comme s'il provenait du Play Store . Votre utilisateur n'a pas besoin d'activer les sources non sécurisées ni de toucher à d'autres paramètres.



Lorsque le PWA est installé, il apparaîtra dans l'écran d'accueil, dans le lanceur d'applications, dans Paramètres et comme toute autre application citoyenne de première classe dans le système d'exploitation, y compris des informations sur la batterie et l'espace utilisé dans le système.

Si votre PWA ne répond pas à toutes les exigences, que le service Play est en panne, qu'il y a un problème de connexion ou qu'un autre navigateur Android tel que Firefox ou Samsung Internet est utilisé, un raccourci standard vers l'écran d'accueil sera créé. Cette icône sera de la marque du navigateur Android 8+.

WebAPK permet également une fonctionnalité intéressante mais dangereuse dont vous devez être conscient: la PWA possédera le domaine et le chemin dans les limites du système d'exploitation Android. En fonction de l'attribut scope de votre manifeste d'application Web, chaque lien que l'utilisateur reçoit vers cette étendue sera transféré vers votre application plein écran et non vers le navigateur, ce qui signifie que vous devez faire attention aux URL que vous utilisez.

Disons que vous avez une PWA au service des utilisateurs mobiles et qu'elle se trouve dans le dossier racine de votre domaine. Lorsque l'application est installée via WebAPK, l'ensemble du domaine appartient désormais à la PWA. Si vous avez une enquête à / enquête que vous partagez via Facebook, ou un PDF avec des termes et conditions que vous envoyez par e-mail à vos utilisateurs à /terms.pdf, le système d'exploitation ouvrira PWA et non le navigateur lorsque vous cliquez sur ces liens. Il est essentiel de vérifier si votre système de routage PWA connaît ces URL et comment les servir et, si ce n'est pas le cas, de les ouvrir dans un navigateur sur une portée différente.

02. Créer une bannière d'installation d'application Web personnalisée

Nous pouvons

Nous ne pouvons pas personnaliser la bannière d'installation d'une application Web d'un navigateur, mais nous pouvons les différer après avoir montré plus d'informations à l'utilisateur

Plusieurs navigateurs invitent l'utilisateur à installer votre PWA si certaines conditions sont remplies, y compris les visites récurrentes de cet utilisateur pour votre PWA. Pour le moment, la bannière n'inclut pas suffisamment d'informations sur les raisons pour lesquelles un utilisateur devrait accepter. Cependant, nous pouvons utiliser des événements pour éviter la bannière et, plus important encore, pour la différer pour quelque chose de plus susceptible de générer une acceptation, comme une icône d'installation.

La première étape consiste à annuler l'apparence de la bannière et à enregistrer l'objet événement pour une utilisation ultérieure:

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

L'étape suivante consiste à fournir une interface utilisateur pour expliquer les avantages de l'installation, ou un bouton Installer. Cette interface utilisateur appellera notre prochaine fonction:

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

03. Partagez le contenu de votre PWA

Sur les navigateurs compatibles, l

Sur les navigateurs compatibles, l'API Web Share déclenchera la boîte de dialogue de partage bien connue à partir du système d'exploitation

Lorsque votre PWA est en mode plein écran, il n'y a pas de barre d'URL ou d'action Partager du navigateur pour que l'utilisateur puisse partager du contenu avec les réseaux sociaux. Nous pouvons tirer parti de l'API Web Share et proposer une solution de secours pour ouvrir des applications sociales natives.

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. Suivi analytique

Lorsque vous avez une PWA, vous voudrez suivre autant d'événements que possible, alors jetons un coup d'œil à tout ce que nous pouvons actuellement mesurer. Vous pouvez utiliser les API Google Analytics ou tout autre outil d'analyse pour suivre ces événements ultérieurement.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

Le prochain événement de suivi important est lorsque l'utilisateur ouvre l'application à partir de l'écran d'accueil. Cela signifie que l'utilisateur a cliqué sur l'icône de l'application ou, sur Android avec le support WebAPK, a également cliqué sur un lien pointant vers l'étendue PWA.

Pour ce faire, le moyen le plus simple consiste à utiliser l'attribut start_url du manifeste, en ajoutant un événement de suivi dans l'URL qui peut être automatiquement utilisé comme origine à partir d'un script Analytics, tel que:

start_url: '/?utm_source=standalone&utm_medium=pwa'

En outre, le script suivant nous laisse un booléen indiquant si l'utilisateur est actuellement dans un navigateur (true) ou un mode d'application autonome (false):

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

Ensuite, si vous utilisez des notifications push, vous pouvez suivre plusieurs événements dans le service worker, tels que:

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. Créez une PWA iOS compatible

Lorsque vous effectuez des PWA sur iOS, assurez-vous toujours de vérifier la définition de votre barre d

Lorsque vous effectuez des PWA sur iOS, assurez-vous toujours de vérifier la définition de votre barre d'état, ce qui créera différentes expériences de barre d'état

Alors que beaucoup pensent que le support PWA est sur le point d'arriver pour la première fois sur iOS 11.3, la vérité est que le concept - bien qu'avec un nom différent - a été présenté par Steve Jobs il y a plus de dix ans à la WWDC 07. C'est pourquoi l'écran d'accueil pris en charge par iOS et des applications hors ligne pendant un certain temps, en utilisant des techniques traditionnelles. Mais à partir d'iOS 11.3, il commencera à prendre en charge les mêmes spécifications qu'Android.

Si vous souhaitez toujours offrir une expérience d'installation avant iOS 11.3, vous devez ajouter des balises meta ou utiliser un polyfill créé par cet auteur sur https://github.com/firtman/iWAM

Désormais, votre PWA sera compatible hors ligne et installable sur iOS même si vous n'activez pas iOS. Il est important de comprendre certaines différences qui pourraient affecter votre expérience utilisateur PWA sur iOS:

  1. Les icônes sur iOS doivent être carrées et non transparentes pour éviter les problèmes d'interface utilisateur. N'utilisez pas la même icône que vous avez sur Android. Utilisez 120x120 et 180x180 pour les iPhones.
  2. Si vous avez un SPA ou que vous créez un lien vers d'autres pages de votre étendue, soyez prudent avec la navigation, car les utilisateurs iOS n'ont pas de moyen de revenir en arrière ou de avancer si vous ne fournissez pas de liens de navigation dans votre interface utilisateur. Les gestes de balayage ne fonctionnent pas sur les PWA plein écran.
  3. À partir des premières versions d'iOS 11.3, le système d'exploitation recharge les PWA à chaque accès à l'application, donc si l'utilisateur doit sortir de l'application pour revenir plus tard (par exemple, pour un processus d'authentification bidirectionnelle), souvenez-vous de votre l'application démarrera à partir de zéro par défaut.

06. Synchronisation des données en arrière-plan

Les techniciens de service ont un cycle de vie distinct de la fenêtre PWA ou de l'onglet du navigateur. C'est pourquoi vous pouvez effectuer des opérations réseau en arrière-plan, même après que l'utilisateur ferme la PWA. S'il y a une opération en attente et qu'il n'y a pas d'accès réseau disponible à ce stade, le moteur nous laissera traiter en arrière-plan si une connexion est détectée plus tard.

L'API de synchronisation en arrière-plan n'est actuellement disponible que sur certains navigateurs, vous devez donc fournir une solution de secours. L'idée est que votre PWA définira un indicateur avec une balise de chaîne, indiquant qu'il doit effectuer une opération de synchronisation en arrière-plan.

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

Ensuite, sur le ServiceWorker, nous écoutons l'événement, et si c'est l'étiquette, nous attendons de retourner une promesse. Si la promesse est remplie, l'opération est marquée comme terminée. Sinon, il continuera d'essayer plus tard en arrière-plan.

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

07. Réseaux sociaux et pseudo-navigateurs

Si vos utilisateurs partagent votre contenu PWA sur les réseaux sociaux, ou s'ils utilisent des pseudo-navigateurs (navigateurs sans leur propre moteur mais utilisant des vues Web), vous devez être conscient de certains problèmes.

Par exemple, Facebook utilise une WebView dans les applications Android et iOS pour offrir une expérience de navigation dans l'application lorsque les utilisateurs cliquent sur un lien. Sur Android, la plupart des WebViews ne prennent pas en charge les techniciens de service et ne peuvent pas installer votre PWA, donc lorsque l'utilisateur ouvre votre contenu à partir de Facebook, votre PWA agira comme s'il s'agissait d'un navigateur non compatible sans fichiers en cache ni détails de session. .

À partir d'iOS 11.3, WebView prendra en charge les techniciens de service, mais il s'agira d'un clone du même PWA que l'utilisateur a utilisé dans Safari ou même dans d'autres pseudo-navigateurs, tels que Chrome ou Firefox sur iOS.

Par conséquent, si vous affichez une bannière d'installation ou une boîte de dialogue d'indication d'installation expliquant la valeur de l'installation de votre application, vérifiez si vous vous trouvez dans une WebView car l'utilisateur ne pourra pas suivre vos étapes. Masquez ces informations ou invitez l'utilisateur à ouvrir l'URL dans le navigateur par défaut. Cela s'applique à Facebook sur Android, Facebook sur iOS, Chrome sur iOS et Firefox sur iOS, entre autres applications. Faire une vérification en direct si vous êtes sur une WebView ou non est délicat, mais il y a un outil d'aide disponible .

08. Test sur les appareils Android et les émulateurs

Le test des agents de service et du manifeste d'application Web nécessite https, à l'exception de localhost. Bien que les tests de bureau local conviennent au départ, à un moment donné, nous voulons voir nos PWA en action sur les appareils Android. Comment pouvons-nous faire cela? L'accès à un serveur de développement à partir de notre téléphone ou de notre émulateur Android ne fonctionnera pas car ce n'est pas https et ce n'est pas localhost du point de vue du système d'exploitation Android.

La solution apparaît avec les outils de développement Chrome. Si nous allons sur chrome: // inspectons et ouvrons un émulateur ou un appareil réel avec un débogage USB connecté, nous pourrons activer la redirection de port. Ensuite, http: // localhost sur notre appareil Android sera transmis à l'hôte local de notre ordinateur hôte ou à tout autre hôte. Avec cette astuce, Android rendra correctement la PWA via une connexion non sécurisée. Gardez à l'esprit, cependant, que si WebAPK créera le package et l'installera, il peut ne pas fonctionner en mode autonome.

09. Publication dans les magasins

PWA Builder est un outil en ligne Microsoft pour créer des packages PWA compatibles avec le magasin pour Windows 10 et d

PWA Builder est un outil en ligne Microsoft pour créer des packages PWA compatibles avec le magasin pour Windows 10 et d'autres systèmes d'exploitation

Bien que l'approche PWA n'ait pas commencé avec les magasins à l'esprit, certaines offres, y compris Twitter Lite et Google Maps Go dans le Play Store, ont commencé à servir des PWA dans les magasins. Si cela vous intéresse, pour distribuer votre PWA sans l'empaqueter avec Cordova, vos options disponibles sont:

  • Microsoft Store: vous pouvez créer une PWA pour Windows 10 à l'aide de l'outil officiel de pwabuilder.com
  • Google Play Store: au moment de la rédaction de cet article, les activités Web de confiance disponibles sur Canary Channel vous permettent de créer une application Android qui ouvre simplement une PWA que vous possédez et la distribue dans le Store, créant une solution similaire à WebAPK. Vous pouvez en savoir plus ici .
  • Apple App Store: Il n'existe actuellement aucune solution officielle pour distribuer des PWA, mais WKWebView prendra en charge les techniciens de service d'iOS 11.3, il ne sera donc pas difficile de créer un simple wrapper pour une PWA. La question est de savoir si Apple l'approuvera dans le Store? Apple ne veut pas de solutions qui ne soient que des sites Web avec un wrapper.

Cet article a été initialement publié dans le numéro 304 de rapporter , le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Achetez le numéro 304 ici ou abonnez-vous ici .

Articles Liés: