Beginnen Sie mit Web Bundles

Teilen Sie Websites als einzelne Datei über Bluetooth und führen Sie sie im Kontext ihrer Herkunft offline aus

11. November 2019

Das Gruppieren einer gesamten Website als einzelne Datei und deren gemeinsame Nutzung eröffnet neue Anwendungsfälle für das Web. Stellen Sie sich eine Welt vor, in der Sie:

• Erstellen Sie Ihre eigenen Inhalte und verteilen Sie sie auf vielfältige Weise, ohne auf das Netzwerk beschränkt zu sein
• Teilen Sie eine Webanwendung oder einen Webinhaltsausschnitt mit Ihren Freunden über Bluetooth oder Wi-Fi Direct
• Bringen Sie Ihre Site auf Ihren eigenen USB-Stick oder hosten Sie sie sogar in Ihrem eigenen lokalen Netzwerk

Die Web Bundles-API ist ein innovatives Angebot, mit dem Sie all dies tun können.

Browser-Kompatibilität

Derzeit unterstützt die Web Bundles-API nur Chromium-basierte Browser mit einer experimentellen Marke.

Einführung in die Web Bundles API

Ein Web Bundle ist ein Dateiformat zum Einkapseln einer oder mehrerer HTTP-Ressourcen in eine einzelne Datei. Es kann eine oder mehrere HTML-Dateien, JavaScript-Dateien, Bilder oder Stylesheets enthalten.

Webpakete, formeller bekannt als HTTP-Austausch enthaltensind Teil der Webverpackung
Vorschlag.

HTTP-Ressourcen in einem Web Bundle werden anhand der Anforderungs-URL indiziert und können optional mit Signaturen versehen werden, die die Ressourcen unterstützen. Mit Signaturen können Browser den Ursprung jeder Ressource verstehen und überprüfen und jede so behandeln, als stamme sie von ihrem wahren Ursprung. Dies ist ähnlich wie Signierter HTTP-Austausch, eine Funktion zum Signieren einer einzelnen HTTP-Ressource.

In diesem Artikel wird erläutert, was ein Web Bundle ist und wie es verwendet wird.

Erläuterung der Webpakete

Um genau zu sein, ist ein Web Bundle ein CBOR-Datei mit einer .wbn Erweiterung (gemäß Konvention), die HTTP-Ressourcen in einem Binärformat verpackt und mit dem bereitgestellt wird Anwendung / Webbundle Mimica-Typ. Mehr dazu lesen Sie in der Struktur der obersten Ebene
Entwurf eines Spezifikationsabschnitts.

Web-Bundles bieten mehrere einzigartige Funktionen:

• Verkapselt mehrere Seiten, sodass eine gesamte Website in einer einzigen Datei gebündelt werden kann
• Aktivieren Sie ausführbares JavaScript im Gegensatz zu MHTML
• Anwendungen HTTP-Varianten Inhalte zu verhandeln, die eine Internationalisierung mit dem ermöglichen Akzeptiere-Sprache
  Header, auch wenn das Paket offline verwendet wird
• Es wird im Kontext seiner Herkunft geladen, wenn es von seinem Herausgeber kryptografisch signiert wird.
• Wird fast sofort aufgeladen, wenn es vor Ort serviert wird

Diese Funktionen eröffnen mehrere Szenarien. Ein häufiges Szenario ist die Möglichkeit, eine eigenständige Webanwendung zu erstellen, die einfach zu teilen und ohne Internetverbindung verwendet werden kann. Nehmen wir zum Beispiel an, Sie sitzen mit Ihrem Freund in einem Flugzeug von Tokio nach San Francisco. Sie mögen keine Unterhaltung während des Fluges. Ihr Freund spielt ein interessantes Web-Spiel namens PROXXund sagt dir, dass er das Spiel als Webpack heruntergeladen hat, bevor er in das Flugzeug gestiegen ist. Es funktioniert perfekt offline. Vor Web Bundles endete die Geschichte dort und Sie mussten das Spiel abwechselnd auf dem Gerät Ihres Freundes spielen oder etwas anderes finden, um sich die Zeit zu vertreiben. Mit Web Bundles können Sie jetzt Folgendes tun:

