L’ application Web avancée PWA ( web progressive app ) est très simple, une combinaison d’une page Web standard et d’une application mobile Moble App  . Un PWA combine les nouvelles capacités des navigateurs Internet tels que Google Chrome avec l’ expérience utilisateur mobile Mobile User Expérience . L’application Web avancée est écrite à l’aide de technologies Web courantes telles que HTML5 , CSS et JavaScript, comme tout autre site Web.
Caractéristiques d’une PWA par rapport à une page Web standard:

  • Travailler hors ligne en mode hors ligne sans connexion Internet
  • Les notifications push push notification ou envoyer une notification à l’utilisateur
  • Accès au matériel de l’appareil Accédez aux fonctionnalités du matériel mobile comme l’appareil photo ou le GPS
  • Ajouter l’icône de l’application sur l’ écran mobile de l’ écran d’ accueil vers l’écran d’accueil

applications Web progressive Web Application progressive Comment pourrions – nous ajouter à notre site? Comment le mettons-nous en œuvre? Est-ce un travail difficile? Mon site peut-il obtenir 100 verts dans l’analyse PWA de Google?

Prérequis pour l’étude
Tout d’abord, je veux avoir un examen afin que nous sachions exactement quelles sont les applications Web à venir et pourquoi elles sont si attrayantes.

Prérequis: l’application PWA nécessite un certificat sur le serveur hôte de l’application(HTPPS)

L’application Web avancée est un type d’application Web qui possède certaines fonctionnalités d’une application mobile telles que l’accès à la caméra et à l’emplacement, l’envoi de notifications push et l’ajout d’icônes à l’ écran d’accueil , etc. Il est dit que notre logiciel basé sur le Web a les fonctionnalités de App-Like ou similaire à l’application mobile.

Il est une application web via un fichier JavaScript appelé service des travailleurs service des travailleurs dans une série d’onglet traitement indépendant du navigateur actuel a été échoué, une connexion non synchrone asynchrone serveur a été créé.

En d’autres termes, le service Verker permet à notre application Web PWA ( web progressive app ) de faire glisser le contenu de la page avant de charger et d’envoyer le contenu local au serveur immédiatement après la reconnexion à Internet après la déconnexion. De plus, une partie de l’interaction du logiciel avec l’utilisateur peut se faire hors ligne. Ce n’est pas le cas avec les applications Web classiques.

Pourquoi dois-je immigrer à PWA ( web progressive app )?

Si vous n’êtes toujours pas convaincu de la migration vers PWA, laissez-moi faire de mon mieux. Peut-être que ces dernières phrases seront efficaces et que vous déciderez de migrer du site Web actuel vers la version avancée de l’application Web PWA , ou vous pouvez commencer à travailler et lancer votre propre application Web progressive.

Vitesse de chargement des pages Web! Parce que PWA est hors ligne, vous pouvez augmenter la vitesse de chargement de vos pages beaucoup plus qu’auparavant. Vous pouvez offrir à votre application mobile une vitesse proche de celle de votre application mobile. Les utilisateurs sont étonnés et c’est merveilleux. Cela rend le temps passé sur le site beaucoup plus long. Lorsque les utilisateurs passent plus de temps en moyenne, ils sont plus susceptibles d’acheter sur le site. Cela signifie de l’argent $$$. Eh bien, maintenant je suis sûr que vous êtes convaincu. Commençons donc…

Shell réactif pour le site, configuration requise pour PWA ( web progressive app )

Avoir un site Web réactif est une condition préalable, donc je suis sûr que beaucoup d’entre vous y répondront. Si vous n’avez pas encore de site Web réactif, vous êtes loin derrière.

C’est une bonne idée de commencer et d’essayer de développer un Shell réactif avec un cadre d’interface UI Framework bien connu comme Bootstrap . Si vous ne disposez pas d’un tel Shell, contactez mes collègues pour vous guider et vous dire comment vous pouvez avoir un Shell responsive standard pour votre site.

Pour commencer, créez un manifeste d’application ( web progressive app )

Les fichiers manifestes ont une histoire relativement longue. Ces fichiers, au format JSON, fournissent des informations sur le package ou le logiciel et ne sont pas limités à PWA. Dans la plupart des systèmes de gestion de logiciels et de gestion des dépendances, tels que composer, npm et…, vous pouvez voir la structure des fichiers manifestes. Ici, bien sûr, l’objectif principal de ce fichier est de fournir des métadonnées (informations structurées) afin de télécharger et d’installer le programme sur l’appareil de l’utilisateur.

