Ostatnio toczy się dyskusja na temat progresywnych aplikacji internetowych. Choć są one stosunkowo nowym modelem, ich zasady mogą w równym stopniu ulepszać aplikacje tworzone za pomocą języka vanilla JS, React, Polymer, Angular czy dowolnej innej platformy. W tym poście podsumuję niektóre opcje i aplikacje, które ułatwią Ci rozpoczęcie pracy z progresywną aplikacją internetową.
Co to jest progresywna aplikacja internetowa?
Warto pamiętać, że progresywne aplikacje internetowe działają wszędzie, ale w nowoczesnych przeglądarkach są doskonałe. Stopniowe ulepszanie to podstawa modelu.
Aaron Gustafson porównał progresywne ulepszenie do orzecha ziemnego M&M. Orzeszek ziemny to Twoja treść, czekolada to warstwa prezentacji, a JavaScript to twarda skorupa cukierka. Ta warstwa może mieć różne kolory, a wygląd może być różny w zależności od możliwości przeglądarki, która z niej korzysta.
To miejsce, w którym może działać wiele funkcji progresywnej aplikacji internetowej. Są to funkcje, które łączą to, co najlepsze w internecie i to, co najlepsze w aplikacjach. Są one przydatne dla użytkowników już od pierwszej wizyty w danej karcie przeglądarki, bez konieczności instalacji.
W miarę jak użytkownik będzie nawiązywał z nimi relację przez wielokrotne używanie aplikacji, jej cukierkowa skorupa jest jeszcze przyjemniejsza – w przypadku wolnych połączeń sieciowych bardzo szybko się wczytuje (dzięki skryptowi service worker), wysyła odpowiednie powiadomienia push i ma na ekranie głównym ikonę najwyższej klasy, która może je wczytywać w trybie pełnoekranowym. Mogą też korzystać z inteligentnych banerów zachęcających do zainstalowania aplikacji internetowych.
Progresywne aplikacje internetowe są
- Progresywne – sprawdzają się w przypadku każdego użytkownika niezależnie od wyboru przeglądarki, ponieważ są one udoskonalane stopniowo jako główny najemca.
- Elastyczne – pasują do wszystkich formatów – komputerów, telefonów komórkowych, tabletów i innych urządzeń.
- Niezależna od połączenia – ulepszona dzięki mechanizmom service worker do pracy w trybie offline lub w sieciach niskiej jakości.
- Jak z aplikacji – wykorzystuje model powłoki aplikacji, aby zapewnić obsługę nawigacji i interakcje w stylu aplikacji.
- Nowy – jest zawsze aktualny dzięki procesowi aktualizacji skryptu service worker.
- Bezpieczeństwo – wyświetlane przy użyciu protokołu TLS, aby zapobiec przechwyceniu danych i mieć pewność, że nikt nie naruszył ich danych.
- Wykrywalne – umożliwiają wyszukiwarkom znajdowanie aplikacji dzięki plikom manifestu W3C i zakresowi rejestracji mechanizmów Service Worker.
- Zachęcanie do ponownego zaangażowania – ułatwiaj ponowne zaangażowanie użytkowników dzięki funkcjom takim jak powiadomienia push.
- Możliwe do zainstalowania – użytkownicy mogą zachować najbardziej przydatne aplikacje na ekranie głównym bez konieczności korzystania ze sklepu z aplikacjami.
- Możliwe do połączenia – możesz je łatwo udostępniać za pomocą adresu URL i nie wymagają skomplikowanej instalacji.
Progresywne aplikacje internetowe nie są unikalne również w Chrome na Androida. Poniżej widać progresywną aplikację internetową Pokedex działającą w Firefoksie na Androida (beta) z wczesnym dodawaniem do ekranu głównego i funkcjami buforowania service worker, które działają sprawnie.
Jedną z ciekawych aspektów „progresywnego” modelu jest to, że funkcje można stopniowo odblokowywać w miarę zapewniania lepszej obsługi przez dostawców przeglądarek. Progresywne aplikacje internetowe, takie jak Pokedex, również oczywiście świetnie sprawdzają się w Operze na Androidzie, ale mają kilka ważnych różnic w implementacji:
Aby dowiedzieć się więcej o progresywnych aplikacjach internetowych, przeczytaj oryginalny post na blogu Alexa Russella, który je przedstawia. Paul Kinlan wprowadził również bardzo przydatny tag Stack Overflow na temat progresywnych aplikacji internetowych, który warto wypróbować.
Zasady
Manifest aplikacji internetowej
Plik manifestu umożliwia dodanie aplikacji internetowej do ekranu głównego w sposób bardziej natywny. Pozwala na uruchamianie aplikacji w trybie pełnoekranowym (bez paska adresu URL) i pozwala kontrolować orientację ekranu, a w najnowszych wersjach Chrome na Androida obsługuje definiowanie ekranu powitalnego i koloru motywu paska adresu. Służy on też do określenia zestawu ikon według rozmiaru i gęstości, które są używane na potrzeby wymienionego wcześniej ekranu powitalnego i ikony ekranu głównego.
Przykładowy plik manifestu znajdziesz w Web Starter Kit oraz w przykładach Google Chrome. Bruce Lawson napisał Generator plików manifestu, a Mounir Lamouri napisał też przydatny walidator pliku manifestu internetowego, który warto wypróbować.
W moich projektach osobistych korzystam z realfavicongenerator, aby generować ikony o odpowiednich rozmiarach, zarówno w pliku manifestu aplikacji internetowej, jak i do użytku na urządzeniach z iOS, komputerami itd. W ramach procesu kompilacji moduł węzłów favikony również może uzyskać podobne dane wyjściowe.
Przeglądarki oparte na Chromium (Chrome, Opera itp.) obsługują pliki manifestu aplikacji internetowych, a Firefox aktywnie dodaje ich obsługę, a Edge umieszcza je na liście rozważanych. Technologie WebKit/Safari nie opublikowały jeszcze publicznych sygnałów dotyczących zamiarów wdrożenia tej funkcji.
Więcej informacji znajdziesz w artykule Instalowanie aplikacji internetowych z plikiem manifestu aplikacji internetowych w Chrome na Androida w Podstawach tworzenia witryn.
Baner „Dodaj do ekranu głównego”
Chrome na Androida od jakiegoś czasu obsługuje dodawanie witryny do ekranu głównego, ale w najnowszych wersjach można też aktywnie proponować witryny, które należy dodać za pomocą natywnych banerów promujących instalacje aplikacji internetowej.
Aby prośby o zainstalowanie aplikacji wyświetlały się, muszą być:
- mieć prawidłowy plik manifestu aplikacji internetowej.
- być udostępniany przez HTTPS (zobacz letsencrypt, aby uzyskać bezpłatny certyfikat),
- mieć zarejestrowany ważny skrypt service worker,
- Są dwa razy odwiedzone w ciągu co najmniej 5 minut między wizytami
Dostępnych jest wiele przykładów banerów promujących instalacje aplikacji – od podstawowych banerów po bardziej złożone przypadki użycia, takie jak wyświetlanie powiązanych aplikacji.
Skrypt service worker do buforowania w trybie offline
Skrypt service worker działa w tle niezależnie od Twojej strony internetowej. Reaguje na zdarzenia, w tym na żądania sieciowe wysyłane ze stron, które obsługuje. Skrypt service worker ma celowo krótki czas życia.
Wybudza się po otrzymaniu zdarzenia i działa tylko tak długo, jak jest potrzebna do przetworzenia zdarzenia. Skrypt service worker pozwala używać interfejsu Cache API do buforowania zasobów i zapewnia użytkownikom pracę w trybie offline.
Skrypty service worker są przydatnym narzędziem do zapisywania w pamięci podręcznej w trybie offline, ale zapewniają też znaczną poprawę wydajności w postaci błyskawicznego ładowania przy kolejnych wizytach w Twojej witrynie lub aplikacji internetowej. Możesz buforować powłokę aplikacji, aby działała w trybie offline, i wypełniać zawartość za pomocą JavaScriptu.
Wszechstronny zestaw przykładów skryptu service worker jest dostępny w przykładach Google Chrome. Książka kucharska offline Jake'a Archibalda jest obowiązkowa. Jeśli nie ma doświadczenia w pracy z skanerem service worker, warto wypróbować Twoją pierwszą aplikację internetową offline Paula Kinlana.
Nasz zespół utrzymuje też wiele narzędzi pomocniczych dotyczących skryptów service worker i tworzy narzędzia, które pozwalają zmniejszyć nakład pracy związany z konfigurowaniem tego skryptu. Znajdziesz je w bibliotekach Service Worker. Oto 2 główne:
- sw-precache: narzędzie działające podczas kompilacji, które generuje skrypt service worker przydatny do wstępnego buforowania powłoki aplikacji internetowej;
- sw-toolbox: biblioteka zapewniająca pamięć podręczną w przypadku rzadko używanych zasobów w środowisku wykonawczym.
Jeff Posnick napisał krótki przewodnik na temat sw-precache pod tytułem Offline-first, szybki, z modułem sw-precache oraz laboratorium dotyczącym tego samego narzędzia, które może Ci się przydać.
W przeglądarkach Chrome, Opera i Firefox wdrożono obsługę mechanizmów Service Worker, a Edge ma pozytywne sygnały publiczne dotyczące zainteresowania tą funkcją. Platforma Safari krótko wspomniała o zainteresowaniu tym programem w ramach zaproponowanego przez jednego z inżynierów planu 5-letniego.
Powiadomienia push o ponownym zaangażowaniu
Możesz efektywnie tworzyć aplikacje internetowe, z których użytkownicy będą mogli korzystać poza kartą. Przeglądarkę można zamknąć i nie musi nawet aktywnie używać aplikacji internetowej, aby zacząć korzystać z usługi. Ta funkcja wymaga zarówno skryptu service worker, jak i pliku manifestu aplikacji internetowej, wykorzystując funkcje opisane wcześniej.
Interfejs Push API jest zaimplementowany w Chrome, w wersji deweloperskiej w Firefoksie i rozważany w przypadku Edge. Nie ma jeszcze żadnych publicznych sygnałów z Safari dotyczących zamiaru wdrożenia tej funkcji.
Powiadomienia push w otwartej sieci to wszechstronne wprowadzenie do konfigurowania funkcji push przez Matta Gaunta. Dostępne jest też ćwiczenie z programowania dotyczące powiadomień push w ramach Web Fundamentals.
Michael van Ouwerkerk z zespołu Chrome przygotował też 6-minutowe wprowadzenie do sekcji „Push” dla osób, które chętniej oglądają filmy.
Nakładanie się na funkcje zaawansowane
Pamiętaj, że interfejs użytkownika może wyglądać inaczej w zależności od tego, w jakiej przeglądarce zostanie otwarta aplikacja internetowa. To Ty masz kontrolę nad cukierkiem.
Dodatkowe funkcje udostępniane przez platformę internetową, takie jak synchronizacja w tle (do synchronizacji danych z serwerem nawet po zamknięciu aplikacji internetowej) i Web Bluetooth (do komunikacji z urządzeniami Bluetooth z poziomu aplikacji internetowej), również można w ten sposób dodać do progresywnej aplikacji internetowej.
W Chrome włączono funkcję synchronizacji w tle One-shot. Jake Archibald przesłał film przedstawiający działanie tej funkcji w aplikacji Wikipedia offline oraz artykuł o tym działaniu. Jeśli chcesz wypróbować ten interfejs API, Francois Beaufort udostępnia też przykłady Web Bluetooth.
Dbanie o platformę
Nic nie stoi jednak na przeszkodzie, aby zastosować którąś z powyższych zasad do istniejącej aplikacji lub platformy, na której tworzysz treści. Kilka innych zasad, o których warto pamiętać podczas tworzenia progresywnej aplikacji internetowej, to ukierunkowany na użytkownika model wydajności RAIL oraz animacje oparte na FLIP.
Mam nadzieję, że w 2016 roku będziemy obserwować rosnącą liczbę szablonów i projektów z nasionami, które wspierają progresywne aplikacje internetowe jako główną funkcję. Do tego czasu przeszkoda w dodawaniu tych funkcji do własnych aplikacji nie była bardzo duża i wręcz warte zachodu.
Architektura
Istnieją różne poziomy wdrożenia progresywnych aplikacji internetowych w modelu progresywnych aplikacji internetowych, ale jedna z częstych metod to tworzenie architektury wokół powłoki aplikacji. Nie jest to trudne wymaganie, ale niesie ze sobą kilka korzyści.
Architektura powłoki aplikacji zachęca do buforowania powłoki aplikacji (interfejsu użytkownika), aby działała offline i wypełniała zawartość za pomocą JavaScriptu. W przypadku powtarzających się wizyt możesz szybko uzyskać wyraźne piksele na ekranie bez połączenia z siecią, nawet jeśli z niego pochodzi treść. Wiąże się to z dużym wzrostem wydajności.
Jeremy Keith niedawno skomentował, że w tym modelu prawdopodobnie renderowanie po stronie serwera nie powinno być traktowane jako zastępcze, ale renderowanie po stronie klienta należy traktować jako ulepszenie. To rzetelna opinia.
W modelu powłoki aplikacji w miarę możliwości należy korzystać z renderowania po stronie serwera, a renderowanie progresywne po stronie klienta należy stosować jako ulepszenie w taki sam sposób, jak „poprawiamy” wrażenia, gdy skrypt service worker jest obsługiwany. Ostatecznie można to osiągnąć na wiele sposobów.
Zalecamy przeczytanie naszego opisu na temat architektury i ocenę, jak podobne zasady można najlepiej zastosować w swojej aplikacji i stosie.
Podstawy
Powłoka aplikacji
Repozytorium app-shell zawiera prawie pełną implementację architektury powłoki aplikacji. Ma backend zapisany w Express.js, a interfejs napisany w języku ES2015.
Ze względu na to, że obejmuje on zarówno część modelu po stronie klienta, jak i po stronie serwera, i zawiera sporo zmian, zapoznanie się z bazą kodu może trochę potrwać. Poza tym jest to nasz najbardziej kompleksowy punkt wyjścia dla progresywnej aplikacji internetowej. W tym projekcie skupimy się na dokumentach.
Polimerowy zestaw startowy
Oficjalne źródło aplikacji internetowych Polymer obsługuje te funkcje progresywnych aplikacji internetowych:
- Manifest aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Skrypt service worker w pamięci podręcznej w trybie offline dzięki elementom Platinum SW.
- powiadomienia push (wymagana ręczna konfiguracja) z elementami Platinum Push.
Obecna wersja klucza PSK nie obsługuje niektórych bardziej zaawansowanych wzorców wydajności (np.modelu powłoki aplikacji czy wczytywania asynchronicznego), które można znaleźć w niektórych aplikacjach internetowych progresywnych Polymer.
W 2016 r. próbowaliśmy wykorzystać te wzorce do wykorzystania w modelu PSK, ale można już znaleźć wstępne doświadczenia związane z tym procesem w aplikacji Polymer Zuperkulblog autorstwa Roba Dodsona oraz wspaniałym przedsięwzięciem Polymer Perf Patterns autorstwa Erica Bidelmana.
Web Starter Kit
Oto nasz punkt wyjścia dla nowych projektów vanilla obejmuje następujące funkcje progresywnych aplikacji internetowych:
- Manifest aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Wstępne buforowanie skryptu service worker dzięki sw-precache
Jeśli wolisz używać narzędzia vanilla JS/ES2015 i nie możesz korzystać z Polymer, pakiet Web Starter Kit może się przydać jako punkt odniesienia, z którego możesz wielokrotnie korzystać lub kraść fragmenty kodu.
Progresywne aplikacje internetowe ze platformami i bez nich
Członkowie społeczności stworzyli już wiele progresywnych aplikacji internetowych typu open source – zarówno z bibliotekami i platformami JS, jak i bez nich. Jeśli szukasz inspiracji, pomocne mogą się okazać poniższe repozytoria. To też są naprawdę dobre aplikacje.
Vanilla JavaScript
- Voice Memos autorstwa Paula Lewisa jest oparte na architekturze podobnej do architektury
app-shell(recenzji). - Wikipedia offline, której autorem jest Jake Archibald (film)
- Air Horner, Paul Kinlan
- Guitar Tuner – Paul Lewis (napisanie)
Polymer
- Zuperkulblog, autor: Rob Dodson (slajdy)
Dodaj reakcję
Wirtualny DOM
- Pokedex (Nolan Lawson) – świetna progresywna aplikacja internetowa z zastosowaniem podejścia typu „wszystko w pracy WWW”, która pomaga w renderowaniu progresywnym. (recenzja)
Angular.js
- Timey.in, Kenneth Auchenberg – wykorzystuje też
sw-precachedo wstępnego buforowania zasobów
Uwagi końcowe
Jak już wspomnieliśmy, progresywne aplikacje internetowe są wciąż w fazie rozwoju, ale to świetny czas, by wypróbować używane w nich metody i sprawdzić, jak dobrze sprawdzają się w Twoich własnych aplikacjach internetowych.
Paul Kinlan aktualnie planuje wprowadzenie wskazówek dotyczących progresywnych aplikacji internetowych dotyczących progresywnych aplikacji internetowych. Jeśli chcesz podzielić się swoimi uwagami o obszarach, które Cię interesują, zamieść w komentarzu w danym wątku.
Więcej informacji
- Progresywne aplikacje internetowe: zmiana znaczenia kart bez utraty duszy
- Dlaczego progresywne aplikacje internetowe są przyszłością tworzenia witryn
- Progresywne aplikacje internetowe: gotowe na premierę
- Tworzenie aplikacji progresywnej za pomocą obiektu 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 Chrome Developer Summit: progresywne aplikacje internetowe