Une introduction aux applications Web progressives
La plupart des développeurs ont au moins entendu des rumeurs Applications Web progressives. Celles-ci sont largement prises en charge par des entreprises de technologie telles que Google et deviennent rapidement le norme pour les applications Web multi-périphériques.
Mais, quelle est exactement la différence entre un typique et un progressive application web?
Pour les développeurs, c'est un monde de différence. Les applications Web progressives utilisent des API Web modernes pour créer des expériences d'applications natives dans le navigateur. Cela signifie que les développeurs peuvent créer des applications dynamiques à chargement rapide sans utiliser de framework hybride..
Dans ce guide, je couvrirai la bases des applications Web progressives, quelques fonctionnalités principales, et comment vous pouvez commencer à construire votre propre.
Que sont les applications Web progressives??
Applications Web progressives (ou PWA) tirer parti des API de navigateur Web créer des expériences d'applications natives directement dans le navigateur de tout appareil.
Au final, les applications Web progressives englobent un poignée de technologies que les développeurs peuvent utiliser pour créer de puissantes applications de type natif. Beaucoup viennent de API Web comme le API Service Workers ou la API Push.
Il y a pas mal d'exigences d'appeler quelque chose un PWA, mais ce sont les les plus importants:
- Est pleinement mobile responsive.
- Adhère à amélioration progressive.
- Capable de installer localement sur smartphones et tablettes.
- Fonctionne hors ligne sans Internet, en utilisant des travailleurs de service.
- Sépare le contenu de la fonctionnalité en utilisant le shell de l'application.
- Construit sur HTTPS pour plus de sécurité.
- Découvrable dans la recherche Google.
- A pages dynamiques mais chacun encore a sa propre URL.
Si vous êtes penser à construire une petite application web vous pouvez plutôt essayer de créer une application Web progressive. Cela vient avec un peu de courbe d'apprentissage, mais vous avez tellement plus de contrôle sur l'expérience utilisateur Par conséquent.
Intéressons-nous aux principes fondamentaux des applications Web progressives et découvrez ce qui les motive.
Travailleurs de service
Chaque application Web progressive a besoin de travailleurs de service. Ceux-ci sont comme les agents de la circulation qui coordonne le trafic, les données, et comment tout est organisé et mis en cache.
En termes simples, le technicien fonctionne comme un fichier JavaScript et s'exécute en arrière-plan de votre application Web. Chaque fois que l'utilisateur effectue un événement, il appelle le script de travailleur de service extraire des données, sauvegarder des données, ou les deux!
En utilisant le API Service Worker est essentiel pour exécuter un PWA pris en charge hors connexion. C'est comme ça transmettre des données entre les vues et comment tu peux demander des données à partir d'une base de données locale. Mais, ce sont surtout des choses avancées que vous apprenez en travaillant sur un projet PWA.
Jetez un coup d'oeil au Livre de cuisine des travailleurs de service pour extraits de base et démos en direct. C’est un moyen fantastique d’apprendre en étudiant ce que d’autres ont fait et cloner cela dans vos propres applications.
Si vous espérez créer une application Web progressive commencer par l'API Service Worker. Juste bricoler et mettre en place une simple démonstration localement. Cela jettera les bases pour plus tard création de fonctionnalités et de pages d'application personnalisées que tous passent par les travailleurs des services.
Pour guides pour débutants et extraits de code détaillés, Je recommande spécifiquement ces ressources:
- Débuter avec les travailleurs du service
- Débuter avec les travailleurs du service
- Exemple de travailleur de service: Exemple de page hors ligne personnalisée
Le shell de l'application
La plupart des applications natives suivre une architecture de shell d'application où le code de données et d'application est complètement séparé de l'interface utilisateur. Le shell d'application peut être mis en cache localement donc chaque page se charge incroyablement vite.
Cela reste avec le même “application native” sentir où le l'interface reste toujours visible mais le le contenu / les fonctionnalités se chargent différemment chaque fois. Consultez cette page sur le site des développeurs Google pour en savoir un peu plus sur la modèle de shell d'application.
La plupart des applications ont un shell d'application très simple et vous devriez concevoir votre architecture avec la simplicité à l'esprit.
En règle générale, le shell de l'application a ces éléments principaux:
- Liens de la barre de navigation supérieure.
- Bouton Actualiser (facultatif).
- Conteneur de fond de page.
Vous pouvez trouver ici une belle étude de cas sur Architecture de shell de l'application Web progressive I / O de Google. Ils offrent également des conseils pour construire votre propre architecture de shell, la mettre en cache et en tirant automatiquement pour chaque page.
Pensez à l'architecture du shell comme tous les éléments d'interface utilisateur statique vous utiliserez sur chaque page. Ceux-ci devraient être séparé du reste de votre code et mis en cache pour une réutilisation facile. Également vérifier L'intro de Google au sujet avec beaucoup de code extraits pour vous aider à démarrer.
Support en ligne et hors ligne
La plupart des applications natives fonctionne bien sans Internet. Les applications Web progressives sont conçues pour suivre le même comportement.
Grâce aux travailleurs du service, vous pouvez construire des caches locales avec le code JSON pour chaque page. De cette façon, les utilisateurs peuvent parcourir votre application Web localement. Vous pourriez aussi inclure un fichier manifeste définir vos icônes, votre écran de démarrage et d’autres paramètres de lancement.
Si vous utilisez l'API Service Worker, jetez un coup d'œil à la API de cache lequel est partie du même cadre. C'est généralement le meilleur moyen de stocker les données localement et y accéder des travailleurs du service plus tard.
Vous pouvez également tester n'importe quelle application web en utilisant Phare, un outil gratuit pour vérifier la conformité des fonctionnalités et la prise en charge des technologies PWA.
Les PVA toujours nécessite un support hors ligne via l'API Service Worker, afin qu'ils puissent travailler dans des états de faible connectivité. Lighthouse est le meilleur moyen de tester le support hors ligne avec de nombreuses autres fonctionnalités..
Exemples vivants
Étudier les PWA en direct et voir comment ils fonctionnent est un excellent moyen d’apprendre. Cependant, le marché des applications Web progressives est toujours en train d'émerger, tant des meilleurs sont dispersés dans divers coins de l'Internet.
Mais, grâce au Galerie de roches PWA, J'ai préparé quelques exemples étonnants pour montrer ce que les PWA peuvent vraiment faire.
1. Convertisseur de devises
C'est assez simple convertisseur de devises prend les taux de change et calcule le courant différences entre une tonne de devises dans le monde.
Vous remarquerez que cette application Web est entièrement réactif, prend en charge le toucher, et mises à jour automatiques sans aucune actualisation de page.
Ce ne sont que quelques-unes des fonctionnalités que vous attendez de tout Web App progressive typique. Ce l'application peut également être enregistrée localement sur votre téléphone pour travailler hors connexion, bien qu'il se connecte à un fichier JSON pour vérifier les taux de change actuels.
2. Accents anglais
J'adore cette application Web, car elle est à la fois unique et incroyablement bien conçue. le Carte des accents anglais organise des vidéos en ligne où les gens portent des accents de certaines régions des États-Unis et du Royaume-Uni.
En cliquant n'importe où sur la carte, vous pouvez écouter comment les gens prononcent certains mots dans différentes parties du monde. L'application est rapide comme l'éclair et c'est code source ouvert sur GitHub pour quiconque de vérifier.
Les internes fonctionnent sur Réagir / Redux avec Base de feu Et un Connexion API à Google Maps. Certainement un excellent exemple de quelque chose d'assez simple pour les débutants à étudier et à apprendre.
3. Pokedex.org
Un autre PWA assez simple est-ce Application Pokedex créé par Nolan Lawson. Il a également publié ce code librement sur GitHub, donc nous encore un autre projet qui est vaut la peine de fouiner et d'étudier.
Puisque ces données peuvent rester statiques, il est géré par un moteur local appelé PouchDB. Toutes les données proviennent de PokeAPI et sont ensuite enregistrées au format JavaScript. Cela signifie que vous pouvez enregistrez-le localement sur votre téléphone comme une véritable application native et elle fonctionnera avec ou sans accès à Internet. Assez cool, droit?
Le tout est alimenté par JavaScript, c'est donc un témoignage de tout ce que vous pouvez faire avec du code frontal. Il utilise beaucoup de cache avec l'API Service Worker, donc c'est fou rapide et super facile à utiliser.
4. Flipkart
Enfin et de manière surprenante, voyons le Site Flipkart. Ce plein La boutique en ligne est en fait une application Web progressive.
Ses entièrement réactif et charge les pages dynamiquement. Les URL de page sont ajoutées au navigateur afin que vous puissiez les copier / coller et les partager comme un site Web classique..
C'est facilement le PWA le plus complexe que j'ai jamais vu. Je suis étonné que les développeurs aient pu créer une expérience transparente sur le Web pour tous les utilisateurs, sans parler de prise en charge du stockage local hors ligne, aussi.
Et, alors que je ne pouvais pas trouver de repo pour la totalité du code source Flipkart, il y a un Page Flipkart sur GitHub avec extraits de code plus petits de leur équipe de développeurs.
Apprendre plus
Les applications Web progressives sont incroyablement populaire et va sûrement gagner de la vapeur alors que de plus en plus de développeurs passent d'applications natives / hybrides.
Il y a un sommet annuel appelé le Sommet progressif des applications Web et ils publient des vidéos sur YouTube que vous pouvez regarder gratuitement. C'est un excellent moyen de ramasser des connaissances professionnelles sans payer un billet.
Mais si vous recherchez des informations plus détaillées Guides de codage PWA certainement consulter ces tutoriels:
- Guide du débutant pour les applications Web progressives
- Construisez votre première application Web progressive avec React
- Création d'une application Web progressive avec Polymer
