Erste Schritte mit Web Bundles

Websites als einzelne Datei über Bluetooth freigeben und offline im Kontext des Ursprungsservers ausführen

Yusuke Utsunomiya
Yusuke Utsunomiya
X Startseite
Kenji Baheux
Kenji Baheux

Vollständige Website als einzelne Datei bündeln und freigeben neue Anwendungsfälle für das Web eröffnet. Stellen Sie sich eine Welt vor, in der Sie:

  • Erstellen Sie Ihre eigenen Inhalte und verbreiten Sie sie auf verschiedene Arten, ohne auf das Netzwerk beschränkt
  • Web-Apps oder Webinhalte über Bluetooth oder Wi-Fi Direct mit Freunden teilen
  • Speichern Sie Ihre Website auf Ihrem eigenen USB-Gerät oder hosten Sie sie sogar in Ihrem eigenen lokalen Netzwerk.

Die Web Bundles API ist ein innovativer Vorschlag, mit dem Sie all dies umsetzen können.

Browserkompatibilität

Die Web Bundles API wird derzeit nur von Chromium-basierten Browsern unterstützt, die ein experimentelles Flag.

Jetzt neu: Web Bundles API

Ein Web Bundle ist ein Dateiformat zum Kapseln einer oder mehrerer HTTP-Ressourcen in einem in einer einzelnen Datei. Sie kann eine oder mehrere HTML-, JavaScript-Dateien, Bilder oder Stylesheets verwenden.

Web Bundles, besser bekannt als Bundled HTTP Exchanges, sind Teil des Web Packaging einen Vorschlag machen.

<ph type="x-smartling-placeholder">
</ph> Abbildung, die zeigt, dass ein Web Bundle eine Sammlung von Webressourcen ist. <ph type="x-smartling-placeholder">
</ph> Funktionsweise von Web Bundles

HTTP-Ressourcen in einem Web Bundle werden durch Anfrage-URLs indexiert und können optional Signaturen, die die Ressourcen belegen. Signaturen ermöglichen es Browsern, zu verstehen und zu überprüfen, woher jede Ressource stammt, und behandelt jede als kommend von ihrem eigentlichen Ursprung entfernt. Das funktioniert ähnlich wie bei Signed HTTP Exchanges, eine Funktion zum Signieren einer einzelnen HTTP-Ressource behandelt werden.

In diesem Artikel erfahren Sie, was ein Web Bundle ist und wie Sie es verwenden.

Erläuterung von Web Bundles

Um genau zu sein, ist ein Web Bundle eine CBOR-Datei mit der Erweiterung .wbn (konventionell). Verpackt HTTP-Ressourcen in ein Binärformat und wird mit dem MIME-Wert application/webbundle bereitgestellt. Typ. Weitere Informationen hierzu finden Sie im Abschnitt Struktur der obersten Ebene. des Spezifikationsentwurfs an.

Web Bundles haben mehrere einzigartige Funktionen:

  • Kapselt mehrere Seiten, wodurch eine vollständige Website in einer einzigen Datei gebündelt werden kann
  • Aktiviert ausführbares JavaScript, im Gegensatz zu MHTML
  • Hierfür werden HTTP-Varianten verwendet. Verhandeln von Inhalten, die eine Internationalisierung mit dem Accept-Language ermöglicht Header, auch wenn das Bundle offline verwendet wird
  • Ladevorgänge im Kontext ihres Ursprungs, wenn sie vom Verlag oder Webpublisher kryptografisch signiert wurden
  • Bei lokaler Bereitstellung nahezu sofort geladen

Bei diesen Funktionen werden mehrere Szenarien geöffnet. Ein häufiges Szenario ist die Fähigkeit, eine eigenständige Webanwendung zu erstellen, die einfach freigegeben und verwendet werden kann eine Internetverbindung. Angenommen, Sie sind in einem Flugzeug von Tokio nach San Francisco mit Ihre Freundin oder Ihren Freund. Die Unterhaltung im Flugzeug gefällt Ihnen nicht. Ihr Freund spielt eine interessante Webspiel namens PROXX an und teilt Ihnen mit, dass er es Bündeln Sie vor dem Einsteigen ins Flugzeug. Offline funktioniert problemlos. Vor dem Web In Paketen endet die Geschichte und ihr müsst euch abwechseln. das Spiel auf dem Gerät deines Freundes spielen, oder etwas anderes suchen, . Web Bundles bieten Ihnen jetzt folgende Möglichkeiten:

  1. Bitte deinen Freund, die .wbn-Datei des Spiels freizugeben. Zum Beispiel könnte die Datei können ganz einfach über eine Filesharing-App Peer-to-Peer-geteilt werden.
  2. Öffne die Datei .wbn in einem Browser, der Web Bundles unterstützt.
  3. Starte das Spiel auf deinem eigenen Gerät und versuche, das High deiner Freunde zu übertreffen Punkte.

