Premiers pas avec les Web Bundles

Partager des sites Web en tant que fichier unique via le Bluetooth et les exécuter hors connexion dans le contexte de votre origine

Yusuke Utsunomiya
Yusuke Utsunomiya
X Page d'accueil
Kenji Baheux
Kenji Baheux

Le regroupement d'un site Web complet en un seul fichier et sa mise à disposition pour le partage ouvre de nouveaux cas d'utilisation pour le Web. Imaginez un monde dans lequel vous pourriez:

  • Créez vos propres contenus et distribuez-les de toutes sortes de manières sans être limité au réseau
  • Partager une application Web ou un contenu Web avec vos amis via Bluetooth ou Wi-Fi Direct
  • Emporter votre site sur une clé USB ou même l'héberger sur votre propre réseau local

L'API Web Bundles est une proposition de pointe qui vous permet de tout cela.

Compatibilité du navigateur

L'API Web Bundles n'est actuellement compatible qu'avec les navigateurs basés sur Chromium derrière un indicateur expérimental.

Présentation de l'API Web Bundles

Un bundle Web 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, des fichiers JavaScript, des images ou des feuilles de style.

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

Illustration montrant qu'un Web Bundle est un ensemble de ressources Web.
Comment fonctionnent les bundles Web

Les ressources HTTP d'un Web Bundle sont indexées par les URL de requête et peuvent être accompagnées de signatures garantissant les ressources. Les signatures permettent aux navigateurs de comprendre et de vérifier l'origine de chaque ressource, et traitent chacune d'elles comme provenant de sa véritable origine. Cela ressemble à la façon dont les échanges HTTP signés, une fonctionnalité permettant de signer une seule ressource HTTP, sont gérés.

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

Explication des bundles Web

Pour être précis, un Web Bundle est un fichier CBOR avec une extension .wbn (par convention) qui empaquette les ressources HTTP dans un format binaire et est diffusé avec le type MIME application/webbundle. Pour en savoir plus, consultez la section Structure de premier niveau de la version préliminaire de la spécification.

Les packages Web ont plusieurs fonctionnalités uniques:

  • Encapsule plusieurs pages, ce qui permet de regrouper un site Web complet dans un seul fichier
  • Active JavaScript exécutable, contrairement à MHTML.
  • Utilise des variantes HTTP pour la négociation de contenu, ce qui permet l'internationalisation avec l'en-tête Accept-Language, même si le bundle est utilisé hors connexion.
  • Se charge dans le contexte de son origine une fois que son éditeur a signé de manière cryptographique
  • Elles se chargent presque instantanément lorsqu'elles sont diffusées en local.

Ces fonctionnalités ouvrent plusieurs scénarios. Un scénario courant consiste à pouvoir créer une application Web autonome, facile à partager et utilisable sans connexion Internet. Imaginons que vous vous trouviez dans un avion de Tokyo à San Francisco avec votre ami. Vous n'aimez pas les divertissements à bord. Votre ami joue à un jeu Web intéressant appelé PROXX et vous dit qu'il l'a téléchargé en tant que Web Bundle avant de monter dans l'avion. Cela fonctionne parfaitement hors connexion. Avant les Web Bundles, l'histoire s'arrêtait là et vous deviez soit jouer à tour de rôle sur l'appareil de votre ami, soit trouver autre chose pour passer le temps. Mais avec les Web Bundles, vous pouvez désormais:

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

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

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

Créer des Web Bundles

La CLI go/bundle est actuellement le moyen le plus simple de regrouper un site Web. go/bundle est une implémentation de référence de la spécification Web Bundles intégrée dans 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.

D'autres options de regroupement sont disponibles 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 Node.js expérimental pour le regroupement, wbn. Notez que wbn en est encore aux premières étapes du développement.

Se familiariser avec les Web Bundles

Pour essayer un package Web:

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

  4. Définissez l'indicateur Web Bundles (Bundles Web) sur Enabled (Activé).

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

  5. Relancez Chrome.

  6. Faites glisser-déposer le fichier todomvc.wbn dans Chrome si vous utilisez un ordinateur ou appuyez dessus dans une application de gestion de fichiers si vous utilisez Android.

Tout fonctionne comme par magie.

Implémentation de Preact de TodoMVC fonctionnant 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'intégralité du site web.dev au 15 octobre 2019.
  • proxx.wbn : PROXX est un clone de Minesweeper qui fonctionne hors connexion.
  • squoosh.wbn : Squoosh est un outil d'optimisation d'images pratique et rapide qui vous permet de comparer côte à côte différents formats de compression d'images, avec prise en charge du redimensionnement et des 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 le système peut planter ou se bloquer. C'est pourquoi il est associé à un indicateur 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. Alors, essayez-les et dites aux personnes qui travaillent sur les Web Bundles ce que vous en pensez.

Remerciements

Nous tenons à remercier chaleureusement l'équipe d'ingénieurs Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda et Jeffrey Yasskin, qui ont travaillé dur pour contribuer aux spécifications, créer la fonctionnalité sur Canary et examiner cet article. Au cours du processus de normalisation, Dan York nous a aidés à naviguer dans la discussion de l'IETF, et Dave Cramer a été une excellente ressource sur les besoins réels des éditeurs. Nous tenons également à remercier Jason Miller pour l'incroyable preact-todomvc et ses efforts inlassables pour améliorer le framework.