L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Une introduction pratique aux applications Web progressistes
Dans cette série, nous avons déjà couvert les bases des PWA, y compris les manifestes d'applications et les travailleurs des services. Ici, nous aborderons devtools, et je partagerai aussi des ressources utiles.
En tant qu'écrivain "professionnel" (si je suis payé pour écrire, je peux dire ça, non?) Je voudrais faire comme si chaque mot écrit a été soigneusement planifié et conduit par un contour joliment détaillé. Malheureusement, ce n'est pas exactement la vérité. Je fais un contour de mon travail (parfois) et je suis un «plan», mais bien sûr, lorsque les mots frappent le papier (ou dans ce cas, le clavier), les choses changent. Quand j'ai commencé cette série j'avais initialement prévu quatre articles. Maintenant que je travaille sur le quatrième, je réalise que j'en ai plus que je veux explorer et partager. Donc, bien que ce soit le dernier article de la série, ne vous inquiétez pas – plus est en route.
Au cours des trois derniers articles j'ai couvert les bases de PWAs en mettant l'accent sur app manifeste et soutien hors ligne avec les travailleurs de service . Dans cet article, je vais couvrir le support de devtools et ensuite partager des ressources qui, je pense, seront particulièrement utiles. Comme toujours, je vis pour vos commentaires, alors s'il vous plaît donnez-moi vos commentaires dans la section des commentaires ci-dessous.
Avant de commencer, n'oubliez pas que devtools change rapidement, surtout quand il s'agit de travailler avec des PVA. Je vais couvrir l'outillage pour la version actuelle de Chrome 65 et Firefox 58. Plus tôt quand j'ai commencé à apprendre les PWAs, j'ai également utilisé la version Canary de Chrome, car j'ai remarqué un peu de bugginess avec Chrome à cette époque . Firefox a également une version développeur qui peut être utile aussi. Commençons par Chrome
Chrome et PWA Tooling
Avec devtools open, vous voulez sélectionner l'onglet Application. Chrome vous permet de réorganiser les onglets (le saviez-vous?) Afin qu'il ne se trouve pas dans une position particulière. Pour mes tests, j'ai chargé le PWA disponible dans l'article précédent . Une fois sélectionné, vous verrez un certain nombre d'éléments sur le côté gauche. La valeur par défaut doit être la première, Manifest
Malheureusement, ce lien donne une erreur à la fois. Donc, si vous corrigez un problème et réessayez, vous risquez d'obtenir une toute nouvelle erreur lorsque vous réessayez. Je souhaite que Chrome liste simplement tout ce qui est incomplet . Et rappelez-vous: une erreur ici et non signifie que l'utilisateur ne peut pas l'installer manuellement sur son écran d'accueil. Ensuite, il y a le panneau Service Workers: Notez également "Travailleurs de services d'autres domaines." Si vous ouvrez cela, vous pouvez voir chaque travailleur de service qu'un site a installé. Il s'agit d'un moyen [1999020] incroyablement puissant de voir comment les gens utilisent les techniciens de service et d'apprendre de leurs exemples. Pour la plupart, les autres éléments de ce devtool ne sont pas spécifiques aux PWA (par exemple , Le stockage local existe depuis des années). Toutefois, si vous effectuez une mise en cache, vous pouvez voir les occupants actuels du cache sous le lien Stockage du cache. Firefox, en particulier depuis Quantum, est un navigateur incroyable, en fait, c'est maintenant mon navigateur principal. il prend en charge à la fois les manifestes et les techniciens de maintenance, l'outillage est minime.Vous n'obtenez aucun support pour les manifestes et aucun (intégré) pour les techniciens de service.Vous obtenez l'inspection du cache sous l'onglet Stockage: Maintenant, je vais o Envelopper cette série avec une liste de ressources. Pas n'importe quelle liste – mais la meilleure liste absolue de ressources PWA que vous pourrez lire. Période. (Ok, peut-être pas.) Comme vous pouvez probablement l'imaginer, il y a beaucoup d'articles sur Internet qui traitent des PVA. Enfin, jetez un coup d'œil à ce site de PWA Stats . Ceci est un site de petits "factoids" sur les avantages que divers sites ont obtenus en adoptant les caractéristiques de PWA. C'est un excellent moyen de "vendre" le développement de PWA à la direction. A titre d'exemple: "Le PWA de Forbes se charge en 2,5 secondes sur mobile contre 6,5 secondes pour son site précédent, les impressions par visite sont en hausse de 10%." Alors ouais … que dire de cette petite entreprise de fruits à Cupertino? Tout d'abord, la bonne nouvelle est qu'Apple est officiellement en train de soutenir les PWA. Je ne vais pas en dire beaucoup plus à ce sujet, sauf pour vous signaler l'excellent article Maximiliano Firtman a écrit sur Il est en train de le mettre à jour après chaque sortie de la version en cours de développement d'iOS, donc vous voudrez le mettre en signet et le renvoyer souvent. Donc, ceci termine ma petite série sur les PWA et moi Comme je l'ai dit en haut, je prévois d'écrire plus, et comme tout le monde, j'ai toujours Il y a beaucoup à apprendre. Ayant été au début du web, je continue à être excité par ce qui est possible et ce qui arrive bientôt
Le site ne peut pas être installé: une icône PNG de 144 pixels est requise,
mais aucune icône fournie ne répond à cette exigence http: // localhost: 3333 J'ai tendance à oublier que je testais un worker et serais surpris quand un projet web montre des fichiers complètement différents de ce que j'attendais.Le coupable est généralement un travailleur de service qui charge à partir du cache avant de vérifier le réseau.Pour résoudre ce problème, je lance mon devtools, frappé unre Gister, et recharger la page. Firefox et PWA Tooling Les meilleures ressources Construire Progressive Web Apps de Mozilla [19459007LesdocumentsWebMDNsontlameilleureressourcepourtoutcequiconcerneleWebetleursguidesetréférencessurlesPWAnefontpasexception Progressive Web Apps Pouvons-nous parler de la pomme dans la pièce? The End?
Les commentaires sont désactivés en mode aperçu.
Source link