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
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.
![Figure démontrant qu'un Web Bundle est un ensemble de ressources Web.](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=5&hl=fr)
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:
- 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. - Ouvrez le fichier
.wbn
dans un navigateur compatible avec les bundles Web. - 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.
- Installez Go.
Installez
go/bundle
.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
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
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:
- 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. - Téléchargez Chrome Canary si vous n'utilisez pas Chrome 80. ou version ultérieure.
- Ouvrez
about://flags/#web-bundles
. Définissez l'option Web Bundles (Groupes Web) sur Activé.
Activation des bundles Web dans about://flags
Relancez Chrome.
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.
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.
- Envoyer des commentaires d'ordre général à webpackage-dev@chromium.org.
- Si vous avez des commentaires sur les spécifications, rendez-vous https://github.com/WICG/webpackage/issues/new pour signaler un nouveau problème de spécification, ou envoyez un e-mail à l'adresse wpack@ietf.org.
- Si vous constatez des problèmes dans le comportement de Chrome, consultez la page https://crbug.com/new pour signaler un bug Chromium.
- Toute contribution à la discussion sur les spécifications et aux outils est également bienvenue. Accédez au dépôt des spécifications pour participer.
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.