Ostatnio dużo się mówi o progresywnych aplikacjach internetowych. Są one nadal stosunkowo nowym modelem, ale ich zasady mogą w równym stopniu ulepszyć aplikacje utworzone za pomocą czystego JS, React, Polymer, Angular lub dowolnego innego frameworka. W tym poście podsumuję kilka opcji i aplikacji referencyjnych, które pomogą Ci rozpocząć pracę nad własną 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ą jeszcze bardziej wydajne. Progresywne ulepszanie jest podstawą tego modelu.
Aaron Gustafson porównał progresywne ulepszanie do orzeszka w czekoladzie. Orzeszek to treść, polewa czekoladowa to warstwa prezentacji, a JavaScript to twarda skorupka. Warstwa ta może mieć różne kolory, a jej działanie może się różnić w zależności od możliwości przeglądarki, w której jest używana.
Można powiedzieć, że w tej skorupce znajduje się wiele funkcji progresywnej aplikacji internetowej. Łączą one w sobie najlepsze cechy stron internetowych i aplikacji. Są przydatne dla użytkowników od pierwszej wizyty na karcie przeglądarki i nie wymagają instalacji.
Gdy użytkownik zaczyna regularnie korzystać z tych aplikacji, ich „skorupka” staje się jeszcze słodsza – aplikacja ładuje się bardzo szybko przy wolnych połączeniach sieciowych (dzięki skryptowi service worker), wysyła trafne powiadomienia push i ma ikonę na ekranie głównym, która pozwala uruchomić ją w trybie pełnoekranowym jako wrażenia użytkownika aplikacji. Możesz też skorzystać z inteligentnych banerów zachęcających do instalacji aplikacji internetowej.
Progresywne aplikacje internetowe to
- Progresywne – działają u każdego użytkownika, niezależnie od wybranej przeglądarki, ponieważ są tworzone z myślą o progresywnym ulepszaniu.
- Elastyczność – dopasowanie do każdego formatu, komputera, telefonu, tabletu i innych urządzeń.
- Niezależność od połączenia – dzięki skryptom service worker aplikacje działają offline lub w sieciach o niskiej jakości.
- Podobne do aplikacji – używaj modelu powłoki aplikacji, aby zapewnić nawigację i interakcje w stylu aplikacji.
- Aktualność – zawsze aktualne dzięki procesowi aktualizacji skryptu service worker.
- Bezpieczeństwo – reklamy są wyświetlane przez TLS, aby zapobiec podsłuchiwaniu i zapewnić, że treść nie została zmieniona.
- Łatwe do znalezienia – można je zidentyfikować jako „aplikacje” dzięki plikom manifestu W3C i zakresowi rejestracji skryptu service worker, co umożliwia wyszukiwarkom ich znalezienie.
- Możliwość ponownego zaangażowania – ułatw ponowne zaangażowanie dzięki funkcjom takim jak powiadomienia push.
- Z możliwością zainstalowania – umożliwia użytkownikom „zachowanie” 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ą linku – łatwe udostępnianie za pomocą adresu URL bez konieczności przeprowadzania skomplikowanej instalacji.
Progresywne aplikacje internetowe nie są też unikalne dla Chrome na Androida. Poniżej widzimy progresywną aplikację internetową Pokedex działającą w Firefoksie na Androida (beta) z wczesnymi funkcjami dodawania do ekranu głównego i buforowania przez skrypt service worker.
Jednym z przyjemnych aspektów „progresywnego” charakteru tego modelu jest to, że funkcje można stopniowo odblokowywać, gdy dostawcy przeglądarek zapewniają dla nich lepszą obsługę. Progresywne aplikacje internetowe, takie jak Pokedex, oczywiście świetnie działają też w Operze na Androida, ale z kilkoma istotnymi różnicami we wdrażaniu:
Aby dowiedzieć się więcej o progresywnych aplikacjach internetowych, przeczytaj oryginalny post na blogu Alexa Russella, w którym je przedstawia. Paul Kinlan utworzył też bardzo przydatny tag Stack Overflow dla progresywnych aplikacji internetowych, który warto sprawdzić.
Zasady
Plik manifestu aplikacji internetowej
Plik manifestu umożliwia aplikacji internetowej bardziej natywne działanie na ekranie głównym użytkownika. Umożliwia uruchamianie aplikacji w trybie pełnoekranowym (bez paska adresu URL), zapewnia kontrolę nad orientacją ekranu, a w najnowszych wersjach Chrome na Androida obsługuje definiowanie ekranu powitalnego i koloru motywu paska adresu. Służy też do definiowania zestawu ikon według rozmiaru i gęstości, które są używane na wspomnianym ekranie powitalnym i ekranie głównym.
Przykładowy plik manifestu znajdziesz w Web Starter Kit i w przykładach Google Chrome. Bruce Lawson napisał generator plików manifestu, a Mounir Lamouri stworzył przydatne narzędzie do sprawdzania poprawności plików manifestu aplikacji internetowych, które warto wypróbować.
W moich osobistych projektach używam narzędzia realfavicongenerator do generowania ikon o odpowiednim rozmiarze zarówno na potrzeby pliku manifestu aplikacji internetowej, jak i do użytku na urządzeniach z iOS, komputerach itp. Podobny efekt można też uzyskać w ramach procesu kompilacji, korzystając z modułu Node favicons.
Przeglądarki oparte na Chromium (Chrome, Opera itp.) obsługują obecnie pliki manifestu aplikacji internetowych, Firefox aktywnie rozwija obsługę, a Edge wymienia je jako rozważane. WebKit/Safari nie opublikowały jeszcze publicznych sygnałów dotyczących zamiaru wdrożenia tej funkcji.
Więcej informacji znajdziesz w artykule Aplikacje internetowe z możliwością zainstalowania i manifest aplikacji internetowej 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 najnowsze wersje obsługują też proaktywne sugerowanie dodawania witryn za pomocą natywnych banerów instalacji aplikacji internetowych.
Aby prośby o zainstalowanie aplikacji mogły się wyświetlać, aplikacja musi:
- mieć prawidłowy plik manifestu aplikacji internetowej,
- być wyświetlana przez HTTPS (bezpłatny certyfikat znajdziesz na stronie letsencrypt);
- Zarejestrowany prawidłowy skrypt service worker
- być odwiedzona 2 razy, z co najmniej 5-minutową przerwą między wizytami;
Dostępnych jest wiele przykładów banerów zachęcających do instalacji aplikacji, od banerów podstawowych po bardziej złożone przypadki użycia, takie jak wyświetlanie powiązanych aplikacji.
Skrypt service worker do buforowania offline
Skrypt service worker działa w tle, niezależnie od strony internetowej. Odpowiada na zdarzenia, w tym żądania sieciowe wysyłane ze stron, które obsługuje. Skrypt service worker ma celowo krótki okres istnienia.
Uruchamia się, gdy otrzyma zdarzenie, i działa tylko tak długo, jak jest to konieczne do jego przetworzenia. Skrypt service worker umożliwia korzystanie z interfejsu Cache API do buforowania zasobów i może być używany do zapewniania użytkownikom możliwości korzystania z aplikacji w trybie offline.
Skrypty service worker są bardzo przydatne do buforowania offline, ale zapewniają też znaczny wzrost wydajności w postaci natychmiastowego ładowania przy ponownych wizytach w witrynie lub aplikacji internetowej. Możesz zapisać powłokę aplikacji w pamięci podręcznej, aby działała offline, i wypełnić jej zawartość za pomocą JavaScriptu.
Obszerny zestaw przykładów skryptów service worker jest dostępny w przykładach Google Chrome. Jeśli nie masz doświadczenia z skryptami service worker, koniecznie przeczytaj książkę kucharską offline Jake'a Archibalda i zapoznaj się z przewodnikiem Paula Kinlana Twoja pierwsza aplikacja internetowa offline.
Nasz zespół utrzymuje też szereg narzędzi pomocniczych i narzędzi do kompilacji, które pomagają zmniejszyć nakład pracy związany z konfigurowaniem skryptu service worker. Znajdziesz je w sekcji Biblioteki skryptów service worker. Oto 2 główne:
- sw-precache: narzędzie do kompilacji, które generuje skrypt skryptu service worker przydatny do wstępnego buforowania powłoki aplikacji internetowej.
- sw-toolbox: biblioteka zapewniająca buforowanie w czasie działania rzadko używanych zasobów.
Jeff Posnick napisał krótki poradnik na temat sw-precache zatytułowany Offline-first, fast, with the sw-precache module (Szybko i offline dzięki modułowi sw-precache) oraz przygotował ćwiczenie dotyczące tego samego narzędzia, które może Ci się przydać.
Przeglądarki Chrome, Opera i Firefox obsługują już skrypty service worker, a Edge wykazuje zainteresowanie tą funkcją. Safari krótko wspomniało o zainteresowaniu tym rozwiązaniem w planie 5-letnim zaproponowanym przez jednego z inżynierów.
Powiadomienia push zachęcające do ponownego zaangażowania
W praktyce możesz tworzyć aplikacje internetowe, z których użytkownicy mogą korzystać poza kartą. Przeglądarka może być zamknięta, a użytkownicy nie muszą nawet aktywnie korzystać z aplikacji internetowej, aby wejść w interakcję z Twoją usługą. Ta funkcja wymaga zarówno skryptu service worker, jak i pliku manifestu aplikacji internetowej, i wykorzystuje niektóre z opisanych wcześniej funkcji.
Interfejs Push API jest wdrożony w Chrome, w trakcie opracowywania w Firefoksie i rozważany w Edge. Nie ma jeszcze żadnych publicznych sygnałów ze strony Safari o zamiarze wdrożenia tej funkcji.
Powiadomienia push w otwartej sieci to kompleksowe wprowadzenie do konfiguracji powiadomień push autorstwa Matta Gaunta. W Podstawach tworzenia witryn dostępny jest też praktyczny kurs dotyczący powiadomień push.
Michael van Ouwerkerk z zespołu Chrome przygotował też 6-minutowe wprowadzenie do powiadomień push, jeśli wolisz obejrzeć film.
Dodawanie funkcji zaawansowanych
Pamiętaj, że wrażenia użytkownika mogą być różne w zależności od przeglądarki, w której wyświetla on Twoją aplikację internetową. To Ty decydujesz, jak będzie wyglądać twarda skorupka.
W ten sposób możesz też dodać do progresywnej aplikacji internetowej dodatkowe funkcje, które pojawią się na platformie internetowej, takie jak synchronizacja w tle (do synchronizowania danych z serwerem nawet wtedy, gdy aplikacja internetowa jest zamknięta) i Web Bluetooth (do komunikacji z urządzeniami Bluetooth z poziomu aplikacji internetowej).
Jednorazowa synchronizacja w tle została włączona w Chrome. Jake Archibald nagrał film o swojej aplikacji Wikipedii offline i napisał artykuł, w którym pokazuje, jak ona działa. François Beaufort udostępnia też kilka przykładów Web Bluetooth, jeśli chcesz wypróbować ten interfejs API.
Zgodność z platformami
Nic nie stoi na przeszkodzie, aby zastosować dowolną z powyższych zasad do istniejącej aplikacji lub platformy, na której tworzysz. Podczas tworzenia progresywnej aplikacji internetowej warto pamiętać o kilku innych zasadach, takich jak model wydajności RAIL, który koncentruje się na użytkowniku, oraz animacje oparte na modelu FLIP.
Mam nadzieję, że w 2016 roku zobaczymy coraz więcej szablonów i projektów zalążkowych, które będą zawierać obsługę progresywnych aplikacji internetowych jako główną funkcję. Do tego czasu dodanie tych funkcji do własnych aplikacji nie jest zbyt trudne i moim zdaniem jest warte wysiłku.
Architektura
Istnieją różne poziomy zaangażowania w model progresywnej aplikacji internetowej, ale najczęściej stosowanym podejściem jest tworzenie ich wokół powłoki aplikacji. Nie jest to bezwzględny wymóg, ale ma kilka zalet.
Architektura powłoki aplikacji zachęca do buforowania powłoki aplikacji (interfejsu użytkownika), aby działała ona w trybie offline i wypełniała zawartość za pomocą JavaScriptu. Podczas kolejnych wizyt pozwala to na bardzo szybkie wyświetlenie na ekranie istotnych pikseli bez użycia sieci, nawet jeśli treść ostatecznie pochodzi z sieci. Zapewnia to znaczny wzrost wydajności.
Jeremy Keith stwierdził niedawno, że w tym modelu renderowanie po stronie serwera nie powinno być traktowane jako rozwiązanie zastępcze, ale renderowanie po stronie klienta powinno być postrzegane jako ulepszenie. To słuszna uwaga.
W modelu powłoki aplikacji należy w jak największym stopniu używać renderowania po stronie serwera, a renderowanie progresywne po stronie klienta powinno być używane jako ulepszenie, tak samo jak „ulepszamy” działanie, gdy obsługiwany jest skrypt service worker. Można to zrobić na wiele sposobów.
Zalecamy zapoznanie się z naszym artykułem na temat architektury i zastanowienie się, jak najlepiej zastosować podobne zasady w przypadku własnej aplikacji i stosu.
Szablony na początek
Powłoka aplikacji
Repozytorium app-shell zawiera niemal kompletną implementację architektury powłoki aplikacji. Backend jest napisany w Express.js, a frontend w ES2015.
Ponieważ obejmuje on zarówno części modelu po stronie klienta, jak i po stronie serwera, a dzieje się tam całkiem sporo, zapoznanie się z bazą kodu zajmie trochę czasu. Jest to obecnie nasz najbardziej kompleksowy punkt wyjścia do tworzenia progresywnych aplikacji internetowych. Następnym krokiem w tym projekcie będzie Dokumenty.
Zestaw startowy Polymer
Oficjalny punkt wyjścia dla aplikacji internetowych Polymer obsługuje te funkcje progresywnych aplikacji internetowych:
- Plik manifestu aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Buforowanie offline przez skrypt service worker za pomocą elementów Platinum SW
- Powiadomienia push (wymagana konfiguracja ręczna) z elementami Platinum Push
Obecna wersja PSK nie obsługuje niektórych bardziej zaawansowanych wzorców wydajności (np.modelu powłoki aplikacji, asynchronicznego ładowania), które można znaleźć w niektórych progresywnych aplikacjach internetowych Polymer.
Chcemy spróbować wdrożyć te wzorce w PSK w 2016 roku, ale wczesne eksperymenty w tym zakresie można znaleźć w aplikacji Polymer Zuperkulblog Roba Dodsona i w doskonałej prezentacji Polymer Perf Patterns Erica Bidelmana.
Web Starter Kit
Nasz punkt wyjścia dla nowych projektów vanilla obejmuje te funkcje progresywnej aplikacji internetowej:
- Plik manifestu aplikacji internetowej
- Ekran powitalny Chrome na Androida
- Wstępne buforowanie skryptu service worker dzięki sw-precache
Jeśli wolisz pracować z czystym JS/ES2015 i nie możesz używać Polymer, Web Starter Kit może być przydatnym punktem odniesienia, z którego możesz ponownie użyć lub skopiować fragmenty kodu.
Progresywne aplikacje internetowe z platformami i bez nich
Członkowie społeczności utworzyli już wiele progresywnych aplikacji internetowych typu open source, zarówno z bibliotekami i platformami JS, jak i bez nich. Jeśli szukasz inspiracji, poniższe repozytoria mogą okazać się przydatne. Są to też po prostu bardzo dobre aplikacje.
Vanilla JavaScript
- Aplikacja Voice Memos Paula Lewisa została utworzona przy użyciu architektury podobnej do
app-shell(opis). - Offline Wikipedia, Jake Archibald (film)
- Air Horner, autor: Paul Kinlan
- Guitar Tuner, autor: Paul Lewis (opis)
Polymer
- Zuperkulblog, autor: Rob Dodson (slajdy)
React
Virtual-DOM
- Pokedex autorstwa Nolana Lawsona – doskonała progresywna aplikacja internetowa, która stosuje podejście „rób wszystko w procesie roboczym”, aby ułatwić renderowanie progresywne. (write-up)
Angular.js
- Timey.in (Kenneth Auchenberg) – również używa
sw-precachedo wstępnego buforowania zasobów.
Notatki o zamknięciu
Jak wspomnieliśmy, progresywne aplikacje internetowe są jeszcze w powijakach, ale to ekscytujący czas na eksperymentowanie z metodologiami, które za nimi stoją, i sprawdzanie, jak dobrze można je zastosować we własnych aplikacjach internetowych.
Paul Kinlan planuje obecnie wytyczne dotyczące progresywnych aplikacji internetowych w Podstawach tworzenia witryn. Jeśli chcesz, abyśmy omówili jakieś konkretne obszary, napisz o tym w komentarzu w wątku.
Więcej informacji
- Progresywne aplikacje internetowe: ucieczka z kart bez utraty duszy
- Dlaczego progresywne aplikacje internetowe są przyszłością tworzenia stron internetowych
- Progresywne aplikacje internetowe: gotowe na wielką premierę
- Tworzenie progresywnej aplikacji z użyciem 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