Ostatnio wiele się mówiło o progresywnych aplikacjach internetowych. Jest to stosunkowo nowy model, ale jego zasady mogą równie dobrze usprawnić działanie aplikacji napisanych w czystym JS, React, Polymer, Angular lub dowolnym innym frameworku. W tym poście podsumuję niektóre z nich i przedstawię kilka aplikacji, które pomogą Ci w rozpoczęciu korzystania z progresywnej aplikacji internetowej.
Co to jest progresywna aplikacja internetowa?
Pamiętaj, że progresywne aplikacje internetowe działają wszędzie, ale w nowoczesnych przeglądarkach działają jeszcze lepiej. Progresywne ulepszanie jest podstawą modelu.
Aaron Gustafson porównał stopniowe ulepszenie do orzeszkowego M&M. Orzech to Twoje treści, polewa czekoladowa to warstwa prezentacji, a JavaScript to twarda skorupka. Kolor tej warstwy może się różnić, a dostępne funkcje mogą zależeć od możliwości przeglądarki, która ją obsługuje.
Pomyśl o opakowaniu cukierków jako o miejscu, w którym mogą się znajdować różne funkcje progresywnych aplikacji internetowych. To rozwiązania, które łączą to, co najlepsze w internecie, z tym, co najlepsze w aplikacjach. Są one przydatne dla użytkowników od pierwszej wizyty na karcie przeglądarki, bez konieczności instalacji.
W miarę jak użytkownik nawiązuje relacje z tymi aplikacjami przez ich wielokrotne używanie, stają się one jeszcze bardziej atrakcyjne: wczytują się bardzo szybko nawet przy wolnym połączeniu z siecią (dzięki elementowi service worker), wysyłają trafne powiadomienia push i mają świetną ikonę na ekranie głównym użytkownika, która umożliwia wczytywanie aplikacji w trybie pełnoekranowym. Mogą też korzystać z inteligentnych banerów zachęcających do zainstalowania aplikacji internetowej.
Progresywne aplikacje internetowe:
- Progresywne – działają dla każdego użytkownika, niezależnie od wybranej przeglądarki, ponieważ są tworzone z użyciem progresywnego ulepszania jako głównego elementu.
- Elastyczne – dopasowują się do dowolnego formatu: komputera, telefonu, tabletu itp.
- Niezależność od łączności – rozszerzone możliwości obsługi przez service workerów w trybie offline lub w sieciach o niskiej jakości.
- Jak aplikacja – użyj modelu powłoki aplikacji, aby zapewnić nawigację i interakcje w stylu aplikacji.
- Odświeżony – zawsze aktualna dzięki procesowi aktualizacji skryptu service worker.
- Bezpieczne – przesyłane za pomocą protokołu TLS, aby zapobiec szpiegowaniu i zapewnić, że treści nie zostały zmodyfikowane.
- Łatwa do znalezienia – są rozpoznawane jako „aplikacje” dzięki plikom manifestu W3C i zakresowi rejestracji skryptu service worker, co pozwala wyszukiwarkom je znaleźć.
- Możliwość ponownego zaangażowania – ułatw ponowne zaangażowanie dzięki funkcjom takim jak powiadomienia push.
- Możliwość instalacji – zezwól użytkownikom na „trzymanie” aplikacji, które są dla nich najbardziej przydatne, na ekranie głównym bez konieczności korzystania ze sklepu z aplikacjami.
- Możliwość udostępniania za pomocą adresu URL – aplikacja może być łatwo udostępniana za pomocą adresu URL i nie wymaga skomplikowanej instalacji.
Progresywne aplikacje internetowe nie są dostępne tylko 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.
Jednym z przyjemnych aspektów „progresywnego” charakteru tego modelu jest to, że funkcje mogą być stopniowo odblokowywane, gdy dostawcy przeglądarek udostępnią dla nich lepszą obsługę. Progresywne aplikacje internetowe, takie jak Pokedex, świetnie sprawdzają się też w przeglądarce Opera na Androida, choć ich implementacja różni się w kilku istotnych kwestiach:
Aby dowiedzieć się więcej o progresywnych aplikacjach internetowych, przeczytaj post na blogu Alexa Russella, w którym je przedstawia. Paul Kinlan zaczął także bardzo przydatny tag Stack Overflow dotyczący progresywnych aplikacji internetowych.
Zasady
Plik manifestu aplikacji internetowej
Plik manifestu umożliwia aplikacji internetowej wyświetlanie się na ekranie głównym użytkownika w bardziej zbliżony do natywnego sposób. Umożliwia uruchamianie aplikacji w trybie pełnoekranowym (bez paska adresu), zapewnia kontrolę nad orientacją ekranu, a w najnowszych wersjach Chrome na Androida umożliwia definiowanie ekranu wczytywania i koloru motywu paska adresu. Służy też do zdefiniowania zestawu ikon według rozmiaru i gęstości, które są używane na wspomnianym wyżej ekranie powitalnym i ekranie głównym.
Przykładowy plik manifestu znajdziesz w pakiecie startowym Web Starter Kit oraz w przykładach w Google Chrome. Bruce Lawson opracował Generator manifestu, a Mounir Lamouri udostępnił przydatne narzędzie Web Manifest validator.
W przypadku projektów osobistych korzystam z narzędzi realfavicongenerator do generowania ikon o właściwym rozmiarze do pliku manifestu aplikacji internetowej oraz do użytku na iOS, komputerach itp. Moduł Node favicons może również wygenerować podobne dane wyjściowe w ramach procesu kompilacji.
Przeglądarki oparte na Chromium (Chrome, Opera itp.) obsługują manifesty aplikacji internetowych, a Firefox aktywnie rozwija obsługę, a Edge traktuje je jako poddane rozważaniu. WebKit/Safari nie opublikowały jeszcze publicznych sygnałów o zamierzaniu się do zaimplementowania 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”
Chrome na Androida od dawna obsługuje dodawanie witryn do ekranu głównego, ale najnowsze wersje obsługują też proaktywne sugerowanie dodawania witryn za pomocą natywnych banerów z instalacją aplikacji internetowej.
Aby prompty instalacji aplikacji się wyświetlały, aplikacja musi:
- mieć prawidłowy plik manifestu aplikacji internetowej;
- być udostępniany przez HTTPS (bezpłatny certyfikat znajdziesz tutaj: letsencrypt);
- mieć zarejestrowany prawidłowy skrypt service worker;
- odwiedzić witrynę 2 razy z co najmniej 5-minutową przerwą między wizytami.
Dostępnych jest kilka próbek banerów promujących instalację aplikacji, które obejmują podstawowe banery oraz bardziej złożone przypadki użycia, takie jak wyświetlanie powiązanych aplikacji.
Skrypt service worker do pamięci podręcznej offline
Skrypt service worker to skrypt działający w tle, niezależny od strony internetowej. Reaguje na zdarzenia, w tym żą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.
Usługa to potężne narzędzie do buforowania offline, ale zapewnia też znaczne korzyści w zakresie wydajności w postaci natychmiastowego wczytywania przy powtarzanych wizytach w witrynie lub aplikacji internetowej. Możesz przechowywać w pamięci podręcznej powłokę aplikacji, aby działała offline, i wypełniać jej 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ż kilka narzędzi pomocniczych i narzędzi do kompilowania, które są przydatne do zmniejszenia nakładów związanych z konfiguracją usługi. Są one wymienione w bibliotekach Service Worker. Oto 2 główne z nich:
- sw-precache: narzędzie do generowania skryptu service worker, które przydaje się do wstępnego przechowywania w pamięci podręcznej powłoki aplikacji internetowej.
- sw-toolbox: biblioteka zapewniająca buforowanie w czasie wykonywania w przypadku rzadko używanych zasobów.
Jeff Posnick napisał krótki wstęp do biblioteki sw-precache zatytułowany Offline-first, fast, with the sw-precache module (Przechowywanie w pierwszej kolejności offline, szybko, z modułem sw-precache) oraz codelab na temat tego samego narzędzia, które może Ci się przydać.
Chrome, Opera i Firefox mają wdrożone wsparcie dla usług w tle, a Edge ma pozytywne sygnały dotyczące zainteresowania tą funkcją. Safari krótko wspomniało o tym w ramach pięcioletniego planu jednego z inżynierów.
Powiadomienia push w celu ponownego zaangażowania
Oznacza to, że możesz tworzyć aplikacje internetowe, z których użytkownicy mogą 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 wdrażany w Chrome, jest w rozwoju w Firefoxie i jest rozważany w Edge. Na razie nie ma publicznych sygnałów z przeglądarki Safari dotyczących zamiaru wdrożenia tej funkcji.
Push Notifications on the Open Web to obszerne wprowadzenie do konfigurowania powiadomień push autorstwa Matta Gaunta. W sekcji Podstawy internetu znajdziesz też kodlab Powiadomienia push.
Michael van Ouwerkerk z zespołu Chrome także ma 6-minutowe wprowadzenie do funkcji push, jeśli masz ochotę na korzystanie z filmów.
Używanie funkcji zaawansowanych
Pamiętaj, że wrażenia użytkownika mogą być różne w zależności od przeglądarki używanej do wyświetlania aplikacji internetowej. To Ty decydujesz o słodkości.
W ten sposób możesz też dodać do aplikacji internetowej progresy dodatkowe funkcje, takie jak synchronizacja w tle (do synchronizacji danych z serwerem nawet wtedy, gdy aplikacja internetowa jest zamknięta) i Bluetooth w internecie (do komunikacji z urządzeniami Bluetooth z aplikacji internetowej).
Jednorazowe zsynchronizowanie w tle zostało włączone w Chrome, a Jake Archibald opublikował film o swojej aplikacji Wikipedia offline oraz artykuł, w którym pokazuje, jak działa ta funkcja. Jeśli chcesz wypróbować ten interfejs API, François Beaufort udostępnił też kilka próbek kodu Web Bluetooth.
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. Inne zasady, o których warto pamiętać podczas tworzenia progresywnej aplikacji internetowej, to model wydajności RAIL skupiony na użytkowniku oraz animacje oparte na FLIP.
Mam nadzieję, że w 2016 r. zobaczymy coraz więcej szablonów i projektów bazowych, które będą naturalnie uwzględniać obsługę Progressive Web Apps jako główną funkcję. Do tego czasu przeszkoda, by dodać te funkcje do własnych aplikacji, nie jest bardzo duża. Naprawdę warto ją wykonać.
Architektura
Istnieją różne poziomy zaangażowania w model progresywnej aplikacji internetowej, ale jednym z najczęstszych podejść jest tworzenie ich na podstawie powłoki aplikacji. Nie jest to absolutny wymóg, ale wiąże się z kilkoma korzyściami.
Architektura powłoki aplikacji zachęca do przechowywania w pamięci podręcznej powłoki aplikacji (interfejsu użytkownika), aby działała w trybie offline i zawierała treści za pomocą JavaScript. Podczas powtórnych wizyt pozwala to bardzo szybko wyświetlać na ekranie istotne piksele bez udziału sieci, nawet jeśli Twoje treści pochodzą z tej sieci. 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 sprawiedliwa 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.
Zalecamy zapoznanie się z naszą publikacją na temat architektury i oceny, jak podobne zasady można zastosować w przypadku Twojej aplikacji i pakietu.
Wstępny szablon
Powłoka aplikacji
Repozytorium app-shell zawiera prawie pełne wdrożenie architektury Application Shell. Backend jest napisany w Express.js, a frontend – w ES2015.
Obejmuje ona zarówno model po stronie klienta, jak i po stronie serwera, a ponieważ jest to dość rozbudowany kod, zapoznanie się z nim zajmie trochę czasu. Jest to obecnie nasz najbardziej kompleksowy punkt wyjścia do tworzenia progresywnych aplikacji internetowych. Następnym celem tego projektu 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 w Chrome na Androida
- Buforowanie offline skryptu service worker za pomocą elementów skryptu service worker Platinum
- Powiadomienia push (wymagana konfiguracja ręczna) z platynowymi elementami Push.
Obecna wersja PSK nie obsługuje niektórych bardziej zaawansowanych wzorców wydajności (np.modelu Application Shell czy ładowania asynchronicznego), które występują w niektórych progresywnych aplikacjach internetowych opartych na technologii Polymer.
W 2016 r. chcemy wdrożyć te wzorce w PSK, ale wczesne eksperymenty dotyczące tego można znaleźć w aplikacji Zuperkulblog Roba Dodsona oraz w wybitnym wykładzie Polymer Perf Patterns Erica Bidelmana.
Zestaw startowy do tworzenia stron internetowych
Nasz punkt wyjścia dla nowych projektów podstawowych obejmuje te funkcje progresywnej aplikacji internetowej:
- Manifest aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Wstępne buforowanie usługi za pomocą sw-precache
Jeśli wolisz pracować z czystym JS/ES2015 i nie możesz używać Polymer, pakiet Web Starter Kit może okazać się przydatny jako punkt odniesienia, z którego możesz ponownie użyć lub skopiować fragmenty kodu.
Progresywne aplikacje internetowe z ramkami i bez nich
Członkowie społeczności opracowali już wiele aplikacji Progressive Web typu open source, zarówno z wykorzystaniem bibliotek i ramek JS, jak i bez nich. Jeśli szukasz inspiracji, mogą Ci się przydać poniższe odpowiedzi. Są też po prostu cholernie dobre.
Podstawowy kod JavaScript
- Voice Memos Paula Lewisa jest zbudowany w podobnej architekturze jak
app-shell(opracowanie) - Offline Wikipedia Jake’a Archibalda (film)
- Air Horner, Paul Kinlan
- Guitar Tuner autorstwa Paula Lewisa (opis)
Polymer
- Zuperkulblog, Rob Dodson (slajdy)
React
Virtual-DOM
- Pokedex Nolana Lawsona – świetna progresywna aplikacja internetowa stosująca podejście „zrobić wszystko w środowisku internetowym”, które pomaga w renderowaniu progresywnym. (opis)
Angular.js
- Timey.in, autor: Kenneth Auchenberg – także używa
sw-precachedo wstępnego buforowania zasobów
Uwagi końcowe
Jak już wspomnieliśmy, progresywne aplikacje internetowe są wciąż w początkach, ale to ekscytujący czas na eksperymentowanie z metodami, na których są oparte, i sprawdzanie, jak dobrze można je zastosować w swoich własnych aplikacjach internetowych.
Paul Kinlan planuje opracowanie wskazówek dotyczących podstaw internetu na temat progresywnych aplikacji internetowych. Jeśli masz jakieś uwagi dotyczące obszarów, które powinny zostać omówione, podziel się nimi w tym wątku.
Więcej informacji
- Progresywne aplikacje internetowe: ucieczka od kart bez utraty ducha
- Dlaczego progresywne aplikacje internetowe są przyszłością tworzenia stron internetowych
- Progresywne aplikacje internetowe: gotowe do premiery
- Tworzenie progresywnej aplikacji za pomocą Service Worker
- Progresywne aplikacje internetowe to przyszłość
- Progresywna aplikacja internetowa: nowy sposób korzystania z telefonów komórkowych
- Przedstawiamy Pokedex.org – progresywną aplikację internetową dla fanów Pokémonów
- Podsumowanie konferencji Chrome Developer Summit: progresywne aplikacje internetowe