Premiers pas avec les Web Bundles

Partagez des sites Web sous la forme d'un fichier unique via Bluetooth et exécutez-les hors connexion dans le contexte de votre origine

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

Regrouper un site Web complet en un seul fichier et le rendre partageable 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 limité au réseau
  • Partager une application Web ou un contenu Web avec vos amis via Bluetooth ou Wi-Fi Direct
  • Transférez votre site sur votre propre clé USB ou hébergez-le sur votre propre réseau local.

L'API Web Bundles est une proposition de pointe qui vous permet de réaliser toutes ces opérations.

Compatibilité du navigateur

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

Présentation de l'API Web Bundles

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

Les groupes Web, plus officiellement appelés échanges HTTP groupés, font partie du packaging Web proposition.

<ph type="x-smartling-placeholder">
</ph> Figure démontrant qu&#39;un Web Bundle est un ensemble de ressources Web. <ph type="x-smartling-placeholder">
</ph> Fonctionnement des Web Bundles
.

Les ressources HTTP d'un Web Bundle sont indexées par URL de requête et peuvent éventuellement sont fournies avec des signatures qui se portent garants des ressources. Les signatures permettent aux navigateurs de de comprendre et de vérifier l'origine de chaque ressource, et de traiter chacune d'elles comme provenant de sa véritable origine. Ce processus est semblable à celui utilisé pour les échanges HTTP signés, une fonctionnalité permettant de signer une seule ressource HTTP, sont gérées.

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

Explication des bundles Web

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

Les Web Bundles ont 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
  • Utilise des variantes HTTP pour ce faire la négociation de contenu, qui permet l'internationalisation avec le Accept-Language. même si le groupe 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 est la capacité de créer une application Web autonome, facile à partager et utilisable sans de votre connexion Internet. Imaginons que vous vous trouviez dans un avion entre Tokyo et San Francisco avec votre ami. Vous n'aimez pas les divertissements en vol. Votre ami joue à un jeu jeu Web appelé PROXX, et vous informe qu'il a téléchargé le jeu sous forme de navigateur Web Faites-le avant de monter à bord. Cela fonctionne parfaitement hors connexion. Avant le Web L'histoire s'arrête là et vous devez soit jouer à tour de rôle, lorsque vous jouez sur l'appareil d'un ami, ou trouvez autre chose pour transmettre en temps réel. Voici ce que vous pouvez maintenant faire avec les Web Bundles:

  1. Demandez à votre ami de partager le fichier .wbn du jeu. Par exemple, le fichier pourrait 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. Jouez au jeu sur votre propre appareil et essayez de battre le record de votre ami le score.

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 les faire fonctionner hors connexion. et se charger instantanément.

Créer des bundles Web

La CLI go/bundle est actuellement la le plus simple pour regrouper un site Web. go/bundle est une implémentation de référence des Web Bundles. spécifique 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 compilez-le. l'application Web pour se 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 seront disponibles, et d'autres seront bientôt disponibles. La CLI go/bundle vous permet de créer un Web Bundle à l'aide d'un fichier HAR ou d'une liste personnalisée de ressources URL. Pour en savoir plus, consultez le dépôt GitHub. concernant go/bundle. Vous pouvez aussi essayer le module expérimental Node.js pour le regroupement, wbn Notez que wbn n'en est qu'à ses débuts. développement d'applications.

Jouer 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 exécutez la version 80 ou version ultérieure, passez à l'étape suivante.
  2. Téléchargez Chrome Canary si vous n'utilisez pas Chrome 80. ou version ultérieure.
  3. Ouvrez about://flags/#web-bundles.

  4. Définissez l'option Web Bundles (Groupes Web) sur Activé.

    <ph type="x-smartling-placeholder">
    </ph> Capture d&#39;écran de about://flags <ph type="x-smartling-placeholder">
    </ph> Activation des 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 un fichier. de gestion d'applications si vous utilisez Android.

Tout fonctionne comme par magie.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> L'implémentation Preact de TodoMVC fonctionnant hors connexion en tant que bundle Web

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

  • web.dev.wbn est un instantané de l'ensemble du site web.dev au 15 octobre 2019.
  • proxx.wbn: PROXX est un clone du démineur qui fonctionne hors connexion.
  • squoosh.wbn: Squoosh est un outil d'optimisation d'image rapide et pratique, permet de comparer différents formats de compression d'image, en prenant en charge le redimensionnement et le format des conversions.

Envoyer des commentaires

L'implémentation de l'API Web Bundle dans Chrome est expérimentale et incomplète. Tout ne fonctionne pas et il se peut que l'opération échoue ou plante. C'est pourquoi est derrière un drapeau 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 pas à les essayer et à dire aux personnes qui travaillent sur les Web Bundles ce que vous en pensez.

Remerciements

Nous tenons à remercier la formidable équipe d'ingénieurs Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda et Jeffrey Yasskin ont travaillé sans relâche , la création de la fonctionnalité sur Canary et la lecture de cet article. Pendant le de normalisation Dan York nous a aidés à comprendre Les discussions avec l'IETF et Dave Cramer sont des est une excellente ressource sur les besoins réels des éditeurs. Nous tenons à remercier Jason Miller pour son incroyable pré-acte et sa pour améliorer le cadre.