application web

le PWA pour fournir une expérience de type application web aux utilisateurs Web.
Résultats
● 76% de conversions en plus sur les navigateurs
● Taux d’interaction 4 fois plus élevé de l’ajout à l’écran d’accueil
● 14% d’utilisateurs actifs mensuels en plus sur iOS; 30% sur Android
Conclusion
Les application webs Web progressives ont un immense potentiel et font évoluer la scène Web mobile. Le temps décidera si les PWA reprendront ou non une application web mobile native, mais il a définitivement créé son espace sur le Web mobile. Même les tendances montrent que la communauté accepte chaleureusement ces PWA.
Tenant compte des paroles de Jeff Bezos, « En affaires, ce qui est dangereux, c’est de ne pas évoluer», il pourrait être judicieux d’accepter les modifications au bon moment pour un bénéfice maximal.

32) Tout ce que vous devez savoir sur la création d’une Progressive Web Application web.

maintenant , vous devez avoir entendu ce mot buzz appelé « Web App Progressive ». Permettez-moi de vous donner une définition simple des PWA.
Les application webs Web progressives sont des application webs Web qui combinent les meilleures fonctionnalités des application webs Web et natives. Il est progressif car il progresse constamment.
Pourquoi Progressive Web Apps?
N
oe nous allons parler de la « POURQUOI ». Pourquoi Frances Berriman et Alex Russell ont proposé un concept appelé Progressive Web Apps? Avant cela, comprenons quels problèmes cela résout-il.
Des problèmes avec les application webs natives?
Nous avons tous utilisé des application webs Android ou iOS sur nos smartphones. Nous les utilisons pour toutes sortes de choses. Mais lors de l’installation des application webs Android / iOS, nous traversons ces problèmes:
1. Est-ce que cette application web mérite d’être téléchargée ?
2. Ai-je assez d’espace ?
3. Mes données disponibles ne sont pas suffisantes .
Un récent sondage montre que les gens se détournent des application webs Android / iOS, car toutes les expériences des application webs ne sont pas satisfaisantes ou valent la peine. Certaines personnes ne veulent tout simplement plus d’application webs sur leur téléphone, d’autres hésitent même à télécharger n’importe quelle application web.
Si vous jetez un œil aux application webs installées sur votre mobile en ce moment, il peut y avoir au moins une douzaine d’application webs que vous n’utilisez pas régulièrement. Parfois, les application webs ne fonctionnent bien que lorsque le téléphone dispose d’une connexion Internet active.

L’ironie est que la plupart des application webs ont un site Web entièrement réactif remplissant les mêmes fonctions. Alors pourquoi gaspiller votre précieux espace disque et vos données Internet sur votre smartphone en installant l’application web native? La taille moyenne des application webs que nous installons à partir de Play Store / App Stores varie de 30 à 200 Mo. De plus, cette application web doit être mise à jour chaque semaine! Mais les application webs Web progressives se trouvent dans quelques Ko et sont automatiquement mises à jour. Merci au technicien. 🙂
Et si un site Web pouvait faire cela et bien plus qu’une application web native? C’est ce que les Progressive Web Apps (PWA) tentent d’accomplir.

En
bref,Application webs Web progressives combiner tout ce qui est génial sur une application web mobile native avec tout ce qui est génial sur un site Web mobile.
Quelques autres façons que j’aime les décrire:
«Le meilleur du Web et le meilleur des application webs natives»
Ou, selon les mots d’ Alex :
“Juste des sites Web qui contiennent toutes les bonnes vitamines”
Caractéristiques des PWA:

