Application mobile: Créez une application Web progressive (PWA) avec React

Qu’est-ce qu’une application Web progressive (PWA) ?

Les applications Web progressives sont une idée merveilleuse (terriblement nommée). Vous pouvez créer une application qui dessert tous les appareils et tous les facteurs de forme une fois en utilisant les technologies Web. Il peut être accessible sur le Web mais également apparaître sur l’écran d’accueil de votre appareil Android/iOS. Cette application peut fonctionner hors ligne, afficher un écran de démarrage lors de son lancement et également recevoir des notifications.

Les PWA peuvent être une économie d’argent pour votre entreprise. L’alternative, si vous souhaitez une expérience d’application pour vos utilisateurs, consiste à créer la même application à l’aide de trois technologies différentes (une pour le Web, une pour Android et une pour iOS).

Lorsque vous prenez ce chemin, il est difficile d’éviter une multiplication des coûts et de la complexité. Cela conduit souvent à diviser l’équipe car chacun travaille sur une pile différente. Il est courant de perdre une certaine concentration en conséquence. Les PWA peuvent aider ici. Ils constituent une alternative convaincante non seulement du point de vue des développeurs, mais également du point de vue des ressources.

Cependant, l’inconvénient des PWA est qu’elles sont plus compliquées que les applications Web normales ; en écrire un à partir de zéro est tout simplement moins simple. Mais il existe des rampes d’accès faciles à la création d’une PWA qui vous guident sur la voie du succès. Cet article mettra en évidence l’un d’entre eux : comment vous pouvez passer de zéro à votre propre PWA en utilisant React et TypeScript.

Notez que ce post suppose la connaissance de :

Construire une PWA avec create-react-app

Pour créer notre PWA, nous allons utiliser create-react-app. Cet excellent projet dispose depuis longtemps d’un support intégré pour la création de PWA. Ces derniers mois, ce soutien a atteint un niveau très satisfaisant. Pour créer nous-mêmes une application TypeScript React en utilisant create-react-app, entrez ceci npx commande dans la console :

npx create-react-app pwa-react-typescript --template typescript

Cela vous crée une application Web React construite avec TypeScript. Il peut être testé localement avec :

cd pwa-react-typescript
yarn start

De l’application Web à la PWA en utilisant Workbox

De l’application Web à la PWA, c’est incroyablement simple – il s’agit simplement d’opter pour un comportement hors ligne. Si vous ouvrez le index.tsx fichier dans votre projet nouvellement créé, vous trouverez ce code :

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Comme le suggère l’indice, échangez serviceWorker.unregister() pour serviceWorker.register() et vous avez maintenant un PWA. Incroyable! Qu’est-ce que ça veut dire? Bon, pour citer la doc :

  • Tous les actifs statiques du site sont mis en cache afin que votre page se charge rapidement lors des visites suivantes, quelle que soit la connectivité réseau (telle que 2G ou 3G). Les mises à jour sont téléchargées en arrière-plan.
  • Votre application fonctionnera quel que soit l’état du réseau, même hors ligne. Cela signifie que vos utilisateurs pourront utiliser votre application à 10 000 pieds et dans le métro.

… Il se chargera de générer un fichier de service worker qui mettra automatiquement en cache tous vos actifs locaux et les maintiendra à jour lors du déploiement des mises à jour. Le service worker utilisera une stratégie de mise en cache pour gérer toutes les demandes d’actifs locaux, y compris les demandes de navigation pour votre code HTML, garantissant que votre application Web est toujours rapide, même sur un réseau lent ou peu fiable.

Sous le capot, create-react-app y parvient grâce à l’utilisation de la technologie appelée Workbox. Workbox se décrit comme « un ensemble de bibliothèques et de modules Node qui facilitent la mise en cache des ressources et tirent pleinement parti des fonctionnalités utilisées pour créer des applications Web progressives ».

Les bons gars de Google sont conscients qu’écrire votre propre PWA peut être délicat. Il y a beaucoup de nouveaux comportements à configurer et à connaître ; il est facile de faire des erreurs. Workbox est là pour faciliter la voie à suivre en implémentant des stratégies par défaut pour le comportement de mise en cache/hors ligne, qui peuvent être contrôlés via la configuration.

Un inconvénient de l’utilisation de Workbox dans create-react-app est-ce que (comme pour la plupart des choses dans create-react-app) il y a peu de possibilités de configuration si les valeurs par défaut ne servent pas votre objectif. Cela peut changer à l’avenir – en effet, il existe un PR ouvert qui ajoute ce support.

Personnaliser votre PWA avec React