1. Bitten Sie Ihren Freund, das zu teilen .wbn Spieledatei. Beispielsweise kann die Datei mithilfe einer Dateifreigabeanwendung problemlos Peer-to-Peer freigegeben werden.
2. Öffne das .wbn Datei in einem Browser, der Web Bundles unterstützt.
3. Spielen Sie das Spiel auf Ihrem eigenen Gerät und versuchen Sie, den Highscore Ihres Freundes zu übertreffen.

Hier ist ein Video, das dieses Szenario erklärt.

Wie Sie sehen können, kann ein Web Bundle alle Ressourcen enthalten, sodass es offline funktioniert und sofort geladen wird.

Erstellung von Webpaketen

das gehen / bündeln CLI ist derzeit der einfachste Weg, eine Website zu bündeln. gehen / bündeln ist eine Referenzimplementierung der integrierten Web Bundles-Spezifikation Gehen.

1. Installieren Sie Go.

2. Auf dem PC installieren gehen / bündeln.

   Holen Sie sich -u github.com/WICG/webpackage/go/bundle/cmd/ ...

3. Klonen Sie die preact-todomvc Repository und erstellen Sie Ihre Webanwendung, um die Bündelung Ihrer Ressourcen vorzubereiten.

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

4. Verwenden Sie die Gen-Bundle Befehl zum Erstellen eines .wbn Verfahren.

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

Herzliche Glückwünsche! TodoMVC ist jetzt ein Webpaket.

Es gibt andere Optionen für die Gruppierung und weitere werden folgen. das gehen / bündeln Mit CLI können Sie ein Web Bundle mithilfe einer HAR-Datei oder einer benutzerdefinierten Liste von Ressourcen-URLs erstellen. Besuche den GitHub-Repository mehr darüber lernen gehen / bündeln. Sie können auch das experimentelle Node.js-Modul zum Verpacken ausprobieren.
wbn. Beachten Sie, dass wbn es befindet sich noch in einem frühen Entwicklungsstadium.

Spielen mit Web Bundles

So testen Sie ein Webpaket:

1. Gehen chrome://version um zu sehen, welche Version von Chrome Sie ausführen. Wenn Sie Version 80 oder höher ausführen, überspringen Sie den nächsten Schritt.

2. Herunterladen Chrome Canary Wenn Sie Chrome 80 oder höher nicht ausführen.

3. Geöffnet chrome://flags/#web-bundles.

4. Wähle aus Webpakete Flagge a aktiviert.

   

5. Starten Sie Chrome neu.

6. Ziehen Sie die todomvc.wbn Datei in Chrome, wenn es auf dem Desktop ist, oder tippen Sie in einer Dateimanager-App darauf, wenn es auf Android ist.

Alles funktioniert magisch.

Sie können auch andere Beispiel-Webpakete ausprobieren:

• web.dev.wbn ist eine Momentaufnahme der gesamten website.dev vom 15. Oktober 2019.
• proxx.wbn: PROXX ist ein Minesweeper-Klon, der offline funktioniert.
• squoosh.wbn:
  Squoosh ist ein praktisches und schnelles Tool zur Bildoptimierung, mit dem Sie verschiedene Bildkomprimierungsformate nebeneinander vergleichen und die Größenänderung und Formatkonvertierung unterstützen können.

Kommentar schreiben

Die Implementierung der Web Bundle-API in Chrome ist experimentell und unvollständig. Nicht alles funktioniert und kann abstürzen oder abstürzen. Deshalb steht es hinter einer experimentellen Flagge. Die API ist jedoch intelligent genug, um sie in Chrome zu erkunden. Das Feedback von Webentwicklern ist für das Entwerfen neuer APIs von entscheidender Bedeutung. Probieren Sie es aus und teilen Sie den Mitarbeitern von Web Bundles Ihre Meinung mit!

Vielen Dank

Wir möchten dem wunderbaren Chrome-Engineering-Team gratulieren.
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda y Jeffrey Yasskin Wer hat hart gearbeitet, um zur Spezifikation beizutragen, die Funktion in Canary aufzubauen und diesen Artikel zu lesen? Während des Standardisierungsprozesses Dan York hat geholfen, die IETF-Diskussion zu navigieren und auch Dave Cramer war eine großartige Ressource für das, was Verlage wirklich brauchen. Wir möchten uns auch bedanken Jason Miller für das erstaunliche preact-todomvc und ihre unermüdlichen Bemühungen, die Struktur zu verbessern.