Comparte sitios web como un solo archivo a través de Bluetooth y ejecútalos sin conexión en el contexto de tu origen
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.
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:
- 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. - Abre el archivo
.wbn
en un navegador compatible con Web Bundles. - 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.
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.
- Instala Go.
Instala
go/bundle
.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
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
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:
- 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. - Descarga Chrome Canary si no tienes Chrome 80 o una fecha posterior.
- Abre
about://flags/#web-bundles
. Configura la marca Web Bundles como Enabled.
.Reinicia Chrome.
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.
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.
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 webpackage-dev@chromium.org.
- 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 wpack@ietf.org.
- 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.