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: 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.

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:

{
  "name": "Pmpr Official Web App",
  "short_name": "Pmpr",
  "description": "Web consulting, supervision & implementation services in web",
  "start_url": ".",
  "display": "standalone",
  "scope": "/",
  "dir": "rtl",
  "lang": "fa-IR",
  "background_color": "#efefef",
  "theme_color": "#376eb5",
  "orientation": "any",
  "icons": [
    {
      "src": "/img/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icon-512.png",
      "type": "image/png",
      "sizes": "256x256"
    }
  ],
  "screenshots": [
    {
      "src": "screenshot.webp",
      "sizes": "1280x720",
      "type": "image/webp"
    }
  ]
}

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  :

<head>
  <!-- Rest of document head -->
  <link rel="manifest" href="/manifest.webmanifest">
  <!-- Rest of document head -->
</head>

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 .

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.

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 .

<script src="/js/app.js"></script>

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

navigator.serviceWorker.register('../sw.js');

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:

   <!-- Rest of document -->
    <script>
      if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function(reg) {
          console.log("Service worker registered for {" + reg.scope + "} scope");
        });
      }
    </script>
  </body>
</html>

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