Comienza a usar los paquetes web

Comparte sitios web como un solo archivo a través de Bluetooth y ejecútalos sin conexión en el contexto de tu origen

Yusuke Utsunomiya

Kenji Baheux

Advertencia: Se implementó la implementación experimental de la navegación en paquetes web se quitó de Chrome en febrero de 2023.

Agrupar un sitio web completo como un solo archivo y hacer que se pueda compartir abre nuevos casos de uso para la Web. Imagina un mundo en el que puedas hacer lo siguiente:

• Crea tu propio contenido y distribúyelo de diversas formas sin estar restringido a la red.
• Compartir una aplicación web o contenido web con tus amigos a través de Bluetooth o Wi-Fi directo
• Lleva tu sitio web en tu propia unidad USB o alójalo en tu propia red local

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

Compatibilidad del navegador

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

Presentamos la API de Web Bundles

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

Web Bundles, más conocidos formalmente como intercambios HTTP agrupados, son parte de Web Packaging propuesta.

Cómo funcionan los paquetes web

Los recursos HTTP de un paquete web se indexan a través de URLs de solicitud y, de manera opcional, pueden incluyen firmas que avalen los recursos. Las firmas permiten que los navegadores comprender y verificar de dónde proviene cada recurso y tratar a cada uno como procedente desde su verdadero origen. Esto es similar a cómo los intercambios HTTP firmados, una función para firmar un único recurso HTTP.

En este artículo, se explica qué es un paquete web y cómo usarlo.

Explicación de los paquetes web

Para ser precisos, un Web Bundle es un archivo CBOR con una extensión .wbn (por convención) que empaqueta los recursos HTTP en un formato binario y se entrega con el MIME application/webbundle. el tipo de letra. Puedes obtener más información al respecto en la Estructura de nivel superior. del borrador de especificaciones.

Los paquetes web tienen varias funciones únicas:

• Encapsula varias páginas, lo que permite agrupar un sitio web completo en un solo archivo.
• Habilita JavaScript ejecutable, a diferencia de MHTML
• Para hacerlo, usa variantes HTTP. la negociación de contenido, que permite la internacionalización con el Accept-Language. encabezado, incluso si el paquete se usa sin conexión
• Se cargan en el contexto de su origen cuando el publicador firma de manera criptográfica.
• Se carga casi al instante cuando se entrega de forma local

Estas funciones pueden generar varias situaciones. Un escenario común es la capacidad de compilar una aplicación web independiente que sea fácil de compartir y usar sin un o a Internet. Por ejemplo, supongamos que estás en un avión de Tokio a San Francisco con tu amigo. No te gusta el entretenimiento durante el vuelo. Tu amigo está jugando un un juego web llamado PROXX y te indica que lo descargó como un archivo Bundle antes de abordar el avión. Funciona a la perfección sin conexión. Antes de la Web Paquetes, la historia terminaría allí y tendrían que turnarse jugar en el dispositivo de un amigo o buscar otra cosa para pasar el tiempo. Sin embargo, con los paquetes web, ahora puedes hacer lo siguiente:

1. Pídele a tu amigo que comparta el archivo .wbn del juego. Por ejemplo, el archivo se podrían compartir fácilmente entre pares usando una app para compartir archivos.
2. Abre el archivo .wbn en un navegador compatible con Web Bundles.
3. Comienza a jugar en tu dispositivo y trata de superar a tu amigo de calidad.

En este video, se explica esta situación.

Como puedes ver, un paquete web puede contener todos los recursos, lo que hace que funcione sin conexión. y se cargan al instante.

Nota: Actualmente, Chrome 80 solo admite paquetes sin firmar (es decir, paquetes web sin firmas de origen). No funciona la agrupación de PROXX sin firmas debido a problemas de origen cruzado de trabajadores web. Chrome está trabajando para solucionar este problema. En Mientras tanto, consulta Dealing with Common Problems in Unsigned Paquetes para descubrir cómo evitar los problemas de origen cruzado.

