Avec le transport HTTP

1. Le client (navigateur) fait une requête d’accès à une ressource auprès d’un serveur Web selon le protocole HTTP
2. Le serveur vérifie la demande, les autorisations et effectue la tache demandée. Il envoie en retour une réponse au client.
3. Le client interprète la réponse reçue (ex: modification de l’affichage)

Il faut noter que le serveur ne peut pas envoyer d’information à un client spontanément, c’est à dire sans que celui-ci ne lui ait fait une demande.

Avec le transport Websocket

Le client fait des demandes au serveur, mais le protocole websocket permet également à un serveur d’envoyer des informations de son propre chef à un ou plusieurs de ses clients connectés.
Les connexions entre client et serveur par un websocket sont persistantes, par opposition aux connexions http ordinaires.

Sites web statiques

Les premiers sites web étaient entièrement statiques. Il en existe encore beaucoup, notamment pour des documentations. Ici les ressources accédées sont toutes statiques : pages html, images, vidéos, feuilles de style (css). Aucun script n’est exécuté, le navigateur affiche les éléments statiques html, css etc. et permet la navigation entre les pages en cliquant sur les liens hypertexte.

L’arborescence des fichiers html définit la structure des urls.

Par exemple, l’accès à http://monsite.org/collections/hiver/manteaux.html provoquera un accès en lecture à un fichier situé à l’emplacement relatif collections/hiver/manteaux.html par rapport à la racine de l’emplacement des pages statiques, typiquement /var/www/monsite/html/

Les applications SSG (Static Site Generation) utilisent les technologies javascript modernes pour produire une arborescence statique de pages.

Applications web dynamiques

Deux éléments peuvent rendre un site web dynamique :

• côté client, du code javascript ajouté aux pages html, qui permet des manipulations de leur DOM
• côté serveur, certaines requêtes du client peuvent déclencher dans un serveur d'application des accès à une base de données et/ou un calcul dynamique de la réponse à renvoyer au navigateur

On distingue :

• les applications SSR (Server Side Rendering) pour lesquelles les pages sont crées dynamiquement côté serveur à chaque requête, et simultanément côté client (complexe à mettre en oeuvre)
• les applications SPA (Single Page Application) pour lesquelles le DOM est construit dynamiquement côté client par le code javascript embarqué dans la page initiale index.html

Les applications SSG et SSR permettent une indexation (SEO) efficace, contrairement aux applications SPA.

Mobilisation des ressources du navigateur et de ses WebAPI

• stockage : LocalStorage, SessionStorage, IndexedDB
• audio, video : MediaDevices, AudioAPI, support des codecs
• visiocommunication : WebRTC
• CPU : webassembly
• reconnaissance / synthèse vocale : SpeechAPI
• moteur 3D : WebGL API
• GPS : Geolocation API
• accélérometre, gyroscope, lumière : SensorAPI
• animation : CSS
• push notifications
• arrière-plan : webworkers

What Web Can Do Today

Compatibilité avec les navigateurs

https://caniuse.com/

Progressive Web App (PWA)

• accessibles via un navigateur web et diffusables en un clic via une url
• faciles à mettre à jour
• utilisables sur PC, mobiles ou tablettes de tous types
• s’installent sur les écrans d’accueil comme des applications et reçoivent des notifications
• peuvent s’installer aussi depuis les stores

Applications mobiles natives

• pour Android, codage en Java / Kotlin
• pour iOS, codage en Swift / ObjectiveC

Applications mobiles hybrides avec Capacitor

• package une webapp en application iOS ou Android (WebView en plein écran)
• des plugins permettent d’accéder au GPS, caméra etc.

Autres

• Flutter
• ReactNative

Applications Desktop

• projet Electron = package une appli web en une appli Desktop
• Discord, Facebook Messenger
• gourmand : ticket d’entrée = 80Mo

Tendances

• Webcomponents = CustomElement + ShadowDOM
• Progressive Web App (PWA)