Zawartość
- Podnoszenie się PWA
- PWA w akcji dzisiaj
- Instalacja
- Offline i natychmiastowe uruchomienie
- Doświadczenie pierwszej klasy
- Sklepy z aplikacjami
- Integracja z platformą
- Wyzwania projektowe i UX
- Rok PWA
Tak jak kilka lat temu responsywne projektowanie witryn internetowych wypełniło lukę między witrynami stacjonarnymi i mobilnymi, tak postępowe techniki aplikacji internetowych obecnie wypełniają lukę między Internetem a światem aplikacji. Ponieważ doświadczenia użytkowników z komputerów stacjonarnych do aplikacji mobilnych szybko się zbiegają, wydaje się, że ewoluuje znacznie bardziej elegancki i wydajniejszy internet - chociaż nieuchronnie nie bez znaczących zmian w jego kodzie genetycznym.
- Jak zbudować progresywną aplikację internetową
Najwyraźniej prowadzi to do pewnych znaczących presji selekcyjnych. Po pierwsze, tworzenie natywnych aplikacji dla każdej niszy niekoniecznie jest efektywnym wykorzystaniem zasobów: użytkownicy kończą z setkami dużych aplikacji marnujących przepustowość i cenną przestrzeń dyskową, a firmy wydają ogromne pieniądze na tworzenie aplikacji tylko po to, aby je porzucić. po ich pierwszych wersjach. Większość tych aplikacji działa po prostu na podstawie treści internetowych: informacji pochodzących z usług internetowych lub systemu zarządzania treścią.
Definicja progresywnej aplikacji internetowej nie jest konkretna. PWA to po prostu aplikacja internetowa, która wykorzystuje kilka nowych interfejsów API i możliwości na platformie internetowej z wykorzystaniem progresywnych ulepszeń, aby oferować wrażenia podobne do aplikacji na każdej platformie z tą samą bazą kodu. Jest to bardziej zestaw sprawdzonych metod i wykorzystania interfejsu API, który zapewnia użytkownikom doskonałe wrażenia podobne do aplikacji, więc nie jest tak, że masz lub nie masz PWA; bardziej przypomina to, że Twoja witryna jest mniej więcej PWA.
Masz zamiar rozpocząć tworzenie nowej witryny? Spróbuj użyć narzędzia do tworzenia witryn. I upewnij się, że otrzymujesz wsparcie, którego potrzebujesz, od przyzwoitej usługi hostingowej. Jeśli szukasz czegoś nieco innego, zapoznaj się z naszym przewodnikiem po najlepszym miejscu do przechowywania w chmurze.
Podnoszenie się PWA
Chociaż nazwa PWA została wymyślona w 2015 roku w artykule Escaping Tabs Without Losing Our Soul autorstwa Alexa Russella pracującego w Google dla zespołu Chrome, ich podróż tak naprawdę nie zaczęła się tam. Kiedyś mieliśmy aplikacje HTML (HTA), które zostały stworzone przez Microsoft w 1999 roku, wraz z wieloma innymi platformami aplikacji internetowych firm Nokia, BlackBerry i innych. Następnie, w 2007 roku, Steve Jobs zaprezentował jedyny w tamtym czasie sposób tworzenia aplikacji dla oryginalnego iPhone'a: PWA, choć pod inną nazwą. Chrome zaczął od tego, kilka lat później ulepszył API i wymyślił nazwę PWA.
Przy tak wielu wcześniejszych nieudanych próbach przeniesienia treści internetowych do świata aplikacji, dlaczego uważamy, że teraz to zadziała? Przede wszystkim zależy to od firm, które teraz pracują i promują technologie stojące za PWA, takie jak Microsoft, Google, Apple i Mozilla, żeby wymienić tylko kilka. Ponadto wydajność platformy internetowej osiągnęła punkt, w którym nie ma zauważalnej różnicy w porównaniu dobrze zaprojektowanego PWA z aplikacją natywną. Takie warunki nigdy wcześniej nie istniały i to jest jeden z powodów, dla których społeczność internetowa zdecydowała, że nadszedł czas na PWA.
PWA w akcji dzisiaj
Obecnie PWA są w pełni funkcjonalne i można je zainstalować na:
- Android z większością przeglądarek, z Chrome oferującym najlepsze wrażenia
- iOS z Safari
- Chromebooki
- Windows 10 ze sklepu Microsoft Store
- Telefony z funkcjami z KaiOS - rozwidleniem z Firefox OS - są obecnie dostępne dla milionów użytkowników, głównie w Indiach
Jeszcze w tym roku wsparcie będzie również dostępne dla systemów macOS, Windows i Linux za pośrednictwem przeglądarki Chrome. Jeśli chcesz teraz wypróbować, jest dostępny jako eksperymentalna flaga „Desktop PWA”. Instalacja w Windows on Edge bez użycia sklepu nastąpi również później, chociaż nie określono konkretnego przedziału czasowego.
Jeśli ponownie przeczytasz listę, zobaczysz, że każda platforma ma lub wkrótce będzie obsługiwać w pełni instalowalne PWA w kolejnych miesiącach. A ponieważ PWA to tylko strona internetowa z funkcjami na górze, które będą aktywowane tylko w kompatybilnych przeglądarkach, możemy nawet powiedzieć, że jest kompatybilna ze wszystkimi przeglądarkami w zakresie swojej podstawowej funkcjonalności.
Ponadto PWA są obecnie generowane z większości CLI dla różnych frameworków, w tym Angular 6+ CLI, React Create App, PWA Starter Kit z Polymer i Preact CLI. Wreszcie zespół Ionic Framework wpadł na pomysł Capacitor, zamiennika Cordova o otwartym kodzie źródłowym, który umożliwia natywne PWA w każdym sklepie z aplikacjami.
Instalacja
Jednym z krytycznych aspektów PWA jest instalacja aplikacji. Ten proces odbywa się w dwóch opcjonalnych krokach: pobieranie i przechowywanie plików aplikacji w trybie offline oraz instalacja ikony w systemie operacyjnym. Ponieważ oba kroki są opcjonalne, możesz zaoferować działanie w trybie offline w przeglądarce lub możesz zaoferować ikonę bez instalacji w trybie offline. Ale prawdziwy PWA powinien zawierać jedno i drugie: musi być obsługiwany z TLS w ramach HTTPS, a użytkownik zdecyduje, czy będzie go używał w przeglądarce, czy we własnej zainstalowanej ikonie.
Offline i natychmiastowe uruchomienie
Mózgiem aplikacji PWA jest Service Worker - plik JavaScript instalowany na urządzeniu użytkownika, który jest odpowiedzialny za pobieranie plików aplikacji, przechowywanie ich w pamięci podręcznej i późniejsze udostępnianie w razie potrzeby. Po zainstalowaniu Service Worker działa jak serwer proxy sieci dla każdego zasobu, którego potrzebuje aplikacja internetowa: może zdecydować o pobraniu go z sieci lub dostarczeniu z lokalnej pamięci podręcznej, dzięki czemu aplikacja jest dostępna w trybie offline, a także dostępna tylko w kilka milisekund, nawet jeśli użytkownik ma połączenie, emuluje uruchomienie aplikacji natywnej.
Aby zainstalować pracownika serwisu, dokument HTML będzie musiał zawierać coś takiego:
if („serviceWorker” w nawigatorze) navigator.serviceWorker.register („sw.js”);
Spowoduje to zainstalowanie pliku „sw.js” na urządzeniach użytkowników dla bieżącego folderu w bieżącej domenie - koncepcja znana jako zakres. Po zainstalowaniu kolejne wizyty na dowolnym adresie URL w jego zakresie będą zarządzane przez tego pracownika usługi.
Powiedzmy, że mamy PWA z czterema plikami: index.html, app.js, app.css i logo.png. Pierwszą rzeczą jest zainstalowanie tych plików w pamięci podręcznej w pliku sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; samego siebie. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (zasoby)));});
Następnie, aby aplikacja PWA była zawsze obsługiwana z pamięci podręcznej, musimy nasłuchiwać zdarzenia pobierania w module Service Worker i zdecydować, jakie zasady pamięci podręcznej mają być używane, na przykład najpierw pamięć podręczna z następującym fragmentem kodu.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
W takim przypadku za każdym razem, gdy użytkownik uzyska dostęp do PWA (zarówno z przeglądarki, jak iz zainstalowanej ikony), silnik pobierze pliki z pamięci podręcznej. Zaletą PWA w porównaniu z aplikacjami natywnymi jest to, że urządzenia nie muszą ponownie pobierać wszystkich plików w przypadku zmiany, a jedynie plik, który został zmieniony w przejrzysty sposób. Ponadto możemy nadal pobierać części aplikacji na żądanie.
Ale wyzwaniem jest to, skąd wiesz, które pliki zostały zaktualizowane na serwerze, aby móc je zastąpić w pamięci podręcznej? Jeśli nie chcesz pisać pracownika usługowego niskiego poziomu do zarządzania tym, możesz skorzystać z biblioteki Workbox o otwartym kodzie źródłowym, która pomoże Ci wygenerować usługę Service Worker i manifest zasobów w celu zaktualizowania zainstalowanego pakietu.
Pamiętaj, że pliki Twojego PWA zostaną usunięte, jeśli na urządzeniu pojawi się presja na przechowywanie, chyba że zażądasz trwałego magazynu, jeśli jest dostępny:
if (‘storage’ in navigator && ’persist’ in navigator.storage) navigator.storage.persist ();
W Chrome i większości przeglądarek na Androida Twoja aplikacja nie może wykorzystać więcej niż pięć procent dostępnego miejsca; na iOS jest to 50 MiB (blisko 50 MB) tylko na hosta; w Edge jest zmienna w zależności od całkowitego rozmiaru pamięci, aw Sklepie Windows jest nieograniczona.
Doświadczenie pierwszej klasy
Mamy mózg, a teraz czas na serce: manifest aplikacji internetowej. Celem przekształcenia strony internetowej w PWA jest nie tylko zapewnienie, że jest ona dostępna szybko lub w trybie offline, ale także umożliwienie jej posiadania własnej ikony w systemie operacyjnym i oferowania całkowicie samodzielnego doświadczenia, jak każda inna zainstalowana aplikacja.
Manifest to plik JSON, który definiuje metadane dla PWA używanego przez przeglądarkę lub sklep z aplikacjami w celu zdefiniowania zachowania instalacji.
Plik definiuje kilka właściwości jako metadane dla Twojego PWA. Każdy system operacyjny odczyta te właściwości i postara się jak najlepiej dopasować do preferowanych przez Ciebie rozwiązań. Na przykład Android odczyta komunikat „display: standalone” i utworzy normalne działanie aplikacji. Dzięki „display: minimal-ui” tworzy środowisko z widocznym adresem URL i certyfikatem TLS - przydatne w aplikacjach wrażliwych na bezpieczeństwo. Dzięki „display: fullscreen” tworzy w pełni wciągające aplikacje bez paska stanu i widocznego przycisku Wstecz. Zestaw ikon i kolorów określa, jak ekrany powitalne lub paski tytułu będą wyglądać w oknie aplikacji.
Istnieją pewne generatory manifestów, takie jak Web App Manifest Generator lub PWA Builder, które również zmieniają rozmiar ikony w różnych rozdzielczościach, jeśli podasz ikonę o wysokiej rozdzielczości (minimum 512 pikseli).
Gdy masz plik manifestu połączony w dokumencie HTML, użytkownicy będą mogli zainstalować aplikację przy użyciu różnych technik w zależności od przeglądarki, zwykle nazywanych Dodaj do ekranu głównego, Zainstaluj lub po prostu Dodaj. Jeśli Twoja aplikacja PWA jest indeksowana przez Bing, firma Microsoft automatycznie doda ją do Microsoft Store, aby użytkownicy systemu Windows 10 mogli ją stamtąd zainstalować.
W niektórych systemach operacyjnych twój PWA będzie miał możliwość przechwytywania linków. Oznacza to, że po zainstalowaniu aplikacji przez użytkownika każdy adres URL w zakresie Twojego manifestu zostanie otwarty w granicach Twojej aplikacji, a nie w przeglądarce, bez względu na to, czy pojawia się w przeglądarce, czy w innych aplikacjach, takich jak WhatsApp, Facebook lub e-mail.
Jeśli spełnisz wymagania PWA, które tutaj definiujemy, niektóre platformy będą oferować ambient badging (mała ikona zwykle na pasku adresu URL wskazująca, że można zainstalować sieć) lub baner aplikacji internetowej. Jeśli wolisz, możesz również dodać własny niestandardowy przycisk Instaluj, korzystając z następującego fragmentu kodu:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // pokaże natywny monit instalacji})
Jeśli aplikacja PWA jest zainstalowana, zdarzenie „appinstalled” zostanie uruchomione na obiekcie window, aby można było śledzić jego statystyki.
Sklepy z aplikacjami
Jedną z głównych zalet instalacji z poziomu przeglądarki jest możliwość uniknięcia procesu zatwierdzania sklepu z aplikacjami lub konieczności płacenia za bycie wydawcą. Ma to oczywiste zalety, takie jak błyskawiczne publikowanie, tworzenie prywatnych aplikacji dla firm lub aplikacji, które nie powinny być akceptowane w sklepach.
Ale niektóre firmy chcą być w sklepie. Na dzień dzisiejszy jedynymi sklepami, które oficjalnie akceptują PWA, są Windows Store i kaiOS Store. Na szczęście dzięki narzędziom takim jak Capacitor (obecnie w Alpha) czy PWA Builder możemy tworzyć i podpisywać natywne pakiety również na inne platformy.
W sklepie Google Play jest już kilka PWA, takich jak Twitter Lite i Google Maps Go, obecnie w niestandardowych wdrożeniach. Chrome zaoferuje rozwiązanie z Chrome 68 za pośrednictwem zaufanych działań internetowych. Od tego momentu będziemy mogli stworzyć pakiet Android (APK) z launcherem do naszego PWA i załadować go do sklepu. W przypadku Microsoft Store w systemie Windows 10 witryna PWA Builder pomaga obecnie w tworzeniu pakietu APPX dla systemu Windows 10. Korzystając z widoku internetowego, możesz ręcznie utworzyć aplikację na iOS dla App Store, ale zachowaj szczególną ostrożność przy zasadach sklepu.
Integracja z platformą
Wdrażając techniki stopniowego ulepszania, będziesz mógł korzystać z wielu funkcji, w tym powiadomień push, dostępu do kamery i mikrofonu, geolokalizacji, czujników, płatności, okien dialogowych udostępniania i przechowywania w trybie offline. Wszystkie te funkcje działają bezpośrednio w modelu zabezpieczeń przeglądarki, w tym w oknach dialogowych uprawnień.
Możemy również komunikować się z innymi aplikacjami za pomocą schematów URI, takich jak otwieranie Twittera, YouTube lub WhatsApp za pośrednictwem ich adresów URL lub niestandardowych identyfikatorów URI, takich jak whatsapp: //.
Wreszcie, tworząc natywne PWA, które są publikowane w sklepie za pomocą Capacitor lub do Microsoft Store, będziemy mogli połączyć się z natywnymi API, które umożliwią nam wykonanie praktycznie każdego natywnego kodu. Ta integracja z Windows 10 obejmuje dostęp do sprzętu, ale także integrację z systemem operacyjnym, oferując opcje takie jak Pin to Start. Na przykład aplikacja Twitter PWA umożliwia przypięcie dowolnego użytkownika do ekranu startowego.
Wyzwania projektowe i UX
Projektowanie PWA wiąże się z wyjątkowymi wyzwaniami, dlatego ważne jest, aby poświęcić trochę czasu na badanie, testowanie jak najwięcej i rozważenie następujących kwestii:
- Użytkownicy będą oczekiwać wrażeń przypominających aplikacje.
- Proces instalacji jest wciąż nowy, dlatego musimy dołożyć dodatkowych starań, aby wyjaśnić, jak zainstalować aplikację.
- Aktualizacja aplikacji w tle bez interakcji z użytkownikiem jest świetna, ale wiąże się też z pewnymi wyzwaniami dla UX.
- W przypadku komputerów stacjonarnych responsywne projektowanie witryn internetowych wkracza na nową granicę, ponieważ okna PWA mogą być małe, znacznie mniejsze niż widok mobilny. Oznacza to, że musimy utworzyć określone widoki lub małe widżety dla tego formatu, jak widać w dzisiejszym systemie operacyjnym Chrome.
- Powiadomienia push powinny stanowić wartość dodaną tylko dla użytkownika, więc naucz się pytać w odpowiednim momencie i nie marnuj okazji, wysyłając wiadomości, które nie są przydatne lub interesujące.
- Musimy zaprojektować pod kątem wydajności sieci i dostępu w trybie offline.
Rok PWA
Wraz z dodaniem w tym roku iOS i desktopów, PWA są dziś wszędzie. Musimy jednak pamiętać, że ich podróż dopiero się zaczyna, więc spodziewaj się częstych zmian i upewnij się, że jesteś na bieżąco z najnowszymi technikami i pomysłami, aby zapewnić użytkownikom doskonałe wrażenia podczas ewolucji platformy.
Ten artykuł został pierwotnie opublikowany w numerze 308 z netto, najlepiej sprzedający się magazyn na świecie dla projektantów i programistów stron internetowych. Kup numer 308 tutaj lub zapisz się tutaj.
