Wprowadzenie do progresywnych aplikacji internetowych

Większość deweloperów przynajmniej słyszała brzęczenie Progresywne aplikacje internetowe. Są one szeroko wspierane przez firmy technologiczne, takie jak Google, i szybko stają się norma dla aplikacji internetowych z wieloma urządzeniami.

Ale co dokładnie jest różnica między typowym i a progresywny Aplikacja internetowa?

Dla programistów, to cały świat różnicy. Progresywne aplikacje internetowe korzystają z nowoczesnych internetowych interfejsów API stwórz własne aplikacje w przeglądarce. Oznacza to, że programiści mogą budować dynamicznie ładujące się aplikacje dynamiczne bez korzystania z hybrydowych struktur.

W tym przewodniku omówię podstawy Progressive Web Apps, kilka podstawowych funkcji i jak możesz zacząć budować własne.

Co to są progresywne aplikacje internetowe?

Progresywne aplikacje internetowe (lub PWA) skorzystaj z interfejsów API przeglądarki internetowej do tworzenia rodzimych aplikacji bezpośrednio w przeglądarce na dowolnym urządzeniu.

Ostatecznie progresywne aplikacje internetowe obejmują: garść technologii programiści mogą wykorzystać do tworzenia wydajnych aplikacji natywnych. Wielu pochodzi z Web API tak jak API pracowników serwisowych albo Push API.

Tam są sporo wymagań nazwać coś PWA, ale to są najważniejsze:

Jest w pełni mobilny responsywny.
Przestrzega progresywne ulepszanie.
Zdolny do zainstalować lokalnie na smartfonach i tabletach.
Działa w trybie offline bez Internetu, za pomocą pracowników usług.
Oddziela zawartość od funkcjonalności za pomocą powłoki aplikacji.
Buduje na HTTPS dla większego bezpieczeństwa.
Wykrywalne w wyszukiwarce Google.
Ma dynamiczne strony podobne do aplikacji ale każdy wciąż ma swój własny adres URL.

Jeśli jesteś myśląc o budowie małej aplikacji internetowej zamiast tego możesz spróbować utworzyć progresywną aplikację internetową. Wiąże się to z odrobiną krzywej uczenia się, ale masz tak wiele większa kontrola nad doświadczeniem użytkownika w rezultacie.

Zanurzmy się w podstawy progresywnych aplikacji internetowych i dowiedzmy się, co je powoduje.

Pracownicy usługowi

Każda pojedyncza aplikacja Progressive Web App potrzebuje pracowników obsługi. To są jak urzędnicy ruchu drogowego kto koordynuje ruch, skąd pochodzą dane i jak to się dzieje wszystko jest zorganizowane i przechowywane w pamięci podręcznej.

Mówiąc prosto, pracownik serwisu działa jako plik JavaScript i działa w tle Twojej aplikacji internetowej. Zawsze, gdy użytkownik wykonuje zdarzenie, nazywa się skrypt pracownika serwisu albo ściągać dane, zapisywać dane, albo oba!

Używając Interfejs API pracownika obsługi jest istotny do uruchomienia PWA w trybie offline. W ten sposób ty przesyłać dane między widokami i jak możesz żądania danych z lokalnej bazy danych. Ale to głównie zaawansowane rzeczy, których się uczysz, pracując nad projektem PWA.

Rzuć okiem na Książka kucharska pracowników usług dla podstawowe fragmenty i pokazy na żywo. To fantastyczny sposób na naukę, studiując to, co zrobili inni klonowanie tego we własnych aplikacjach.

Jeśli masz nadzieję zbudować Progressive Web App zacznij od API Service Worker. Po prostu majsterkuj przy tym i ustaw lokalnie proste demo. To przygotuje grunt na później budowanie niestandardowych funkcji aplikacji i stron to wszystko działa przez pracowników usług.

Dla przewodniki dla początkujących i szczegółowe fragmenty kodu, Szczególnie polecam te zasoby:

Rozpoczęcie pracy z pracownikami serwisu
Rozpoczęcie pracy z pracownikami serwisowymi
Próbka pracownika serwisu: Niestandardowa próbka strony offline

Powłoka aplikacji

Większość natywnych aplikacji podążaj za architekturą powłoki aplikacji gdzie jest kod danych i aplikacji całkowicie oddzielone od interfejsu użytkownika. Powłoka aplikacji może być buforowane lokalnie więc każda strona ładuje się niezwykle szybko.

To jest takie samo “natywna aplikacja” uczucie, gdzie interfejs zawsze pozostaje widoczny ale zawartość / funkcjonalność ładuje się inaczej za każdym razem. Sprawdź tę stronę na stronie Google Developers, aby dowiedzieć się więcej o model powłoki aplikacji.

Większość aplikacji ma bardzo prosta powłoka aplikacji i powinieneś zaprojektować swoją architekturę za pomocą prostota w umyśle.

Zazwyczaj powłoka aplikacji ma takie właściwości główne elementy:

Najlepsze łącza paska nawigacji.
Przycisk Odśwież (opcjonalnie).
Kontener tła strony.

Możesz znaleźć tutaj ładne studium przypadku Architektura powłoki I / O Progressive Web App. Oferują także kilka wskazówek dotyczących budowania własnej architektury powłoki, buforowania jej i ciągnąc go automatycznie dla każdej strony.

Pomyśl o architekturze powłoki jako wszystkie statyczne elementy interfejsu użytkownika użyjesz na każdej stronie. Tak powinno być oddzielone od reszty kodu i buforowane dla łatwego ponownego użycia. Sprawdź także Intro Google do tematu z dużą ilością kodu fragmenty, które pomogą Ci zacząć.