In diesem Video wird dieses Szenario erklärt.

Wie Sie sehen, kann ein Web Bundle jede Ressource enthalten, sodass es offline funktioniert. und laden sofort.

Web Bundles erstellen

Die go/bundle-Befehlszeile ist derzeit die ist die einfachste Methode, eine Website zu bündeln. go/bundle ist eine Referenzimplementierung der Web Bundles in Go erstellte Spezifikation.

  1. Installieren Sie Go.

  2. Installieren Sie go/bundle.

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

  3. preact-todomvc-Repository klonen und erstellen der Webanwendung, um die Ressourcen zu bündeln.

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

  4. Verwenden Sie den Befehl gen-bundle, um eine .wbn-Datei zu erstellen.

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

Glückwunsch! TodoMVC ist jetzt ein Web Bundle.

Es sind weitere Optionen für Gruppierungen verfügbar und es werden noch weitere folgen. Die go/bundle-Befehlszeile ermöglicht die Erstellung eines Web Bundles mit einer HAR-Datei oder einer benutzerdefinierten Ressourcenliste URLs. Weitere Informationen finden Sie im GitHub-Repository über go/bundle. Sie können auch das experimentelle Node.js-Modul für Bündelung, wbn wbn befindet sich noch in der Anfangsphase Entwicklung.

Web Bundles ausprobieren

So testen Sie ein Web Bundle:

  1. Gehe zu about://version, um zu sehen, welche Chrome-Version du verwendest. Wenn Sie Version 80 oder höher haben, überspringen Sie den nächsten Schritt.
  2. Falls Sie nicht Chrome 80 verwenden, laden Sie Chrome Canary herunter. oder später.
  3. Öffnen Sie about://flags/#web-bundles.

  4. Setzen Sie das Flag Web Bundles auf Enabled (Aktiviert).

    <ph type="x-smartling-placeholder">
    </ph> Screenshot von about://flags <ph type="x-smartling-placeholder">
    </ph> Web Bundles in about://flags aktivieren

  5. Starten Sie Chrome neu.

  6. Ziehen Sie die Datei todomvc.wbn per Drag-and-drop in Chrome, wenn Sie einen Desktop verwenden, oder tippen Sie in einer Datei auf die Datei unter Android verwalten.

Alles wie von Zauberhand.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> Die Preact-Implementierung von TodoMVC, die offline als Web-Bundle funktioniert

Sie können auch andere Beispiel-Websets ausprobieren:

  • web.dev.wbn ist eine Momentaufnahme der gesamten web.dev-Website 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, ermöglicht direkte Vergleiche verschiedener Bildkomprimierungsformate mit Unterstützung für Größenanpassung und Formatkonvertierungen.

Feedback geben

Die Web Bundle API-Implementierung in Chrome ist experimentell und unvollständig. Nicht alles funktioniert. Das Gerät kann ausfallen oder abstürzen. Deshalb hinter dem Flag „Experimental“. Aber die API ist bereit genug, um sie in Chrome auszuprobieren. Das Feedback von Webentwicklern ist entscheidend für das Design von neue APIs, probieren Sie es also bitte aus und teilen Sie den Mitarbeitern, die an Web Bundles arbeiten, Ihre Meinung mit.

Danksagungen

Wir möchten uns herzlich an das Chrome-Entwicklerteam bedanken, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda und Jeffrey Yasskin, die hart daran gearbeitet haben, Spezifikation, Entwicklung der Canary-Funktion und die Wiederholung dieses Artikels. Während der Standardisierungsprozess Dan York dabei geholfen, IETF-Diskussion und auch Dave Cramer waren ein eine großartige Ressource zu dem, was Verlage und Webpublisher brauchen. Wir möchten uns auch bei Jason Miller für den tollen Beitrag und seine um das Framework besser zu machen.