Responsywne projektowanie stron internetowych i progresywna aplikacja internetowa (PWA): różnice

Ponieważ te dwa są tak podobne pod względem wyglądu i działania, musisz się zastanawiać, dlaczego nie ma bardziej szczegółowego porównania między dwoma popularnymi podejściami do tworzenia stron internetowych: responsywnym projektowaniem stron internetowych i progresywną aplikacją internetową. Cóż, to jest to . W tym artykule porównamy responsywne projektowanie stron internetowych z progresywną aplikacją internetową i dowiemy się, czym tak naprawdę różnią się one od siebie.

Responsywne projektowanie stron internetowych

Co to jest

Responsywne projektowanie stron internetowych (RWD) to podejście do tworzenia stron internetowych, które po raz pierwszy opisał Ethan Marcotte w 2010 roku — pięć lat wcześniej niż koncepcja Progressive Web App.

Jak to działa

Zasadniczo filozofia responsywnego projektowania stron internetowych polega na tym, że projektowanie i rozwój powinny mieć na celu reagowanie na urządzenie użytkownika, co oznacza reagowanie na zachowanie, rozmiar, platformę i orientację używanego urządzenia. Osiąga się to za pomocą elastycznych siatek, elastycznych obrazów i zapytań o media CSS:

Siatki płynne, elastyczne obrazy i zapytania o media to trzy techniczne składniki responsywnego projektowania stron internetowych…

Ethan Marcotte, Responsive Web Design

Siatki płynne

Responsywne strony internetowe zaprojektowane z płynnymi siatkami lepiej radzą sobie z różnymi rozmiarami ekranu na rynku, ponieważ zamiast definiować wymiary oparte na pikselach, płynna siatka przyjmuje nowe obliczenia procentowe.

Elastyczne obrazy

Obrazy w Internecie nie są naturalnie płynne, ale przy niektórych konfiguracjach (właściwość width ustawiona na 100% i właściwość height ustawiona na auto ), każdy obraz można dostosować do wszystkich urządzeń.

Zapytania o media CSS

Chociaż responsywna strona internetowa z elastycznymi obrazami i płynnymi siatkami jest technicznie responsywna, nie wygląda tak dobrze, jak może być. W tym miejscu w grę wchodzą zapytania o media CSS, które są wykorzystywane do tworzenia jeszcze lepszych doświadczeń, dostosowanych do różnych urządzeń. Te dostosowane środowiska są często wprowadzane przez dodanie punktów przerwania, które działają na określonych rozmiarach ekranu.

Ogólnie rzecz biorąc, responsywne projektowanie stron internetowych sprawiło, że dzisiejsza sieć jest o wiele bardziej dostępna, ponieważ podejście eliminuje potrzebę większej liczby faz rozwoju, które wcześniej były wymagane, aby dostosować się do różnych rozmiarów ekranu na rynku. Lub, w słowach jego twórcy, to podejście do tworzenia stron internetowych w końcu pozwala nam “ projektować dla przypływów i odpływów rzeczy ”.

Przykłady

Responsywne strony internetowe są w dzisiejszych czasach powszechne, a prawie każda strona internetowa, na którą się natkniesz, jest w pewnym sensie responsywna.

Progresywne aplikacje internetowe

Co to jest

Po raz pierwszy wymyślona przez Alexa Russela w 2015 roku, Progressive Web App to kolejna naturalna ewolucja sieci ze względu na wiele zalet w stosunku do typowej responsywnej strony internetowej. Według Pete'a LePage – Google Developer Advocate, część „ progresywna ” można wyjaśnić jako „ ponieważ użytkownik stopniowo buduje relację z aplikacją, z czasem staje się ona coraz silniejsza ”.

Mówiąc prościej, PWA to witryna przypominająca aplikację z (prawie) wszystkimi funkcjami, jakich można oczekiwać od natywnej aplikacji mobilnej , w tym powiadomieniami push, funkcjami offline i tak dalej. Z tego powodu całe doświadczenie jest krokiem naprzód w stosunku do responsywnego odpowiednika strony internetowej, ponieważ PWA może zachować wszystkie rzekome korzyści, które wiążą się z platformą internetową.

 Powiązany artykuł: Co to jest progresywna aplikacja internetowa?

Jak to działa

W rzeczywistości dość łatwo jest podsumować podstawowe komponenty PWA. Zasadniczo, aby wszystkie wyżej wymienione progresywne funkcje były możliwe, są to wymagania:

Manifest aplikacji internetowej

Manifest aplikacji sieci Web to plik JSON, który zawiera metadane niezbędne do procesu instalacji aplikacji PWA i określa, jak aplikacja PWA prezentuje się na ekranie głównym użytkownika.

Pracownicy usług

Powszechnie uważany za podstawowy składnik, który umożliwia wszystkie progresywne funkcje PWA, pracownicy usług działają niezależnie od przeglądarki i w innym wątku niż główny JavaScript.

Bezpieczne konteksty

Jako nowy standard sieci Web wymaga się, aby PWA było odcięte przez bezpieczny protokół — HTTPS. Gwarantuje to bezpieczną komunikację między użytkownikiem a serwerem, a w zamian zapewnia wolną od ryzyka obsługę.

Przykłady

Ponieważ aplikacje PWA zachowują się nie inaczej niż natywne aplikacje mobilne, mogłeś wcześniej odwiedzić witrynę PWA, nie wiedząc o tym. Pomyśl o dużych, podobnych do aplikacji witrynach, takich jak Instagram i Pinterest — wszystkie są obsługiwane przez PWA.

 Zalecana literatura: 12 najlepszych przykładów progresywnych aplikacji internetowych w 2020 roku

Gdzie się nakładają

Podobne doświadczenie z nowoczesnymi funkcjami

Jeśli do tej pory wszystko ma dla Ciebie sens, powinieneś zauważyć, że responsywne projektowanie stron internetowych (RWD) i PWA bardzo się pokrywają, jeśli chodzi o user experience. Z technicznego punktu widzenia PWA jest responsywny — ponieważ podejście to ma być odpowiednie do wyświetlania na wszystkich urządzeniach, z odrobiną nowoczesnego dotyku, aby umożliwić więcej funkcji podobnych do aplikacji.

A ponieważ oba są podejściami do tworzenia stron internetowych, mają prawie wszystkie te same korzyści z sieci, które obejmują:

• Jeden adres URL, jedna baza kodu dla wszystkich platform
• Większe bezpieczeństwo dzięki HTTPS
• Lepsza wykrywalność i zawsze aktualne

Gdzie się różnią

W tym momencie sprawy stają się interesujące, ponieważ te dwa podejścia do tworzenia stron internetowych – choć w większości podobne w wyglądzie – różnią się znacznie pod względem ich wpływu w świecie rzeczywistym.

Pod względem funkcji

PWA z definicji zawiera więcej funkcji niż typowa responsywna strona internetowa. Wykorzystując najnowsze postępy w technologiach internetowych, tj. Service Worker i manifest aplikacji internetowej, PWA może dostarczać funkcje, które wcześniej były dostępne wyłącznie dla natywnych aplikacji mobilnych, takie jak:

Dodaj do ekranu głównego

Dzięki zarejestrowanym pracownikom usług i manifestowi aplikacji internetowej PWA można zainstalować na każdym urządzeniu, które ma obsługującą przeglądarkę.

>> Dowiedz się więcej: Stwórz swoje pierwsze PWA

Powiadomienia push

Za pośrednictwem Service Workerów możesz wysyłać powiadomienia i wyświetlać je na urządzeniach użytkownika tak, jak robiłaby to aplikacja natywna. Jest to stosunkowo nowa funkcja sieci Web, która wykorzystuje Push API, Notifications API i Web Push Protocol; a w niedalekiej przyszłości ta funkcja będzie jeszcze lepsza dzięki pojawieniu się wyzwalaczy powiadomień i interfejsu API odznak.

Możliwości offline

Dzięki pomocy wbudowanego w przeglądarkę programowalnego sieciowego proxy, a mianowicie Service Worker, PWA może proaktywnie buforować i obsługiwać treści offline bez konieczności polegania na przestarzałych mechanizmach buforowania, takich jak pamięć podręczna HTTP.

Uwagi : responsywne witryny internetowe mogą nadal korzystać ze wszystkich istniejących interfejsów API z sieci, aby zapewnić użytkownikom optymalne wrażenia — po prostu nie uzyskasz wszystkich funkcji zależnych od pracowników usług.

 Zalecana literatura: Progressive Web App (PWA) i dostęp do sprzętu

Pod względem wydajności

