Ta strona została przetłumaczona przez Cloud Translation API.

Pierwsze kroki z pakietami internetowymi

Udostępniaj strony internetowe jako jeden plik przez Bluetooth i uruchamiaj je offline w kontekście źródła

Yusuke Utsunomiya

Kenji Baheux

Łączenie całej witryny jako jednego pliku i udostępnianie jej otwierają nowe przypadki użycia w internecie. Wyobraź sobie świat, w którym możesz:

Twórz własne treści i rozpowszechniaj je na różne sposoby bez ograniczona do sieci
Udostępniaj znajomym aplikację internetową lub treści internetowe przez Bluetooth lub Wi-Fi Direct
Przenieś witrynę na własnym nośniku USB lub hostuj ją we własnej sieci lokalnej

Interfejs Web Bundle API to niesamowita oferta, która pozwoli Ci to zrobić.

Zgodność z przeglądarką

Interfejs Web Bundle API jest obecnie obsługiwany tylko w przeglądarkach opartych na Chromium flagę eksperymentalną.

Przedstawiamy interfejs Web Bundle API

Web Bundle to format pliku służący do hermetyzacji co najmniej jednego zasobu HTTP w w jednym pliku. Może zawierać jeden lub więcej plików HTML, JavaScript, obrazów i arkuszy stylów.

pakiety internetowe, czyli tzw. powiązane giełdy HTTP, wchodzą w skład Web Packaging oferty pakietowej.

Ilustracja pokazująca, że pakiet Web Bundle jest zbiorem zasobów internetowych. — Jak działają pakiety internetowe

Zasoby HTTP w pakiecie Web Bundle są indeksowane według adresów URL żądań i opcjonalnie mogą muszą mieć podpisy, które poświadczają zasoby. Podpisy umożliwiają przeglądarkom rozumieją i sprawdzają, skąd pochodzą poszczególne zasoby, oraz traktuje je jako pochodzące od prawdziwego pochodzenia. Działa to podobnie jak w przypadku technologii Signed HTTP Exchange, funkcję podpisywania pojedynczego zasobu HTTP.

Z tego artykułu dowiesz się, czym jest pakiet Web Bundle i jak z niego korzystać.

Omówienie pakietów internetowych

Dokładniej mówiąc, pakiet Web Bundle to plik CBOR z rozszerzeniem .wbn (zgodnie z konwencją), pakuje zasoby HTTP do formatu binarnego i jest udostępniane z protokołem MIME application/webbundle typu. Więcej informacji znajdziesz w strukturze najwyższego poziomu. w wersji roboczej specyfikacji.

Pakiety internetowe mają wiele unikalnych cech:

Obejmuje wiele stron, co pozwala połączyć całą witrynę w jednym pliku.
Włącza wykonywalny JavaScript (w przeciwieństwie do MHTML)
Używa do tego wersji HTTP negocjacje treści, które umożliwiają internacjonalizację przy użyciu Accept-Language nagłówek nawet wtedy, gdy pakiet jest używany offline
Wczytuje się w kontekście swojego pochodzenia, jeśli jest podpisane kryptograficznie przez wydawcę
Wczytuje się niemal natychmiast, gdy działa lokalnie.

Te funkcje można zastosować na wiele scenariuszy. Jednym z częstych scenariuszy jest możliwość stworzyć autonomiczną aplikację internetową, którą można łatwo udostępniać i używać bez i połączenia z internetem. Na przykład powiedzmy, że lecisz samolotem z Tokio do San Francisco z do znajomych. Nie lubisz rozrywki w samolocie. Znajomy gra w interesujący gry internetowej PROXX z informacją, że pobrali ją jako stronę internetową. Przygotuj się przed wejściem na pokład samolotu. Działa bez problemu offline. Przed internetem Koniec opowieści i trzeba się rozkręcać. grasz w grę na urządzeniu znajomego lub znajdź coś innego, co pozwoli na zaliczenie testu obecnie się znajdujesz. Jednak dzięki pakietom internetowym możesz teraz wykonywać te czynności:

Poproś znajomego o udostępnienie pliku .wbn gry. Na przykład plik można łatwo udostępnić peer-to-peer za pomocą aplikacji do udostępniania plików.
Otwórz plik .wbn w przeglądarce, która obsługuje pakiety internetowe.
Zacznij grać w grę na własnym urządzeniu i postaraj się pobić rekord znajomego Jak.

