Kurs omawiający każdy aspekt nowoczesnego tworzenia progresywnych aplikacji internetowych.
To szkolenie zawiera proste i przystępne omówienie podstaw tworzenia progresywnych aplikacji internetowych. Z kolejnych modułów dowiesz się, czym jest progresywna aplikacja internetowa, jak ją utworzyć lub uaktualnić istniejące treści oraz jak dodać wszystkie elementy aplikacji offline, którą można zainstalować. Do poruszania się po modułach służy panel menu. (Na komputerze menu jest po lewej stronie, a na komórkach – za menu).
Poznasz podstawowe zasady dotyczące PWA, takie jak internetowy plik manifestu aplikacji, mechanizmy Service Worker, jak projektować aplikacje z myślą o aplikacji i jak używać innych narzędzi do testowania i debugowania aplikacji PWA. Po zakończeniu tych podstaw dowiesz się, jak zintegrować aplikację PWA z platformą i systemem operacyjnym, jak ulepszyć instalację i użytkowanie PWA oraz jak udostępnić aplikację w trybie offline.
Każdy moduł zawiera interaktywne prezentacje i samooceny, dzięki którym sprawdzisz swoją wiedzę. Możesz testować wersje demonstracyjne na telefonie komórkowym, tablecie lub laptopie podczas zabawy z kodem, aby poznać podstawy tworzenia progresywnej aplikacji internetowej.
Ten kurs jest przeznaczony zarówno dla początkujących, jak i zaawansowanych programistów stron internetowych. Możesz przeglądać tę serię od początku do końca, aby od razu zorientować się w PWA, lub wykorzystać ją jako materiał referencyjny dla konkretnych tematów. Osoby, które dopiero zaczynają tworzyć strony internetowe, będą potrzebować podstaw w językach HTML, CSS i JavaScript. Zapoznaj się z kursami CSS oraz kursami HTML i JavaScript w MDN.
Oto czego się nauczysz:
Pierwsze kroki
Jeśli chcesz utworzyć progresywną aplikację internetową, być może zastanawiasz się, od czego zacząć. Czy można uaktualnić stronę do progresywnej aplikacji internetowej bez zaczynania od zera, lub jak przejść z aplikacji przeznaczonej na konkretną platformę na PWA. Ten artykuł pomoże Ci znaleźć odpowiedzi na te pytania.
Podstawy
Wszystkie progresywne aplikacje internetowe są z założenia nowoczesne, dlatego ważne jest, aby witryna miała solidne podstawy pod względem responsywnego projektowania, działania na urządzenia mobilne i przede wszystkim jego funkcjonalności, wewnętrznego projektu oraz wydajności witryny.
Projekt aplikacji
Jedną z głównych różnic między progresywnymi aplikacjami internetowymi a klasycznymi stronami i aplikacjami internetowymi jest możliwość zainstalowania. Dzięki temu powstaje samodzielna platforma, która jest lepiej zintegrowana z platformą i systemem operacyjnym. Instalacja zapewnia nową elastyczność i większą odpowiedzialność, ponieważ nasze materiały nie będą zawierać interfejsu użytkownika w przeglądarce.
Zasoby i dane
Progresywna aplikacja internetowa to strona internetowa – wszystkie jej zasoby są takie same jak w internecie, ale dzięki nowym narzędziom szybko się wczytują one zarówno online, jak i offline.
Skrypty service worker
Skrypty service worker są podstawowym elementem PWA. Umożliwiają szybkie wczytywanie (niezależnie od sieci), dostęp w trybie offline, powiadomienia push i inne funkcje.
Pamięć podręczna
Interfejs Cache Storage API umożliwia pobieranie, przechowywanie, usuwanie i aktualizowanie zasobów na urządzeniu. Potem te zasoby mogą być wyświetlane na urządzeniu bez konieczności wysyłania żądania sieciowego.
Obsługa
Za pomocą zdarzenia pobierania skryptu service worker możesz przechwytywać żądania sieciowe i udostępniać odpowiedź przy użyciu różnych technik.
Pole robocze
Skrzynka robocza to zestaw modułów, które upraszczają typowe interakcje z skryptami service worker, takie jak routing i buforowanie. Każdy moduł dotyczy konkretnego aspektu programowania mechanizmów Service Worker. Workbox ma na celu ułatwienie korzystania z mechanizmów Service Worker przy jednoczesnym zachowaniu elastyczności w zakresie spełniania złożonych wymagań dotyczących aplikacji, gdy jest to wymagane.
Dane offline
Aby uzyskać solidny efekt offline, musisz wdrożyć zarządzanie miejscem na dane. Mogą w tym pomóc takie narzędzia jak IndexedDB, Cache, Storage Manager, Persistent Storage i Indeksowanie treści.
Instalacja
Zainstalowane aplikacje są łatwo dostępne i mogą korzystać z bardziej zaawansowanej integracji z systemem operacyjnym. Dowiedz się, jak zainstalować PWA, i zyskaj te korzyści.
Plik manifestu aplikacji internetowej
Manifest aplikacji internetowej to plik JSON, który określa sposób traktowania aplikacji PWA jako zainstalowanej, w tym jej wygląd i styl oraz podstawowe działanie w systemie operacyjnym.
Prośba o instalację
W przypadku witryn, które spełniają kryteria instalacji PWA, przeglądarka wywołuje zdarzenie, aby poprosić użytkownika o jej zainstalowanie. Dobra wiadomość jest taka, że za pomocą tego wydarzenia możesz dostosować komunikat i zachęcić użytkowników do zainstalowania aplikacji.
Zaktualizuj
Możliwe, że Twoja aplikacja PWA wymaga aktualizacji. W tym rozdziale znajdziesz narzędzia do aktualizowania różnych części PWA: od zasobów po metadane.
Ulepszenia
użytkownicy oczekują dobrych wrażeń, Z tego rozdziału dowiesz się, jak ulepszyć PWA za pomocą ekranów powitalnych i skrótów do aplikacji, a także dowiesz się, jak działają sesje.
Wykrywanie
Określenie sposobu, w jaki użytkownicy wchodzą w interakcję z aplikacją, pomaga dostosować i poprawić wrażenia użytkowników. Możesz na przykład sprawdzić, czy aplikacja jest już zainstalowana na urządzeniu użytkownika, i wdrożyć takie funkcje jak przeniesienie nawigacji z przeglądarki do samodzielnej aplikacji.
Integracja z systemem operacyjnym
PWA działa teraz poza przeglądarką. W tym rozdziale opisujemy, jak przeprowadzić dalszą integrację z systemem operacyjnym, gdy użytkownicy zainstalują aplikację.
Zarządzanie oknami
PWA spoza przeglądarki zarządza własnym oknem. W tym rozdziale poznasz interfejsy API oraz możliwości zarządzania oknem w systemie operacyjnym.
Funkcje eksperymentalne
Niektóre funkcje PWA są nadal w fazie rozwoju i możesz być częścią ich prac. W tym rozdziale poznasz projekt Fugu, dowiesz się, jak się zarejestrować, aby wypróbować origin, i dowiesz się, jak korzystać z eksperymentalnych interfejsów API.
Narzędzia i debugowanie
Przyjrzymy się dostępnym narzędziom do tworzenia, debugowania i testowania progresywnych aplikacji internetowych.
Architektura
Przy tworzeniu aplikacji PWA musisz podjąć pewne decyzje, np. zdecydować, czy utworzyć aplikację jednostronicową, czy wielostronicową i czy będzie ona hostowana w katalogu głównym domeny czy w folderze.
Zarządzanie złożonością
Utrzymywanie prostej aplikacji internetowej może być zaskakująco skomplikowane. W tym module dowiesz się, jak internetowe interfejsy API współpracują z wątkami i jak wykorzystać je w przypadku typowych wzorców PWA, takich jak zarządzanie stanem.
Możliwości
Są one nie tylko powiązane z ekranem. W tym rozdziale omawiamy możliwości PWA w zakresie sprzętu, czujników i wykorzystania platformy.
Podsumowanie
Dalsze kroki i materiały
Chcesz poznać PWA?