Mais ce n’est pas seulement une expérience hors ligne qui en fait une PWA. D’autres facteurs importants sont :

  • Que l’application peut être ajoutée à votre écran d’accueil (A2HS, alias « installé »)
  • Que l’application a un nom et une icône qui peuvent être personnalisés
  • Qu’un écran de démarrage s’affiche pour l’utilisateur au démarrage de l’application

Tout ce qui précède est « dans la boîte » avec create-react-app. Commençons à les personnaliser.

Tout d’abord, nous allons donner un nom à notre application. Allumez index.html et remplacer React App avec My PWA. (N’hésitez pas à concocter un nom plus imaginatif que celui que j’ai suggéré.) Ensuite, ouvrez manifest.json et remplacez :

  "short_name": "React App",
  "name": "Create React App Sample",

Avec:

  "short_name": "My PWA",
  "name": "My PWA",

Votre application a maintenant un nom. La question que vous vous posez peut-être : qu’est-ce que c’est manifest.json déposer? Eh bien, pour citer les bons gars de Google :

Le manifeste de l’application Web est un simple fichier JSON qui indique au navigateur votre application Web et son comportement lorsqu’elle est « installée » sur l’appareil mobile ou le bureau de l’utilisateur. Chrome requiert un manifeste pour afficher l’invite Ajouter à l’écran d’accueil.

Un fichier manifeste typique comprend des informations sur le nom de l’application, les icônes qu’elle doit utiliser, le start_url il devrait commencer au moment du lancement, et plus encore.

Alors le manifest.json est essentiellement des métadonnées sur votre application. Voici à quoi cela devrait ressembler maintenant :

{
  "short_name": "My PWA",
  "name": "My PWA",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Vous pouvez utiliser les propriétés ci-dessus (et d’autres non encore configurées) pour contrôler le comportement de votre application. Par exemple, si vous souhaitez remplacer les icônes utilisées par votre application, il suffit de :

  • Placer de nouveaux fichiers de logo dans le public dossier
  • Mise à jour des références à ceux-ci dans le manifest.json
  • Enfin, pour les anciens appareils Apple, la mise à jour du dans le index.html

Création de plusieurs URL dans votre PWA

Jusqu’à présent, nous avons mis en place une PWA de base. C’est installable. Vous pouvez l’exécuter localement et le développer avec yarn start. Vous pouvez le créer pour le déploiement avec yarn build.

Cependant, ce n’est pas une application Web reconnaissable dans le sens où elle ne prend pas en charge différentes pages/URL. Nous allons généralement vouloir diviser notre application de cette façon. Faisons-le maintenant. Nous allons utiliser react-router, la solution de routage de facto pour React. Pour l’ajouter à notre projet (et les définitions de type requises pour TypeScript), nous utilisons :

yarn add react-router-dom @types/react-router-dom

Séparons maintenant notre application en quelques pages. Nous remplacerons l’existant App.tsx avec ça:

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import About from "./About";
import Home from "./Home";

const App: React.FC = () => (
  
    
    
      
        
      
      
        
      
    
  
);

export default App;

Ce sera notre page racine. Il a la responsabilité d’utiliser react-router pour rendre les pages que nous voulons servir, et également pour fournir les liens qui permettent aux utilisateurs de naviguer vers ces pages. En apportant nos modifications, nous aurons cassé notre test (qui a vérifié un lien que nous avons maintenant supprimé), nous allons donc le corriger comme suit :

Remplace le App.test.tsx avec ça:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders about link', () => {
  const { getByText } = render();
  const linkElement = getByText(/about/i);
  expect(linkElement).toBeInTheDocument();
});

Vous l’aurez remarqué dans notre nouveau App.tsx nous importons deux nouveaux composants (ou pages) : About et Home. Créons-les. D’abord, About.tsx:

import React from "react";

const About: React.FC = () => (
  

This is a PWA

); export default About;

Puis, Home.tsx:

import React from "react";

const Home: React.FC = () => (
  

Welcome to your PWA!

); export default Home;

Diviser le code de votre PWA

Maintenant que nous avons divisé notre application en plusieurs sections, nous allons également diviser le code. Un bon moyen d’améliorer les temps de chargement des PWA est de s’assurer que le code n’est pas intégré dans de gros fichiers. Pour le moment, notre application construit un single-file.js. Si tu cours yarn build, vous verrez à quoi cela ressemble :

  47.88 KB  build/static/js/2.89bc6648.chunk.js
  784 B     build/static/js/runtime-main.9c116153.js
  555 B     build/static/js/main.bc740179.chunk.js
  269 B     build/static/css/main.5ecd60fb.chunk.css