Oto film, który wyjaśnia ten scenariusz.

Jak widać, pakiet Web Bundle może zawierać wszystkie zasoby, dzięki czemu może działać offline i od razu się wczytują.

Tworzenie pakietów internetowych

Interfejs wiersza poleceń go/bundle jest obecnie Najprostszy sposób na połączenie witryny w pakiety. go/bundle jest referencyjną implementacją pakietów internetowych specyfikacji w Go.

Zainstaluj Go.

Zainstaluj aplikację go/bundle.

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

Klonowanie i kompilacja repozytorium preact-todomvc aby przygotować się do użycia zasobów w pakiecie.

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

Utwórz plik .wbn za pomocą polecenia gen-bundle.

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

Gratulacje! TodoMVC to teraz pakiet Web Bundle.

Dostępne są też inne opcje grupowania, a wkrótce pojawią się kolejne. interfejs wiersza poleceń go/bundle umożliwia utworzenie pakietu Web Bundle za pomocą pliku HAR lub niestandardowej listy zasobów Adresy URL. Aby dowiedzieć się więcej, odwiedź repozytorium GitHub. o go/bundle. Możesz też wypróbować eksperymentalny moduł Node.js do grupowania, wbn Zwróć uwagę, że usługa wbn jest nadal we wczesnej fazie rozwoju w Google Cloud.

Korzystanie z pakietów internetowych

Aby wypróbować pakiet Web Bundle:

Wejdź na about://version, by sprawdzić, jaką masz wersję Chrome. Jeśli korzystasz z wersji 80 lub więcej, pomiń następny krok.
Jeśli nie korzystasz z Chrome 80, pobierz Chrome Canary. czy później.
Otwórz pokój about://flags/#web-bundles.
Ustaw flagę Web Bundle na Enabled (Włączone).

Włączanie pakietów internetowych w: about://flags

.
Uruchom ponownie Chrome.
Przeciągnij plik todomvc.wbn i upuść go w Chrome na komputerze lub kliknij go w pliku. na urządzeniach z Androidem.

Wszystko magicznie działa.

Implementacja TodoMVC w wersji Preact w trybie offline jako pakiet internetowy

Możesz też wypróbować inne przykładowe pakiety internetowe:

web.dev.wbn to przegląd całej witryny web.dev z 15 października 2019 r.
proxx.wbn: PROXX to klon Sapera, który działa offline.
squoosh.wbn: Squoosh to wygodne i szybkie narzędzie do optymalizacji obrazów, umożliwia bezpośrednie porównywanie różnych formatów kompresji obrazu z obsługą zmianę rozmiaru i formatowanie konwersji.

Prześlij opinię

Implementacja interfejsu Web Bundle API w Chrome jest eksperymentalna i niekompletna. Nie wszystko działa i może ulec awarii. Dlatego znajduje się za flagą eksperymentu. Interfejs API jest już gotowy, więc możesz go poznać w Chrome. Opinie twórców stron internetowych mają kluczowe znaczenie przy projektowaniu nowych interfejsów API, więc warto je wypróbować i podzielić się opinią z osobami pracującymi nad pakietami internetowymi.

Wyślij ogólną opinię do webpackage-dev@chromium.org.
Jeśli masz opinię na temat specyfikacji, https://github.com/WICG/webpackage/issues/new , aby zgłosić nowy problem ze specyfikacją, lub wyślij e-maila na adres wpack@ietf.org.
Jeśli znajdziesz problemy z działaniem Chrome, wejdź na https://crbug.com/new, by zgłosić błąd w Chromium.
Wkład w dyskusję na temat specyfikacji i narzędzi jest również witamy. Aby wziąć udział, otwórz repozytorium specyfikacji.

Podziękowania

Dziękujemy wspaniały zespół inżynierów Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda i Jeffrey Yasskin, którzy ciężko pracowali, przyczyniając się , tworząc tę funkcję w wersji Canary i zapoznając się z tym artykułem. W trakcie proces standaryzacji, Dan York, pomógł opracować oraz dyskusją IETF, a także Dave Cramer w doskonałym zasobie informacji o potrzebach wydawców. Pragniemy również podziękować Jasonowi Millerowi za niezwykłe wzięcie udziału w Prokatoli i jego niespokojny wysiłek włożony w ulepszanie platformy.