Premiers pas avec les Web Bundles

Partagez des sites Web en un seul fichier via Bluetooth et exécutez-les hors connexion dans le contexte de votre origine

Yusuke Utsunomiya
Yusuke Utsunomiya
Twitter Page d'accueil
Kenji Bace
Kenji Baheux

Regrouper un site Web complet dans un seul fichier et le partager ouvre de nouveaux cas d'utilisation pour le Web. Imaginez un monde dans lequel vous pourriez:

  • Créez votre propre contenu et diffusez-le de toutes sortes de façons sans être limité au réseau.
  • Partager une application ou un contenu Web avec vos amis via le Bluetooth ou Wi-Fi Direct
  • Transférez votre site sur votre propre clé USB ou hébergez-le sur votre réseau local

L'API Web Bundle est une proposition de pointe qui vous permet d'effectuer toutes ces opérations.

Compatibilité du navigateur

L'API Web Bundle n'est actuellement compatible qu'avec les navigateurs basés sur Chromium qui sont associés à un indicateur expérimental.

Présentation de l'API Web Bundle

Un Web Bundle est un format de fichier permettant d'encapsuler une ou plusieurs ressources HTTP dans un seul fichier. Il peut inclure un ou plusieurs fichiers HTML, JavaScript, images ou feuilles de style.

Les Web bundles, plus formellement appelés échanges HTTP groupés, font partie de la proposition de packaging Web.

Figure montrant qu'un Web Bundle est un ensemble de ressources Web.
Fonctionnement des Web Bundles

Les ressources HTTP d'un bundle Web sont indexées par des URL de requête et peuvent éventuellement comporter des signatures qui se portent garantes des ressources. Les signatures permettent aux navigateurs de comprendre et de vérifier l'origine de chaque ressource, et de les traiter comme provenant de leur véritable origine. Ce processus est semblable à celui des échanges HTTP signés, une fonctionnalité permettant de signer une seule ressource HTTP.

Cet article explique ce qu'est un Web Bundle et comment l'utiliser.

À propos des packs Web

Plus précisément, un Web Bundle est un fichier CBOR avec une extension .wbn (par convention) qui regroupe les ressources HTTP dans un format binaire et est diffusé avec le type MIME application/webbundle. Pour en savoir plus à ce sujet, consultez la section Structure de premier niveau du brouillon de spécification.

Les Web Bundles présentent plusieurs caractéristiques uniques:

  • Encapsule plusieurs pages, ce qui permet de regrouper un site Web complet dans un seul fichier.
  • Active le JavaScript exécutable, contrairement à MHTML
  • Négociation du contenu à l'aide de variantes HTTP, ce qui permet l'internationalisation avec l'en-tête Accept-Language même si le bundle est utilisé hors connexion
  • Chargement dans le contexte de son origine lorsque l'éditeur a signé de manière cryptographique
  • Se charge presque instantanément lorsqu'il est diffusé en local

Ces fonctionnalités ouvrent plusieurs scénarios. Un scénario courant est la possibilité de créer une application Web autonome, facile à partager et utilisable sans connexion Internet. Par exemple, supposons que vous soyez en avion de Tokyo à San Francisco avec un ami. Vous n'aimez pas le divertissement en vol. Votre ami joue à un jeu Web intéressant appelé PROXX et vous dit qu'il a téléchargé le jeu en tant que Web Bundle avant d'embarquer dans l'avion. Il fonctionne parfaitement hors connexion. Avant les Web Bundles, l'histoire s'arrêtait là. Vous deviez jouer au jeu à tour de rôle sur l'appareil de votre ami ou trouver autre chose pour passer le temps. Voici ce que vous pouvez désormais faire avec les bundles Web:

  1. Demandez à votre ami de partager le fichier .wbn du jeu. Par exemple, le fichier peut facilement être partagé peer-to-peer à l'aide d'une application de partage de fichiers.
  2. Ouvrez le fichier .wbn dans un navigateur compatible avec les bundles Web.
  3. Commencez à jouer sur votre propre appareil et essayez de battre le record de votre ami.