Cómo crear paquetes web

Actualmente, la CLI de go/bundle es la más fácil de crear un paquete de sitio web. go/bundle es una implementación de referencia de los paquetes web una especificación integrada en Go.

1. Instala Go.

2. Instala go/bundle.

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. Clona el repositorio preact-todomvc y compílalo la aplicación web para prepararse para agrupar los recursos.

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. Usa el comando gen-bundle para compilar un archivo .wbn.

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

¡Felicitaciones! TodoMVC ahora es un paquete web.

Hay otras opciones de agrupación y mucho más en el futuro. La CLI de go/bundle te permite crear un paquete web con un archivo HAR o una lista personalizada de recursos URLs. Visita el repositorio de GitHub para obtener más información. acerca de go/bundle. También puedes probar el módulo experimental Node.js para agrupar, wbn Ten en cuenta que wbn aún se encuentra en las primeras etapas de en el desarrollo de software.

Cómo jugar con Web Bundles

Para probar un paquete web, haz lo siguiente:

1. Para consultar qué versión de Chrome estás ejecutando, ve a about://version. Si ejecutas la versión 80 o una versión posterior, omite el siguiente paso.
2. Descarga Chrome Canary si no tienes Chrome 80 o una fecha posterior.
3. Abre about://flags/#web-bundles.

4. Configura la marca Web Bundles como Enabled.

   

   Habilitando paquetes web en about://flags

   .

5. Reinicia Chrome.

6. Arrastra y suelta el archivo todomvc.wbn en Chrome si estás en una computadora de escritorio, o presiónalo en un archivo. de administración de identidades y seguridad, si usas Android.

Todo funciona por arte de magia.

. La implementación de Preact de TodoMVC trabajando sin conexión como un paquete web

.

También puedes probar otros paquetes web de muestra:

• web.dev.wbn es un resumen de todo el sitio web.dev, hasta el 15 de octubre de 2019.
• proxx.wbn: PROXX es un clon de un Buscaminas que funciona sin conexión.
• squoosh.wbn: Squoosh es una herramienta de optimización de imágenes conveniente y rápida que te permite hacer comparaciones en paralelo de varios formatos de compresión de imágenes, con compatibilidad para cambiar el tamaño y el formato de las conversiones.

Nota: Por el momento, solo puedes navegar a un paquete web almacenado en un archivo local, pero esa es solo una restricción temporal.

Enviar comentarios

La implementación de la API de Web Bundle en Chrome es experimental y está incompleta. No todo funciona y podría fallar o fallar. Por eso está detrás de una bandera experimental. Sin embargo, la API está lo suficientemente lista para que la explores en Chrome. La retroalimentación de los desarrolladores web es crucial para el diseño de pruébalas y cuéntales a las personas que trabajan con Web Bundles lo que opinas.

• Enviar comentarios generales a [e-mail].
• Si tienes comentarios sobre la visita de especificación https://github.com/WICG/webpackage/issues/new para informar un nuevo problema de especificación, o bien envía un correo electrónico a [e-mail].
• Si encuentras algún problema en el comportamiento de Chrome, visita https://crbug.com/new para informar un error en Chromium
• Cualquier contribución al debate sobre las especificaciones y a las herramientas implica más que bienvenido. Visita el repositorio de especificaciones para participar.

Agradecimientos

Queremos agradecer al maravilloso equipo de ingeniería de Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda y Jeffrey Yasskin, que trabajaron arduamente para contribuir al del modelo, compilando la función en Canary y revisando este artículo. Durante el proceso de estandarización, Dan York ayudó a abordar la y de IETF, y Dave Cramer también un gran recurso sobre lo que los editores realmente necesitan. También queremos agradecer a Jason Miller por el increíble preact-todomvc y su sin descanso en mejorar el framework.