Ostatnio toczy się wiele dyskusji na temat progresywnych aplikacji internetowych. Jest to nadal stosunkowo nowy model, ale stosowane przez niego zasady mogą w równym stopniu ulepszać aplikacje stworzone na platformie vanilla JS, React, Polymer, Angular lub dowolnej innej. W tym poście podsumowuję niektóre możliwości i podsumuję wybrane aplikacje, które pomogą Ci w rozpoczęciu korzystania z Twojej własnej progresywnej aplikacji internetowej.
Czym jest progresywna aplikacja internetowa?
Pamiętaj, że progresywne aplikacje internetowe działają wszędzie, ale są niezwykle przydatne w nowoczesnych przeglądarkach. Istotnym elementem modelu jest stopniowe ulepszanie.
Aaron Gustafson porównał stopniowe ulepszenie do orzeszkowego M&M. Orzeszki ziemne to Twoja treść, czekolada to warstwa prezentacji, a JavaScript – twarda powłoka cukierków. Ta warstwa może mieć różny kolor, a sposób działania zależy od możliwości przeglądarki, która z niej korzysta.
W cukierkowej powłoce można by znaleźć wiele funkcji progresywnych aplikacji internetowych. To rozwiązania, które łączą to, co najlepsze w internecie i aplikacjach. Są one przydatne dla użytkowników od pierwszej wizyty na karcie przeglądarki, bez konieczności instalacji.
W miarę jak użytkownik buduje relacje z tymi aplikacjami przez ich wielokrotne używanie, sprawia, że cukierkowa powłoka staje się jeszcze przyjemniejsza – ładuje się bardzo szybko przy wolnych połączeniach sieciowych (dzięki skrypcjom service worker), wysyła odpowiednie powiadomienia push i ma ikonę pierwszej klasy na ekranie głównym, która umożliwia wczytanie aplikacji jako pełnoekranowej aplikacji. Mogą też skorzystać z inteligentnych banerów zachęcających do zainstalowania aplikacji internetowej.
Progresywne aplikacje internetowe są
- Progresywne – aplikacje dostępne dla wszystkich użytkowników bez względu na wybór przeglądarki, ponieważ są tworzone z rozszerzonym ulepszeniem jako podstawowym najemcą.
- Elastyczne – pasuje do wszystkich formatów – komputerów, telefonów komórkowych, tabletów i innych urządzeń.
- Niezależne od połączenia – ulepszona dzięki mechanizmom Service Worker, które umożliwiają pracę w trybie offline lub w sieciach niskiej jakości.
- Jak w aplikacji – użyj modelu powłoki aplikacji, aby umożliwić nawigację i interakcje w stylu aplikacji.
- Odświeżony – zawsze aktualna dzięki procesowi aktualizacji skryptu service worker.
- Bezpieczeństwo – udostępnianie z wykorzystaniem protokołu TLS, aby zapobiegać przechwyceniu informacji i zapewnić, że treści nie zostały zmodyfikowane.
- Wykrywalne – można je rozpoznać jako „aplikacje” dzięki plikom manifestu W3C i zakresowi rejestracji skryptu service worker, który umożliwia wyszukiwarkom ich znalezienie.
- Zachęcanie do ponownego zaangażowania – ułatwia ponowne angażowanie użytkowników dzięki funkcjom takim jak powiadomienia push.
- Do zainstalowania – pozwól użytkownikom „zachować” najbardziej przydatne aplikacje na ekranie głównym bez konieczności kupowania w sklepie z aplikacjami.
- Możliwość łączenia – można je łatwo udostępniać za pomocą adresu URL i nie wymaga skomplikowanej instalacji.
Progresywne aplikacje internetowe nie są też dostępne wyłącznie w Chrome na Androida. Poniżej widzimy progresywną aplikację internetową Pokedex w Firefoksie na Androida (beta). Wczesną wersję funkcji Dodaj do ekranu głównego i buforowania mechanizmu Service Worker działają bez zarzutu.
Jedną z zalet tego modelu „progresywnego” jest to, że funkcje można stopniowo odblokowywać, w miarę jak dostawcy przeglądarek dostarczają im lepsze wsparcie. Progresywne aplikacje internetowe, takie jak Pokedex, także działają świetnie w Operze na Androidzie, choć w ich implementacji występują duże różnice:
Aby dowiedzieć się więcej o progresywnych aplikacjach internetowych, przeczytaj oryginalny post na blogu Alexa Russella. Paul Kinlan zaczął także bardzo przydatny tag Stack Overflow dotyczący progresywnych aplikacji internetowych.
Zasady
Plik manifestu aplikacji internetowej
Dzięki temu plikowi Twoja aplikacja internetowa może wyglądać bardziej naturalnie na ekranie głównym. Umożliwia uruchamianie aplikacji w trybie pełnoekranowym (bez paska adresu URL) oraz nad orientacją ekranu, a w najnowszych wersjach Chrome na Androida umożliwia określenie ekranu powitalnego i koloru motywu paska adresu. Służy on też do określania zestawu ikon według rozmiaru i gęstości, których ma dotyczyć wspomniana wcześniej ikona ekranu powitalnego i ekranu głównego.
Przykładowy plik manifestu znajdziesz w pakiecie Web Starter Kit i w przykładach przeglądarki Google Chrome. Bruce Lawson napisał generator plików manifestu, a Mounir Lamouri także napisał przydatny walidator pliku manifestu.
W moich projektach korzystam z narzędzia realfavicongenerator do generowania ikon o odpowiednim rozmiarze do pliku manifestu aplikacji internetowej oraz do użytku w systemie iOS, na komputerze itd. Moduł węzła favikony również może uzyskać podobne dane wyjściowe w ramach procesu kompilacji.
Przeglądarki oparte na Chromium (Chrome, Opera itp.) obsługują obecnie pliki manifestu aplikacji internetowych, a Firefox aktywnie rozwija ich obsługę, a przeglądarka Edge wyświetla je jako w trakcie rozważania. Firma WebKit/Safari nie opublikowała jeszcze publicznych sygnałów dotyczących zamiarów wdrożenia tej funkcji.
Więcej informacji znajdziesz w artykule Instalowanie aplikacji internetowych za pomocą pliku manifestu aplikacji internetowej w Chrome na Androida w sekcji Podstawy tworzenia witryn.
Baner „Dodaj do ekranu głównego”
W Chrome na Androida od jakiegoś czasu możesz dodawać witryny do ekranu głównego, ale w najnowszych wersjach obsługują też aktywne sugerowanie witryn przy użyciu natywnych banerów promujących instalację aplikacji internetowej.
Aby prośba o instalację aplikacji wyświetlała się, musisz:
- Ma prawidłowy plik manifestu aplikacji internetowej
- być udostępniany przez HTTPS (bezpłatny certyfikat znajdziesz tutaj: letsencrypt);
- mieć zarejestrowany mechanizm Service Worker,
- być odwiedzone dwukrotnie, co najmniej 5 minut między wizytami;
Dostępnych jest wiele przykładowych banerów zachęcających do zainstalowania aplikacji, obejmujących podstawowe banery i bardziej złożone zastosowania, takie jak wyświetlanie powiązanych aplikacji.
Skrypt service worker na potrzeby buforowania offline
Skrypt service worker to skrypt działający w tle, niezależny od strony internetowej. Reaguje na zdarzenia, w tym na żądania sieciowe wysyłane ze stron, które obsługuje. Skrypt service worker celowo ma krótki czas działania.
Wybudza się w chwili, gdy wystąpi zdarzenie, i działa tylko tak długo, jak jest potrzebne do przetworzenia go. Skrypt service worker pozwala używać interfejsu Cache API do buforowania zasobów i umożliwia użytkownikom korzystanie z trybu offline.
Skrypty service worker pozwalają korzystać z pamięci podręcznej w trybie offline, ale zapewniają też istotne korzyści w zakresie wydajności w postaci natychmiastowego wczytywania w przypadku kolejnych wizyt w witrynie lub aplikacji internetowej. Powłokę aplikacji można buforować, aby działała offline i wypełniała zawartość za pomocą JavaScriptu.
W Google Chrome znajdziesz obszerny zestaw przykładów mechanizmów Service Worker. Książka kucharska offline Jake'a Archibalda to obowiązkowa książka. Jeśli dopiero zaczynasz korzystać z usługi service worker, zachęcam do wypróbowania pierwszej aplikacji internetowej offline Paula Kinlana.
Nasz zespół utrzymuje też szereg narzędzi pomocniczych skryptu service worker i narzędzia do tworzenia narzędzi, które pomagają ograniczyć wysiłek wkładany w ich konfigurowanie. Są one wymienione w bibliotekach Service Worker. Oto 2 główne z nich:
- sw-precache: narzędzie służące do kompilowania, które generuje skrypt service worker przydatny do wstępnego buforowania powłoki aplikacji internetowej.
- sw-toolbox: biblioteka zapewniająca buforowanie środowiska wykonawczego dla rzadko używanych zasobów.
Jeff Posnick napisał krótki przewodnik na temat technologii sw-precache zatytułowany Offline-first, fast (Szybkie działanie offline), wykorzystując moduł sw-precache oraz ćwiczenie z programowania dotyczące tego samego narzędzia, które może Ci się przydać.
W przeglądarkach Chrome, Opera i Firefox wdrożyliśmy obsługę mechanizmu Service Worker, a Edge zapewnia pozytywne sygnały publiczne o zainteresowaniu tą funkcją. Safari krótko wspomniało zainteresowanie tym tematem w ramach planu 5-letniego proponowanego przez jednego z inżynierów.
Powiadomienia push zachęcające do ponownego zaangażowania
Możesz też tworzyć aplikacje internetowe, z których użytkownicy będą mogli korzystać poza kartą. Przeglądarkę można zamknąć. Nie muszą nawet aktywnie korzystać z aplikacji internetowej, aby wejść w interakcję. Ta funkcja wymaga skryptu service worker i pliku manifestu aplikacji internetowej, bazując na niektórych z podsumowanych wcześniej funkcji.
Interfejs Push API jest wdrożony w Chrome, w trakcie opracowywania w przeglądarce Firefox, a rozważany w przeglądarce Edge. Na razie nie ma publicznych sygnałów z przeglądarki Safari dotyczących zamiaru wdrożenia tej funkcji.
Powiadomienia push w otwartej sieci to wyczerpujące wprowadzenie do konfiguracji usługi push opracowane przez Matta Gaunta. Na stronie Podstawy tworzenia witryn znajdziesz też ćwiczenie z programowania dotyczące powiadomień push.
Michael van Ouwerkerk z zespołu Chrome także ma 6-minutowe wprowadzenie do trybu push, jeśli masz ochotę na korzystanie z filmów.
Nakładanie warstw zaawansowanych funkcji
Pamiętaj, że wrażenia użytkownika mogą być różne w zależności od przeglądarki, w której wyświetla się Twoja aplikacja. To Ty decydujesz.
W ten sposób można nałożyć na progresywną aplikację internetową dodatkowe funkcje, takie jak synchronizacja w tle (na potrzeby synchronizacji danych z serwerem nawet po zamknięciu aplikacji internetowej) oraz Web Bluetooth (do komunikacji z urządzeniami Bluetooth z aplikacji internetowej).
Funkcja One-shot Sync w tle została włączona w Chrome. Jake Archibald udostępnił film przedstawiający aplikację offline w Wikipedii oraz artykuł demonstrujący jej działanie. Francois Beaufort udostępnia też próbki Web Bluetooth, które mogą przetestować, aby wypróbować ten interfejs.
Dostosowana do platformy
Nic nie stoi na przeszkodzie, aby stosować się do powyższych zasad w przypadku swojej aplikacji lub platformy, na której tworzysz. Kilka innych zasad, o których warto pamiętać podczas tworzenia progresywnej aplikacji internetowej, to zorientowany na użytkownika model wydajności RAIL i animacje oparte na FLIP.
Mam nadzieję, że w 2016 roku będziemy obserwować rosnącą liczbę gotowych rozwiązań i projektów wyjściowych metodą ekologicznego wypieku, wspierając progresywne aplikacje internetowe jako główną funkcję. Do tego czasu przeszkoda, by dodać te funkcje do własnych aplikacji, nie jest bardzo duża. Warto ją wykonać.
Architektura
Modele progresywnej aplikacji internetowej różnią się od siebie na różnych poziomach, ale jedną z popularnych metod jest opracowanie architektury wokół powłoki aplikacji. Nie jest to absolutny wymóg, ale wiąże się z kilkoma korzyściami.
Architektura powłoki aplikacji zachęca do buforowania powłoki aplikacji (interfejsu), aby mogła ona działać offline i wypełniać zawartość za pomocą JavaScriptu. Dzięki temu podczas kolejnych wizyt możesz szybko zobaczyć na ekranie znaczące piksele bez połączenia z siecią, nawet jeśli Twoje treści w końcu pochodzą z tych źródeł. Wiąże się to ze znacznym wzrostem wydajności.
Jeremy Keith komentował ostatnio, że w tym modelu prawdopodobnie nie należy traktować renderowania po stronie serwera jako funkcji zastępczej, ale renderowanie po stronie klienta należy traktować jako ulepszenie. To słuszna opinia.
W modelu powłoki aplikacji należy korzystać z renderowania po stronie serwera w miarę możliwości, a renderowania progresywnego po stronie klienta należy używać jako ulepszenia w taki sam sposób, w jaki „ulepszamy” działanie mechanizmu Service Worker. Ostatecznie można do tego podejść na wiele sposobów.
Polecam zapoznać się z naszym opisem architektury i ocenić, jak podobne zasady można zastosować w swojej aplikacji i stosie.
Schematy od początku
Powłoka aplikacji
Repozytorium app-shell zawiera prawie pełną implementację architektury powłoki aplikacji. Ma backend napisany w języku Express.js, a frontend w języku ES2015.
Biorąc pod uwagę, że obejmuje on zarówno części modelu po stronie klienta, jak i serwera, i jest w nim sporo dużo, zapoznanie się z bazą kodu może trochę potrwać. W tej chwili jest to najbardziej wszechstronna, wszechstronna aplikacja internetowa. Następnym krokiem w tym projekcie będą Dokumenty.
Polimerowy zestaw startowy
Oficjalny punkt wyjścia dla aplikacji internetowych Polymer obsługuje następujące funkcje progresywnych aplikacji internetowych:
- Plik manifestu aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Pamięć podręczna offline instancji roboczej usługi z platynowymi elementami oprogramowania
- Powiadomienia push (wymagana konfiguracja ręczna) z platynowymi elementami Push.
Bieżąca wersja PSK nie obsługuje niektórych z bardziej zaawansowanych wzorców wydajności (np.modelu powłoki aplikacji czy wczytywania asynchronicznego), które można znaleźć w niektórych aplikacjach internetowych Progressive Polymer.
Spróbujemy przekuć te wzorce w klucz PSK w 2016 roku, ale początkowe eksperymenty związane z tym tematem można znaleźć w aplikacji Polymer Zuperkulblog autorstwa Roba Dodsona oraz w świetnym filmie Polymer Perf Patterns Erica Bidelmana.
Web Starter Kit
W naszym sprawdzonych projektach można wykorzystać następujące funkcje progresywnej aplikacji internetowej:
- Plik manifestu aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Wstępne zapisywanie w pamięci podręcznej instancji usług dzięki zastosowaniu sw-precache
Jeśli chcesz pracować z komponentem Vanilla JS/ES2015, ale nie potrafisz korzystać z narzędzia Polymer, zestaw Web Starter Kit może się przydać jako punkt odniesienia, który możesz wykorzystać do ponownego wykorzystania lub kradzieży kodu.
Progresywne aplikacje internetowe z platformami i bez nich
Wiele progresywnych aplikacji internetowych typu open source zostało już stworzonych przez członków społeczności zarówno z bibliotekami i platformami JS, jak i bez nich. Jeśli szukasz inspiracji, mogą Ci się przydać poniższe odpowiedzi. To są po prostu całkiem dobre aplikacje.
JavaScript waniliowy
- Aplikacja Voice Memos autorstwa Paula Lewisa opiera się na architekturze podobnej do architektury
app-shell(napisanie). - Wikipedia offline autorstwa Jake'a Archibalda (film)
- Air Horner, Paul Kinlan
- Stroik gitarowy Paula Lewisa (nagranie)
Polymer
- Zuperkulblog, autor: Rob Dodson (slajdy)
Dodaj reakcję
Wirtualny DOM
- Pokedex Nolana Lawsona – świetna progresywna aplikacja internetowa stosująca podejście „zrób wszystko w oprogramowaniu internetowym” w celu ułatwienia renderowania progresywnego. (zapis)
Angular.js
- Timey.in, autor: Kenneth Auchenberg – także używa
sw-precachedo wstępnego buforowania zasobów
Uwagi końcowe
Jak wspomnieliśmy, progresywne aplikacje internetowe są wciąż dopiero w początkach, ale warto wypróbować metodologie stojące za nimi i sprawdzić, jak dobrze sprawdzą się w Twoich aplikacjach internetowych.
Paul Kinlan obecnie planuje przygotowanie wskazówek w podstawach tworzenia witryn dotyczących progresywnych aplikacji internetowych. Jeśli chcesz przekazać nam jakiś temat, który warto omówić, dodaj komentarz w wątku.
Więcej informacji
- Progresywne aplikacje internetowe: ukrycie kart bez utraty duszy
- Dlaczego progresywne aplikacje internetowe są przyszłością tworzenia stron internetowych
- Progresywne aplikacje internetowe: gotowe do premiery
- Tworzenie aplikacji progresywnej przy użyciu ServiceWorker
- Progresywne aplikacje internetowe to przyszłość
- Progresywna aplikacja internetowa: nowy sposób korzystania z urządzeń mobilnych
- Przedstawiamy Pokedex.org – progresywną aplikację internetową dla fanów Pokémonów
- Podsumowanie konferencji Chrome Developer Summit: progresywne aplikacje internetowe