Avant de mettre en œuvre votre fichier manifeste d’application Web, assurez-vous de vérifier la prise en charge du navigateur pour la possibilité d’introduire le fichier manifeste , ainsi que la gamme de prise en charge de différentes clés sur les navigateurs de bureau et mobiles  avec vos informations Google Analytics. Un large éventail de vos utilisateurs peuvent toujours utiliser des navigateurs plus anciens, et cela peut ne pas être un bon moyen de sortir de la mise en œuvre de PWA.

Donc, ici, nous devons jsoncréer un fichier et le placer dans le chemin principal du projet.

Astuce
Je recommande que le nom et l’extension de ce fichier manifest.webmanifestet le type de média ou MIME renvoyé au navigateur par la réponse du serveur application/manifest+json. Bien que les navigateurs prennent généralement en charge le fichier Manifesto avec des extensions jsonet des types de médias application/json, je vous recommande de ne pas l’utiliser.

Les informations que nous fournissons via le fichier sont le nom et les spécifications de l’application et du développeur et l’icône du programme et des informations telles que. Le site Web de Mozilla conserve une liste des clés du fichier manifeste mis à jour.

Exemple de fichier manifeste de manifeste ( web progressive app )

Par exemple, j’ai préparé ce fichier pour vous afin que vous puissiez remplacer et utiliser ses clés avec les valeurs appropriées:

Ces fichiers sont nécessaires clés nameet iconsles clés ou l’autre membre des fichiers JSON sont facultatifs. Notez que la clé est serviceworkerobsolète et n’est plus utilisée. Parce que vous devez enregistrer le service Walker et qu’il n’est pas nécessaire de l’adresser via un fichier manifest.webmanifest. Presque toutes les clés sont utilisées pour cette raison, aucune explication supplémentaire n’est donc nécessaire. Il n’y a que deux clés importantes que je vais expliquer. Avec la clé, start_urlvous pouvez spécifier l’adresse de début de la page Web. Cette page se charge lorsque l’utilisateur clique sur votre icône sur son écran d’accueil avant de pouvoir charger ou utiliser votre application Web. Bien sûr, ce paramètre n’est qu’une suggestion, ce qui signifie que le navigateur de l’utilisateur peut ignorer complètement ce paramètre et permettre à l’utilisateur de sélectionner une autre page comme page de démarrage. CléscopeIl identifie et distingue également la gamme PWA des pages d’applications Web normales. Si toutes les pages de votre site sont censées être PWA, définissez ce paramètre sur /value.

Ajouter un fichier manifeste au site

Maintenant que vous avez créé le fichier manifeste, vous devez l’ajouter à votre application Web pour devenir une application Web progressive. Pour ce faire, vous devez headcréer une balise de lien  :


La chose la plus importante à propos du fichier manifeste est que sa demande est envoyée au serveur sans les détails d’authentification de l’utilisateur .

Astuce
La demande de réception du fichier est envoyée manifest.webmanifestau serveur sans informations d’identification . Donc, si vous limitez l’envoi du serveur aux informations d’identification, vous devez ajouter l’ attribut crossorigin="use-credentials"à la balise link.

Ensuite, nous créons un travailleur de service

Le cœur d’une application Web est le Web Service Worker. Le service Walker, qui est un fichier JavaScript, fonctionne indépendamment de l’onglet actif du navigateur principal sur une page Web.

Astuce
Walker Service est un fichier JavaScript qui s’exécute indépendamment de l’onglet actif du navigateur principal sur une page Web. Ce fichier écoute une série d’événements spécifiques et y répond. L’un des plus importants de ces événements est l’événement fetch, qui est utilisé pour fournir du contenu Web pour un accès hors ligne.

Pour commencer, nous devons créer un service d’atelier. sw.jsCréez un fichier nommé dans le chemin principal de votre projet . Je vais vous apprendre le contenu de ce fichier ci-dessous.

Ajouter et enregistrer le fichier d’enregistrement des travailleurs de service

Voici quelques façons d’enregistrer un fichier de service Worker 2:

La première façon est de le mettre dans votre fichier app.jsoù vous écrivez les scripts des pages du site et de le mettre scriptsur la page via sa balise .


Dans ce fichier, vous app.jsdevez enregistrer votre service Web .


La deuxième façon consiste à placer l’extrait de code JavaScript suivant au bas des pages juste avant la fermeture de la balise body:


Prérequis: l’application PWA ( web progressive app ) nécessite un certificat sur le serveur hôte de l’application(HTPPS)