Wsparcie online i offline

Większość natywnych aplikacji biegać bez Internetu. Progresywne aplikacje internetowe mają podążać za tym samym zachowaniem.

Dzięki pracownikom służby możesz budować lokalne pamięci podręczne z kodem JSON dla każdej strony. W ten sposób użytkownicy mogą przeglądaj swoją aplikację internetową lokalnie. Ty też możesz dołącz plik manifestu zdefiniować swoje ikony, ekran powitalny i inne ustawienia uruchamiania.

Jeśli korzystasz z interfejsu Service Worker, zerknij na Cache API który jest część tych samych ram. To na ogół najlepszy sposób przechowuj dane lokalnie i dostęp do niego od pracowników usług później.

Możesz również przetestuj dowolną aplikację internetową za pomocą Latarnia morska, bezpłatne narzędzie do sprawdzania zgodności funkcji i obsługi technologii PWA.

PWA zawsze wymagają wsparcia offline dzięki API Service Worker, aby mogli pracować w stanach niskiej łączności. Latarnia morska to najlepszy sposób na przetestowanie wsparcia w trybie offline wraz z wieloma innymi funkcjami.

Przykłady na żywo

Studiowanie na żywo PWA i zobaczenie, jak działają, to świetny sposób na naukę. Rynek Progressive Web App jest jednak wciąż się pojawia, tak wiele jest najlepszych rozproszone w różnych zakątkach Internetu.

Ale dzięki Galeria skał PWA, Wypróbowałem kilka niesamowitych przykładów, aby pokazać, co naprawdę mogą zrobić PWA.

1. Przelicznik walut

To dość proste przelicznik walut bierze kursy wymiany i oblicza prąd różnice między toną walut na całym świecie.

Zauważysz, że ta aplikacja internetowa jest w pełni responsywny, obsługuje dotyk, i automatyczne aktualizacje bez odświeżania strony.

To tylko niektóre z funkcji, których oczekujesz w każdym typowa aplikacja Progressive Web App. To aplikację można także zapisać lokalnie do telefonu do pracy w trybie offline, chociaż łączy się z plikiem JSON, aby sprawdzić bieżące kursy wymiany.

2. Akcenty angielskie

Po prostu uwielbiam tę aplikację internetową, ponieważ jest wyjątkowa i niezwykle dobrze zaprojektowana. The Mapa akcentów angielskich kuruje filmy online gdzie ludzie niosą akcenty z określonych regionów USA i Wielkiej Brytanii.

Klikając w dowolnym miejscu na mapie, możesz słuchać, jak ludzie wymawiają określone słowa w różnych częściach świata. Aplikacja działa błyskawicznie i jest open-sourced na GitHub dla każdego, aby sprawdzić.

Wewnętrzne elementy działają React / Redux z Baza ogniowa i an Połączenie API z Google Maps. Zdecydowanie świetny przykład czegoś dość prostego dla początkujących do nauki i nauki.

3. Pokedex.org

Innym dość prostym PWA jest to Aplikacja Pokedex stworzony przez Nolana Lawsona. Swój kod opublikował również swobodnie na GitHub, więc to kolejny projekt warto węszyć i studiować.

Ponieważ dane te mogą pozostać statyczne, są to obsługiwane przez lokalny silnik nazywa PouchDB. Wszystkie dane pochodzą z PokeAPI, a następnie zapisywane są jako zwykły JavaScript. Oznacza to, że możesz zapisz go lokalnie w telefonie jak prawdziwa aplikacja natywna i będzie działać z dostępem do Internetu lub bez niego. Całkiem fajnie, prawda?

Cała sprawa jest powered by JavaScript, więc jest to świadectwo, jak wiele możesz zrobić z kodem frontendu. To używa dużo buforowania dzięki API Service Worker, więc jest szalony szybko i bardzo łatwy w użyciu.

4. Flipkart

Wreszcie najbardziej zaskakujące, zobaczmy Strona Flipkart. To pełne Sklep e-commerce to w rzeczywistości Progressive Web App.

Jego w pełni responsywny i ładuje strony dynamicznie. Adresy URL stron są dołączane do przeglądarki, dzięki czemu można je kopiować / wklejać i udostępniać jak typową stronę internetową.

To jest łatwe najbardziej skomplikowane PWA, jakie kiedykolwiek widziałem. Jestem zdumiony, że programiści byli w stanie stworzyć takie płynne doświadczenie w sieci dla wszystkich użytkowników, nie mówiąc już o tym wspieranie lokalnego przechowywania offline, zbyt.

I chociaż nie mogłem znaleźć repo dla całego kodu źródłowego Flipkart, istnieje Strona Flipkart na GitHub z mniejsze fragmenty kodu od ich zespołu programistów.

Uczyć się więcej

Progresywne aplikacje internetowe są niezwykle popularny i na pewno zyska parę w miarę jak coraz więcej programistów przechodzi z aplikacji natywnych / hybrydowych.

Jest coroczny szczyt zwany Progressive Web App Summit i publikują filmy na YouTube, które można oglądać za darmo. To świetny sposób na odebrać profesjonalną wiedzę bez płacenia za bilet.

Ale jeśli szukasz bardziej szczegółowych Przewodniki kodowania PWA zdecydowanie sprawdź te tutoriale:

Przewodnik dla początkujących do progresywnych aplikacji internetowych
Zbuduj swoją pierwszą progresywną aplikację internetową z React
Budowanie progresywnej aplikacji internetowej z polimerem