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 otwiera nowe przypadki użycia w internecie. Wyobraź sobie świat, w którym:

Twórz własne treści i rozpowszechniaj je na różne sposoby bez ograniczeń w sieci.
Udostępnianie znajomym aplikacji internetowej lub treści internetowych przez Bluetooth lub Wi-Fi Direct
Przenoś witrynę na pendrive’ie lub hostuj ją w swojej sieci lokalnej.

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

Zgodność z przeglądarką

Interfejs Web Bundles API jest obecnie obsługiwany tylko w przeglądarkach opartych na Chromium, które mają włączoną flagę eksperymentalną.

Przedstawiamy interfejs Web Bundles API

Web Bundle to format pliku służący do hermetyzacji co najmniej 1 zasobu HTTP w pojedynczym pliku. Może zawierać co najmniej 1 plik HTML, pliki JavaScript, obrazy lub arkusze stylów.

Pakiety internetowe, bardziej formalnie znane jako zbiorzone wymiany HTTP, są częścią propozycji pakowania stron internetowych.

Ilustracja pokazująca, że pakiet internetowy to zbiór 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ą mieć podpisy potwierdzające ich własność. Dzięki sygnaturom przeglądarki mogą zrozumieć i zweryfikować, skąd pochodzą poszczególne zasoby, i traktują je jako pochodzące z ich prawdziwego źródła. Jest to podobne do sposobu obsługi podpisanych wymian HTTP, czyli funkcji do 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

Konkretnie pakiet internetowy to plik CBOR z rozszerzeniem .wbn (zgodnie z konwencją), który pakuje zasoby HTTP w formacie binarnym i jest udostępniany z typem MIME application/webbundle. Więcej informacji na ten temat znajdziesz w sekcji Struktura najwyższego poziomu w projekcie specyfikacji.

Pakiety internetowe mają wiele unikalnych funkcji:

Zawiera wiele stron, co umożliwia zgrupowanie całej witryny w jednym pliku
Włącza wykonywalny JavaScript (w przeciwieństwie do MHTML)
Używa wariantów HTTP do negocjowania treści, co umożliwia obsługę międzynarodową za pomocą nagłówka Accept-Language nawet wtedy, gdy pakiet jest używany offline.
wczytuje się w kontekście pochodzenia, gdy jest podpisany kryptograficznie przez wydawcę;
Wczytuje się niemal natychmiast, gdy działa lokalnie.

Te funkcje otwierają wiele scenariuszy. Jednym z częstych scenariuszy jest możliwość stworzenia samodzielnej aplikacji internetowej, którą można łatwo udostępniać i używać bez połączenia z internetem. Załóżmy na przykład, że lecisz ze znajomym w samolocie z Tokio do San Francisco. Nie podoba Ci się rozrywka na pokładzie. Twój znajomy gra w ciekawą grę internetową o nazwie PROXX i mówi, że przed wejściem na pokład samolotu pobrał grę jako pakiet internetowy. Działa bez zarzutu offline. Zanim pojawiły się pakiety internetowe, na tym kończyła się zabawa. Trzeba było na zmianę grać na urządzeniu znajomego lub znaleźć coś innego, czym można było zająć czas. Dzięki pakietom internetowym możesz teraz:

Poproś znajomego o udostępnienie pliku .wbn z grą. Plik można na przykład łatwo udostępnić peer-to-peer za pomocą aplikacji do udostępniania plików.
Otwórz plik .wbn w przeglądarce obsługującej pakiety internetowe.
Zacznij grać na swoim urządzeniu i spróbuj pobić rekord znajomego.

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

Jak widzisz, pakiet internetowy może zawierać wszystkie zasoby, dzięki czemu działa offline i wczytuje się natychmiast.

Tworzenie pakietów internetowych

Interfejs wiersza poleceń go/bundle to obecnie najprostszy sposób na łączenie witryn. go/bundle to implementacja referencyjna specyfikacji pakietów internetowych utworzona w Go.

Zainstaluj Go.

Zainstaluj aplikację go/bundle.

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

Sklonuj repozytorium preact-todomvc i utwórz aplikację internetową, aby przygotować się do złączenia zasobów.
```
git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build
```

Aby utworzyć plik .wbn, użyj polecenia gen-bundle.

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

Gratulacje! TodoMVC jest teraz pakietem internetowym.

Dostępne są też inne opcje grupowania, a wkrótce pojawią się kolejne. Interfejs wiersza poleceń go/bundle umożliwia tworzenie pakietu internetowego za pomocą pliku HAR lub niestandardowej listy adresów URL zasobów. Aby dowiedzieć się więcej o go/bundle, odwiedź repozytorium GitHub. Możesz też wypróbować eksperymentalny moduł Node.js do tworzenia pakietów: wbn. Pamiętaj, że wbn jest nadal w fazie wczesnego rozwoju.

Testowanie pakietów internetowych

Aby wypróbować pakiet Web Bundle:

Aby sprawdzić, jaką masz wersję Chrome, otwórz about://version. Jeśli używasz wersji 80 lub nowszej, pomiń następny krok.
Jeśli nie korzystasz z Chrome w wersji 80 lub nowszej, pobierz Chrome Canary.
Otwórz pokój about://flags/#web-bundles.
Ustaw flagę Web Bundles na Enabled (Włączone).

Włączanie pakietów internetowych w: about://flags
Uruchom ponownie Chrome.
Jeśli korzystasz z komputera, przeciągnij plik todomvc.wbn i upuść go w Chrome. Jeśli używasz urządzenia z Androidem, kliknij go w aplikacji do zarządzania plikami.

Wszystko działa jak za dotknięciem magicznej różdżki.

Implementacja usługi TodoMVC w wersji Preact, która działa offline jako pakiet internetowy

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

web.dev.wbn to snapshot całej witryny web.dev z 15 października 2019 r.
proxx.wbn: PROXX to klona gry Minesweeper, która działa offline.
squoosh.wbn Squoosh to wygodne i szybkie narzędzie do optymalizacji obrazów, które pozwala bezpośrednio porównywać różne formaty kompresji obrazów oraz zmieniać rozmiar i format konwersji.

Prześlij opinię

Implementacja interfejsu Web Bundle API w Chrome jest eksperymentalna i niekompletna. Nie wszystko działa i może dojść do błędu lub awarii. Dlatego jest to flaga eksperymentalna. Interfejs API jest już gotowy, więc możesz go poznać w Chrome. Opinie programistów stron internetowych są kluczowe dla projektowania nowych interfejsów API, dlatego wypróbuj te pakiety i przekaż swoje opinie osobom pracującym nad Web Bundles.

Prześlij ogólną opinię na adres webpackage-dev@chromium.org.
Jeśli chcesz podzielić się opinią na temat specyfikacji, otwórz 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 zauważysz jakiekolwiek problemy z działaniem Chrome, wejdź na https://crbug.com/new i zgłoś błąd w Chromium.
Zapraszamy też do udziału w dyskusji na temat specyfikacji i narzędzi. Aby dołączyć, otwórz repozytorium specyfikacji.

Podziękowania

Dziękujemy wspaniałemu zespołowi inżynierów Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda i Jeffrey Yasskin, za ciężką pracę nad specyfikacją, tworzeniem funkcji w wersji Canary i sprawdzaniem tego artykułu. W procesie standaryzacyjnym Dan York brał udział w dyskusji na temat IETF, a Dave Cramer był doskonałym źródłem informacji o tym, czego tak naprawdę potrzebują wydawcy. Dziękujemy też Jasonowi Millerowi za wspaniały pakiet preact-todomvc i za nieustanne dążenie do ulepszania tej platformy.