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

Twitter Strona główna

Kenji Baheux

Zgrupowanie całej witryny w jednym pliku i udostępnienie jej otwiera 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, nie ograniczając się do sieci.
Udostępnianie aplikacji lub treści z internetu znajomym przez Bluetooth lub Wi-Fi Direct
Noś swoją witrynę na własnym dysku USB lub nawet hostuj ją we własnej sieci lokalnej

Interfejs Web Bundle API to najnowocześniejsze rozwiązanie, które pozwala Ci na to wszystko.

Zgodność z przeglądarką

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

Przedstawiamy interfejs Web Bundle API

Pakiet internetowy to format pliku służący do umieszczania w jednym pliku danych o zasobach HTTP. Może zawierać jeden lub więcej plików HTML, JavaScript, obrazów lub arkuszy stylów.

Pakiety internetowe, inaczej nazywane pakietami Exchange HTTP, wchodzą w skład oferty Pakietów 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, które potwierdzają działanie zasobów. Podpisy umożliwiają przeglądarkom rozpoznawanie i weryfikowanie pochodzenia poszczególnych zasobów oraz traktowanie każdego z nich jako pochodzącego z prawdziwego pochodzenia. Ta zasada jest podobna do obsługi podpisanych giełd HTTP, funkcji służącej do podpisywania pojedynczego zasobu HTTP.

W tym artykule opisujemy, czym jest pakiet internetowy i jak z niego korzystać.

Omówienie pakietów internetowych

Pakiet Web Bundle to plik CBOR z rozszerzeniem .wbn (zgodnie z konwencją), który tworzy pakiet zasobów HTTP do formatu binarnego i jest udostępniany z typem MIME application/webbundle. Więcej informacji na ten temat znajdziesz w sekcji Struktura najwyższego poziomu w wersji roboczej specyfikacji.

Pakiety internetowe mają wiele unikalnych funkcji:

Zawiera wiele stron, co umożliwia zgrupowanie całej witryny w jeden plik.
Włącza wykonywalny kod JavaScript, w przeciwieństwie do MHTML
Wykorzystuje warianty HTTP do negocjowania treści, co umożliwia internacjonalizację za pomocą nagłówka Accept-Language, nawet jeśli pakiet jest używany offline.
Ładuje się w kontekście swojego pochodzenia po podpisaniu kryptograficznie przez wydawcę
Ładuje się niemal natychmiast, gdy jest wyświetlany lokalnie

Te funkcje przydają się w różnych scenariuszach. Jednym z typowych scenariuszy jest tworzenie samodzielnej aplikacji internetowej, którą można łatwo udostępnić i korzystać z niej bez połączenia z internetem. Załóżmy na przykład, że jedziesz razem ze znajomymi w samolocie z Tokio do San Francisco. Nie lubisz rozrywki podczas lotu. Twój znajomy gra w ciekawą grę internetową PROXX i mówi Ci, że przed wejściem na pokład samolotu pobrał ją jako pakiet internetowy. Działa bez problemów offline. Przed pakietami Web Bundles historia się kończyła i trzeba było grać w grę na zmianę na urządzeniu znajomego lub znaleźć coś innego, co miło spędza czas. Oto, co możesz teraz zrobić dzięki pakietom internetowym:

Poproś znajomego o udostępnienie pliku .wbn z grą. Taki plik można na przykład łatwo udostępnić metodą 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ć na własnym urządzeniu i spróbuj pobić rekord znajomego.

Oto film, który wyjaśnia tę sytuację.

Jak widać, pakiet internetowy może zawierać wszystkie zasoby, dzięki czemu może on działać w trybie offline i od razu się ładować.

Tworzenie pakietów internetowych

Interfejs wiersza poleceń go/bundle jest obecnie najprostszym sposobem łączenia witryny w pakiety. go/bundle to referencyjna implementacja specyfikacji pakietów internetowych utworzonej w Go.

Zainstaluj Go

Zainstaluj aplikację go/bundle.

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

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

Do utworzenia pliku .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 to teraz pakiet internetowy.

Dostępne są też inne opcje grupowania, a wkrótce wprowadzimy kolejne. Interfejs wiersza poleceń go/bundle pozwala utworzyć pakiet internetowy przy użyciu pliku HAR lub niestandardowej listy adresów URL zasobów. Odwiedź repozytorium GitHub, aby dowiedzieć się więcej o funkcji go/bundle. Możesz też wypróbować eksperymentalny moduł Node.js do grupowania: wbn. Pamiętaj, że usługa wbn jest wciąż na wczesnym etapie rozwoju.

Różne pakiety internetowe

Aby wypróbować pakiet internetowy:

Otwórz about://version, aby sprawdzić, jakiej wersji Chrome używasz. 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ę Pakiety internetowe na Włączone.

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

Wszystko działa magicznie.

Implementacja wstępnego działania TodoMVC w trybie offline

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

web.dev.wbn to zrzut całej witryny web.dev (stan na 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, które umożliwia bezpośrednie porównanie różnych formatów kompresji obrazów, a także obsługę zmiany rozmiaru i konwersji formatu.

Prześlij opinię

Implementacja interfejsu Web Bundle API w Chrome jest w fazie eksperymentalnej i nie została ukończona. Nie wszystko działa, może też ulec awarii lub awarii. To dlatego kryje się za tym eksperymentem. Interfejs API jest jednak gotowy i możesz zacząć go używać w Chrome. Opinie programistów stron internetowych mają kluczowe znaczenie dla wyglądu nowych interfejsów API, więc warto je wypróbować i powiedzieć osobom pracującym nad pakietami Web Bundle, co o nich myślisz.

Wyślij ogólną opinię na adres webpackage-dev@chromium.org.
Jeśli chcesz przesłać opinię na temat specyfikacji, odwiedź stronę 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 problemy z działaniem Chrome, wejdź na https://crbug.com/new, by zgłosić błąd Chromium.
Zachęcamy też do udziału w dyskusjach na temat specyfikacji i tworzeniu narzędzi. Jeśli chcesz wziąć udział w tym wydarzeniu, odwiedź repozytorium ze specyfikacją.

Podziękowania

Chcemy szczerze podziękować niesamowitemu zespołowi inżynierów Chrome: Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda i Jeffreya Yasskina, którzy pracowali nad specyfikacją, rozbudowując tę funkcję w wersji Canary i sprawdzając ten artykuł. W procesie standaryzacji Dan York pomógł w przeprowadzeniu dyskusji w ramach IETF, a także Dave Cramer był doskonałym źródłem informacji na temat tego, czego wydawcy faktycznie potrzebują. Chcemy również podziękować Jasonowi Millerowi za wspaniałą preakcję todomvc i jego nieustające wysiłki w zakresie ulepszania platformy.