Premiers pas avec les offres groupées Web

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

11 novembre 2019

Regrouper un site Web entier en un seul fichier et le rendre partageable ouvre de nouveaux cas d'utilisation pour le Web. Imaginez un monde où vous pouvez:

• Créez votre propre contenu et diffusez-le de toutes sortes de manières sans vous limiter au réseau
• Partagez une application Web ou un extrait de contenu Web avec vos amis via Bluetooth ou Wi-Fi Direct
• Apportez votre site sur votre propre clé USB ou même hébergez-le sur votre propre réseau local

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

Compatibilité du navigateur

Actuellement, l'API Web Bundles ne prend en charge que les navigateurs basés sur Chromium avec une marque expérimentale.

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 seul fichier. Il peut inclure un ou plusieurs fichiers HTML, fichiers JavaScript, images ou feuilles de style.

Paquets Web, plus officiellement connus sous le nom de Echanges HTTP inclus, font partie de la Emballage Web
proposition.

Les ressources HTTP d'un bundle Web sont indexées par URL de requête et peuvent éventuellement être accompagnées de signatures qui approuvent les ressources. Les signatures permettent aux navigateurs de comprendre et de vérifier l'origine de chaque ressource et de traiter chacune d'elles comme si elle provenait de sa véritable origine. Ceci est similaire à la façon dont Echanges HTTP signés, une fonction pour signer une seule ressource HTTP.

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

Explication des packages Web

Pour être précis, un Web Bundle est un Dossier CBOR avec un .wbn extension (par convention) qui conditionne les ressources HTTP dans un format binaire, et est servie avec le application / webbundle Mec mimica. Vous pouvez en savoir plus à ce sujet dans le Structure de haut niveau
brouillon de la section des spécifications.

Les offres groupées Web ont plusieurs fonctionnalités uniques:

• Encapsule plusieurs pages, permettant à un site Web entier d'être regroupé dans un seul fichier
• Activer le JavaScript exécutable, contrairement à MHTML
• Applications Variantes HTTP de négocier du contenu, ce qui permet une internationalisation avec le Accept-Language
  en-tête même si le paquet est utilisé hors ligne
• Il est chargé dans le contexte de son origine lorsqu'il est signé cryptographiquement par son éditeur.
• Se recharge presque instantanément lorsqu'il est servi localement

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, disons que vous êtes dans un avion de Tokyo à San Francisco avec votre ami. Vous n'aimez pas les divertissements en vol. Votre ami joue à un jeu Web intéressant appelé PROXXet vous dit qu'il a téléchargé le jeu sous forme de pack Web avant de monter à bord de l'avion. Cela fonctionne parfaitement hors ligne. Avant les offres Web, l'histoire se terminait là et vous deviez jouer à tour de rôle sur l'appareil de votre ami ou trouver autre chose pour passer le temps. Mais avec les offres Web, voici ce que vous pouvez faire maintenant:

1. Demandez à votre ami de partager le .wbn fichier de jeu. Par exemple, le fichier pourrait être facilement partagé d'égal à égal à l'aide d'une application de partage de fichiers.
2. Ouvrez le .wbn fichier dans un navigateur prenant en charge les offres Web.
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 Web Bundle peut contenir toutes les ressources, ce qui le permet de fonctionner hors ligne et de se charger instantanément.

Création de packages web

Les aller / bundle CLI est actuellement le moyen le plus simple de regrouper un site Web. aller / bundle est une implémentation de référence de la spécification Web Bundles intégrée Va.

1. Installez Go.

2. Installer sur PC aller / bundle.

   allez chercher -u github.com/WICG/webpackage/go/bundle/cmd/ ...

3. Cloner le préact-todomvc référentiel et créez votre application Web pour préparer la mise en commun de vos ressources.

   git clone https://github.com/developit/preact-todomvc.git
    cd préact-todomvc
    npm je
    npm run build

4. Utilisez le gen-bundle commande pour construire un .wbn Record.

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

Toutes nos félicitations! TodoMVC est maintenant un package Web.

Il existe d'autres options de regroupement et d'autres à venir. Les aller / bundle L'interface de ligne de commande vous permet de créer un ensemble Web à l'aide d'un fichier HAR ou d'une liste personnalisée d'URL de ressources. Visiter le Dépôt GitHub en apprendre davantage sur aller / bundle. Vous pouvez également essayer le module expérimental Node.js pour l'empaquetage,
wbn. Notez que wbn il en est encore aux premiers stades de développement.

Jouer avec les offres Web

Pour tester un package Web:

1. Aller chrome://version pour voir quelle version de Chrome vous utilisez. Si vous exécutez la version 80 ou une version ultérieure, ignorez l'étape suivante.

2. Télécharger Chrome Canary si vous n'exécutez pas Chrome 80 ou version ultérieure.

3. Ouvert chrome://flags/#web-bundles.

4. Sélectionnez le Paquets Web signaler un Activée.

   

5. Redémarrez Chrome.

6. Faites glisser et déposez le todomvc.wbn fichier dans Chrome s'il est sur le bureau, ou appuyez dessus dans une application de gestion de fichiers s'il est sur Android.

Tout fonctionne comme par magie.

Vous pouvez également essayer d'autres exemples de packages 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 démineur qui fonctionne hors ligne.
• squoosh.wbn:
  Squoosh est un outil d'optimisation d'image pratique et rapide qui vous permet de faire des comparaisons côte à côte de divers formats de compression d'image, avec prise en charge du redimensionnement et des conversions de format.

Poster des commentaires

La mise en œuvre de l'API Web Bundle dans Chrome est expérimentale et incomplète. Tout ne fonctionne pas et peut planter ou planter. C'est pourquoi il est derrière un drapeau expérimental. Mais l'API est suffisamment intelligente pour que vous puissiez l'explorer dans Chrome. Les commentaires des développeurs Web sont cruciaux pour la conception de nouvelles API, alors essayez-les et faites savoir aux personnes qui travaillent chez Web Bundles ce que vous en pensez!

Merci

Nous tenons à féliciter la merveilleuse équipe d'ingénieurs Chrome,
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi toyoshima, Kinuko yasuda y Jeffrey Yasskin qui a travaillé dur pour contribuer à la spécification, créer la fonction dans Canary et réviser cet article. Pendant le processus de normalisation Dan York a aidé à naviguer dans la discussion de l'IETF et aussi Dave Cramer a été une excellente ressource sur ce dont les éditeurs ont vraiment besoin. Nous tenons également à remercier Jason Miller pour le preact-todomvc incroyable et leurs efforts inlassables pour améliorer la structure.