Ponieważ responsywne strony internetowe są nadal typową witryną internetową, powstrzymywaną przez wszystkie wady związane z obecnym mechanizmem buforowania HTTP, rozsądne jest oczekiwanie lepszej wydajności od PWA, ponieważ używa nowszego, bardziej zorientowanego na wydajność mechanizmu buforowania zwanego Service Worker.

Szybszy mechanizm buforowania

Po zarejestrowaniu pracowników usług możesz dokładnie kontrolować, co jest buforowane , i dzięki temu zapewniać lepsze wrażenia powracającym odwiedzającym.

Wpływ pracowników usług serwisowych na wydajność w rzeczywistości nie jest również czymś, co nie zostało dokładnie zaobserwowane. Wykorzystując czas na pierwsze malowanie jako metrykę do pomiaru pierwszego doświadczenia użytkownika z witryną, firma Google sama przeprowadziła badanie obserwujące wydajność aplikacji internetowej Google I/O z kontrolowaną grupą (gdzie pracownik serwisu kontroluje aplikację internetową) i obsługiwana grupa (gdzie usługa działa, jest obsługiwana przez używaną przeglądarkę, ale nie kontroluje jeszcze aplikacji internetowej).

Wyniki były szczególnie imponujące na komputerach stacjonarnych, ponieważ tutaj widzimy, że pracownicy serwisu przyczynili się do firstpaint pierwotnego czasu pierwszego malowania (912 ms) do zaledwie 583 ms . To jest tak blisko natychmiastowego doświadczenia, jak to tylko możliwe.

Sprawy wyglądają jednak nieco mniej imponująco na urządzeniach mobilnych:

Tutaj widzimy, że koniec kontrolowanej grupy nadal wygląda trochę podobnie do obsługiwanej grupy. Wynika to w dużej mierze z faktu, że na urządzeniach mobilnych wątki Service Worker nie są tak zoptymalizowane i potrzebują więcej czasu na uruchomienie w porównaniu do komputerów stacjonarnych.

Ogólnie rzecz biorąc, wzrost wydajności osiągnięty dzięki pracownikom usług — lub innymi słowy, dzięki PWA — jest fenomenalny. Oczywiście jest jeszcze trochę pracy do wykonania po stronie mobilnych pracowników usług; ale czujemy, że ogólnie rzecz biorąc, jest to wciąż marginalny krok w stosunku do tego, czym kiedyś był Internet, i to krok we właściwym kierunku.

Pod względem bezpieczeństwa

HTTPS — linia podziału

Chociaż typowa responsywna strona internetowa może być tak samo bezpieczna jak PWA, od responsywnych stron internetowych nie jest wymagane używanie bezpiecznych protokołów komunikacyjnych. W przypadku stron opartych na PWA jest odwrotnie, ponieważ Google, założyciel PWA, wymaga, aby cała komunikacja między serwerem a klientem w PWA była szyfrowana za pomocą protokołu HTTPS.

Większość funkcji związanych z PWA, takich jak geolokalizacja, a nawet pracownicy usług, jest dostępna dopiero po załadowaniu aplikacji za pomocą protokołu HTTPS.

Dokumentacja internetowa MDN, progresywne aplikacje internetowe (PWA)

 Powiązany artykuł: Czy potrzebujesz HTTPS?

Wniosek

Wspomniany wyżej wzrost wydajności osiągnięty dzięki pracownikom usług, w połączeniu z dodatkowymi funkcjami podobnymi do aplikacji, takimi jak powiadomienia push, dodanie do ekranu głównego (a w niedalekiej przyszłości geofencing i okresowa synchronizacja), wszystko to sprawia, że ​​PWA jest odpowiednim kandydatem do bycia następnym ewolucja sieci. W tej chwili ruch PWA jest już szeroko wspierany przez prawie wszystkich wielkich facetów, w tym Microsoft, który naciska na adopcje PWA w Windows 10. Już niedługo zobaczymy przyszłość pełną progresywnych aplikacji internetowych – takich jak ten, który wyobrażał sobie Steve Jobs:

Pełny silnik Safari znajduje się wewnątrz iPhone'a. I tak, możesz pisać niesamowite aplikacje Web 2.0 i Ajax, które wyglądają dokładnie i zachowują się dokładnie tak, jak aplikacje na iPhonie. A te aplikacje doskonale integrują się z usługami iPhone'a. Mogą zadzwonić, wysłać e-mail, wyszukać lokalizację w Mapach Google.

Steve Jobs, 2007