Voici une vidéo qui explique ce scénario.

Comme vous pouvez le voir, un Web Bundle peut contenir toutes les ressources, ce qui permet de le faire fonctionner hors connexion et de se charger instantanément.

Créer des bundles Web

La CLI go/bundle est actuellement le moyen le plus simple d'empaqueter un site Web. go/bundle est une implémentation de référence de la spécification Web Bundle intégrée à Go.

  1. Installez Go.

  2. Installez go/bundle.

    go get -u github.com/WICG/webpackage/go/bundle/cmd/...

  3. Clonez le dépôt preact-todomvc et créez l'application Web pour vous préparer à regrouper les ressources.

    git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build

  4. Utilisez la commande gen-bundle pour créer un fichier .wbn.

    gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn

Félicitations ! TodoMVC est désormais un bundle Web.

Il existe d'autres options de regroupement, et d'autres seront bientôt disponibles. La CLI go/bundle vous permet de créer un bundle Web à l'aide d'un fichier HAR ou d'une liste personnalisée d'URL de ressources. Consultez le dépôt GitHub pour en savoir plus sur go/bundle. Vous pouvez également essayer le module expérimental Node.js de regroupement wbn. Notez que wbn en est encore aux premiers stades de son développement.

Utilisation des packs Web

Pour tester un Web Bundle:

  1. Accédez à about://version pour connaître la version de Chrome que vous utilisez. Si vous exécutez la version 80 ou une version ultérieure, ignorez l'étape suivante.
  2. Téléchargez Chrome Canary si vous n'utilisez pas Chrome 80 ou une version ultérieure.
  3. Ouvrez about://flags/#web-bundles.

  4. Définissez l'option Web Bundle sur Activé.

    Capture d'écran de about://flags
    Activer les bundles Web dans about://flags

  5. Relancez Chrome.

  6. Glissez-déposez le fichier todomvc.wbn dans Chrome si vous utilisez un ordinateur, ou appuyez dessus dans une application de gestion de fichiers si vous utilisez un appareil Android.

Tout fonctionne comme par magie.

L'implémentation Preact de TodoMVC fonctionne hors connexion en tant que bundle Web

Vous pouvez également essayer d'autres exemples de bundles Web:

  • web.dev.wbn est un instantané de l'ensemble du site web.dev depuis le 15 octobre 2019.
  • proxx.wbn : PROXX est un clone démineur qui fonctionne hors connexion.
  • squoosh.wbn : Squoosh est un outil d'optimisation d'image pratique et rapide qui vous permet de comparer différents formats de compression d'image. Il est par ailleurs compatible avec le redimensionnement et les conversions de format.

Envoyer des commentaires

L'implémentation de l'API Web Bundle dans Chrome est expérimentale et incomplète. Tout ne fonctionne pas et peut échouer ou planter. C'est pourquoi il se trouve derrière un flag expérimental. Toutefois, l'API est suffisamment prête pour que vous puissiez l'explorer dans Chrome. Les commentaires des développeurs Web sont essentiels à la conception de nouvelles API. N'hésitez donc pas à l'essayer et à dire aux personnes travaillant sur les Web Bundles ce que vous en pensez.

Remerciements

Nous tenons à rendre hommage à la formidable équipe d'ingénieurs Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda et Jeffrey Yasskin, qui ont travaillé dur pour contribuer à la spécification, développer la fonctionnalité sur Canary et lire cet article. Pendant le processus de standardisation, Dan York a contribué à la discussion de l'IETF, et Dave Cramer s'est avéré très utile sur les besoins réels des éditeurs. Nous tenons également à remercier Jason Miller pour son incroyable préact-todomvc et ses efforts constants pour améliorer le framework.