● Progressif – Le mot progressif signifie qu’il fonctionne pour chaque utilisateur, quel que soit le choix du navigateur, car ils sont conçus avec l’amélioration progressive comme principe de base.
● Adaptatif – Réglable automatiquement à n’importe quelle forme: ordinateur de bureau, mobile, tablette, etc.
● Temps de chargement – les application webs Web progressives sont disponibles instantanément
● App-like – Paraît comme une application web mobile avec des interactions de type application web car il est construit sur le modèle shell app.
● Frais – Toujours à jour pour que vous n’ayez pas besoin de le mettre à jour encore et encore comme n’importe quelle autre application web Android / iOS.
● Sûr – Servi via HTTPS pour garantir la livraison sécurisée du contenu
● Engageant – Des fonctionnalités telles que les notifications push, etc. le rendent très attrayant.
● Installable – Permet aux utilisateurs d’installer le site Web en tant qu’application web sur leur écran d’accueil sans emmener l’utilisateur dans une boutique d’application webs.
● Linkable – Facilement partagé via une URL et ne nécessite pas d’installation complexe.
Les avantages de créer une application web Web progressive plutôt que de créer une application web Android entièrement fonctionnelle?
● Rentable – Pour un éditeur d’application webs, le plus grand avantage est la réduction des coûts en termes de développement et de maintenance d’application webs. Parce qu’il est supposé que la création d’un site Web est beaucoup plus facile que la création d’une application web Android.
● Multiplateforme – Contrairement à toutes les autres application webs, les application webs Web progressives ne sont pas limitées à une plate-forme spécifique. Cela signifie que vous n’avez pas besoin de développer des versions distinctes de l’application web pour différentes plates-formes.
33) Quelques entreprises populaires qui font des application webs Web progressives
● Ola
● Flipkart
● pinterest
● Gazouillement
● Alibaba
● BookMyShow
● MakeMyTrip
● OLX
● La chaîne météo
● Forbes
● JioCinema
● Trivago
Présentation de Flipkart Lite – L’application web Web mobile progressive
Flipkart, le plus grand site de commerce électronique d’Inde, a décidé de combiner leur présence sur le Web et leur application web native dans une application web Web progressive qui a entraîné une augmentation de 70% des conversions. Le PWA de Flipkart ne prend que 100 Ko à télécharger, est 100 fois plus petit que l’application web Android de 10 Mo et 300 fois plus petit que l’application web iOS. Les visites répétées prennent moins de 10 Ko à télécharger.

Comment utiliser une application web Web progressive?
Vous vous demandez probablement comment utiliser une application web Web progressive! Eh bien, vous pouvez simplement cliquer sur les liens mentionnés ci-dessus. Mais à condition que vous deviez utiliser un téléphone intelligent pour l’installer sur votre propre appareil.
Maintenant, cliquons sur Flipkart ouvert en chrome. ( Vous devez utiliser un appareil mobile ). Vous trouverez ci-dessous quelques captures d’écran qui illustrent l’installation d’un PWA.

________________________________________
Créons maintenant une application web Web progressive:
H
avant que , je vais vous montrer comment j’ai créé une application web Web progressif pour simple blog. Vous pouvez obtenir les codes ici.Maintenant que nous avons un site Web de base, nous pouvons commencer à le transformer en une application web Web progressive. Pour ce faire, nous devons y ajouter quelques éléments que j’examinerai au fur et à mesure de nos besoins.
Test de votre PWA
Pour vérifier si votre site fonctionne en tant que PWA, vous pouvez utiliser Lighthouse . Lighthouse est une extension chromée qui vous dira si votre site est un bon PWA et si ce n’est pas comment l’améliorer.
Une fois installé, ouvrez votre site Web et cliquez sur l’icône Phare en haut à droite de votre navigateur, puis Générez un rapport.

Résultats du phare avant de commencer à travailler sur les parties PWA du site
Créer une icône d’application web
Votre site va être sur un écran d’accueil, vous avez besoin d’une sorte d’icône pour le représenter. Ici, j’ai utilisé un logo téléchargé sur Internet.

Inscrire le technicien de service
Ajoutez le service worker <script>à index.html:
Un travailleur de service est un autre fichier que nous ajoutons à notre projet, il permettra au site de fonctionner hors ligne. C’est également une exigence d’un PWA, nous en avons donc besoin.
<script>
if (‘serviceWorker’ in navigator) {
window.addEventListener (‘load’, function () {
navigator.serviceWorker.register (‘/ sw.js’). then (
function (registration) {
// L’inscription a réussi)
console.log (‘Inscription ServiceWorker réussie avec portée:’, registration.scope);},
fonction (err) {
// échec de l’inscription 🙁
console.log (‘Échec de l’inscription ServiceWorker:’, err);
});
}) ;
}
</script>
Cache les ressources statiques
Créez sw.js et ajoutez du index.htmlcache:
var cacheName = ‘pwa’;
var filesToCache = [

If you have any concerns pertaining to where and the best ways to use application web, you can contact us at the website.

‘/’,
‘/index.html’
];
self.addEventListener (‘install’, function (e) {
console.log (‘[ServiceWorker] Install’

Leave a Reply

Your email address will not be published. Required fields are marked *