Remarquez le build/static/js/main.bc740179.chunk.js déposer. C’est notre single-file.js. Il représente la sortie compilée de la construction des fichiers TypeScript qui composent notre application. Il grandira et grandira au fur et à mesure que notre application grandira, devenant éventuellement problématique du point de vue de la vitesse de chargement de l’utilisateur.

create-react-app est construit sur webpack. Il existe un excellent support pour le fractionnement de code dans webpack, et donc, create-react-app le supporte par défaut. Appliquons-le à notre application. Encore une fois, nous allons changer App.tsx.

Où nous avions auparavant :

import About from "./About";
import Home from "./Home";

Remplaçons-le par :

const About = lazy(() => import('./About'));
const Home = lazy(() => import('./Home'));

C’est la syntaxe pour charger paresseusement des composants dans React. Vous remarquerez qu’il utilise en interne la dynamique import() syntaxe, que webpack utilise comme « point de partage ».

Donnons également à React quelque chose à restituer en attendant que les importations dynamiques soient résolues. Juste à l’intérieur de notre composant, nous allons ajouter un composant aussi :

  
    Loading...
}> {/*...*/}

Les composant rendra le

Loading...

en attendant que le code d’une route soit chargé dynamiquement. Alors notre finale App.tsx composant finit par ressembler à ceci:

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const About = lazy(() => import("./About"));
const Home = lazy(() => import("./Home"));

const App: React.FC = () => (
  
    Loading...
}> ); export default App;

Il s’agit maintenant d’une application à code fractionné. Comment pouvons-nous dire? Si nous courons yarn build encore une fois, nous verrons quelque chose comme ceci:

  47.88 KB          build/static/js/2.89bc6648.chunk.js
  1.18 KB (+428 B)  build/static/js/runtime-main.415ab5ea.js
  596 B (+41 B)     build/static/js/main.e60948bb.chunk.js
  269 B             build/static/css/main.5ecd60fb.chunk.css
  233 B             build/static/js/4.0c85e1cb.chunk.js
  228 B             build/static/js/3.eed49094.chunk.js

Notez que nous avons maintenant plusieurs *.chunk.js fichiers : notre initiale main.*.chunk.js, alors 3.*.chunk.js représentant Home.tsx, et 4.*.chunk.js représentant About.tsx.

Alors que nous continuons à développer notre application à partir de ce point, nous aurons une excellente approche en place pour nous assurer que les utilisateurs chargent les fichiers selon leurs besoins et que ces fichiers ne doivent pas être trop volumineux – des performances exceptionnelles qui évolueront.

Déployer votre PWA

Maintenant que nous avons mis en place notre PWA de base, déployons-la pour que le monde extérieur puisse l’apprécier. Nous allons utiliser Netlify pour cela.

Le code source de notre PWA se trouve sur GitHub ici.

Nous allons nous connecter à Netlify, cliquez sur le Créer un nouveau site et sélectionnez GitHub comme fournisseur. Nous devrons autoriser Netlify à accéder à notre GitHub.

Construire PWA avec React Autoriser Netlify à accéder à GitHub

Vous devrez peut-être cliquer sur le Configurer Netlify sur GitHub bouton pour accorder des autorisations à Netlify pour accéder à votre référentiel, comme ceci :

Création de PWA avec React Octroi d'autorisations pour Netlify

Ensuite, vous pouvez sélectionner votre repo depuis Netlify. Tous les paramètres par défaut fournis par Netlify devraient fonctionner pour notre cas d’utilisation :

Création de PWA avec les paramètres Netlify par défaut de React

Frappons la magie Déployer le site bouton! En quelques minutes, vous constaterez que Netlify a déployé notre PWA.

Création de PWA avec le site de déploiement de React à partir de Netlify

Si nous parcourons l’URL fournie par Netlify, nous pourrons voir la PWA déployée en action. (Vous avez également la possibilité de configurer un nom de domaine personnalisé, que vous souhaiteriez généralement en dehors d’une simple démonstration comme celle-ci.) Il est important de noter que cela sera servi via HTTPS, ce qui permettra à notre technicien de service de fonctionner.

Maintenant que nous savons qu’il est là, voyons comment ce que nous avons construit tient selon les professionnels. Nous allons exécuter l’audit Google Chrome DevTools sur notre PWA :

Création de PWA avec le score d'audit React Chrome DevTools

C’est un bon début pour notre PWA !

#Créez #une #application #Web #progressive #PWA #avec #React