Premiers pas avec les offres groupées Web

Comparta sitios la toile como un solo archivo a través de Bluetooth y ejecútelos sin conexión en el contexto de su origen

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:

• Cree su propio Contenu y distribúyalo en todo tipo de formas sin estar restringido a la red
• 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

La API de Web Bundles es una propuesta de vanguardia que le permite hacer todo esto.

Compatibilidad del le navigateur

Actualmente, la API de Web Bundles solo es compatible con navigateurs basados ​​en Chromium con una marca experimental.

Présentation de l'API Web Bundles

Un Web Bundle es un formato de archivo para encapsular uno o más recursos HTTP en un solo archivo. Puede incluir uno o más archivos HTML, archivos JavaScript, imágenes u hojas de estilo.

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

Los recursos HTTP en un Web Bundle se indexan por URL de solicitud y, opcionalmente, pueden venir con firmas que avalan los recursos. Las firmas permiten que los navegadores comprendan y verifiquen el origen de cada recurso y tratan a cada uno como si procediera de su verdadero origen. Esto es similar a como 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

Estas características abren múltiples escenarios. Un escenario común es la capacidad de crear una aplicación web autónoma que être fácil de compartir y utilizable sin conexión a Internet. Por ejemplo, digamos que está en un avión de Tokio a San Francisco con su amigo. No te gusta el entretenimiento a bordo. Tu amigo está jugando a un interesante juego web llamado 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.

   go get -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 implementación de la API de Web Bundle en Chrome es experimental e incompleta. No todo funciona y puede fallar o bloquearse. Por eso está detrás de una bandera experimental. Pero la API está lo suficientemente lista para que la explore en Chrome. Los comentarios de los desarrolladores web son cruciales para el diseño de nuevas API, así que pruébelo y dígale a las gens que trabajan en Web Bundles lo que piensa.

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.