Jak zbudować progresywną aplikację internetową

Sep 12, 2025

Jak

Mobile relacji teraz przez ponad połowę ruchu internetowego, a aplikacje internetowe umożliwiają użytkownikom robić rzeczy w przeglądarce, które Rival Native Apps, ale jest problem: jakość połączeń i urządzeń różni się znacznie na całym świecie.

Catering zarówno użytkownikom na błyskawicznych połączeń w Seulu, jak i użytkownikach w Indiach Wiejskich na nieaktualnym telefonie, jest najnowszym wyzwaniem użyteczności, a także progresywne aplikacje internetowe są rozwiązaniem.

PWA Użyj postępującego zwiększenia, aby najpierw załadować najważniejszą zawartość, a następnie dodać zakłady prezentacyjne i funkcjonalne zgodnie z wymaganiami, co oznacza, że wszyscy użytkownicy otrzymują takie same doświadczenie podstawowe jak najszybsze. Jeśli chcesz dotrzeć do najszerszej możliwej publiczności, PWA są drogą.

10 kroków do angażującego doświadczenia użytkownika

Choć progresywne aplikacje internetowe przynoszą wiele korzyści i funkcjonalności do sieci, nie wymagają przepisywania całej aplikacji. Każda aplikacja może zostać przekonwertowana na PWA, dodając do niego kilka dodatkowych warstw.

Aby uzyskać najlepsze wyniki, chcesz mieć silny nacisk na wydajność od samego początku - ale to prawda z dowolnej aplikacji internetowej. Tutaj przejdziemy przez kroki, aby twoja aplikacja postępuje.

Jeśli chcesz zbudować płynną stronę, upewnij się, że jesteś hosting jest na miejscu i użyj przyzwoitych Kreator strony internetowej .

01. Podawaj się na HTTPS

Bądźmy szczery: powinieneś to robić. SSL dodaje dodatkową warstwę bezpieczeństwa do sieci, pomagając użytkownikom bezpieczne w użyciu witryny. Dzięki PWA HTTPS jest niezbędne do korzystania z pracowników serwisowych i umożliwiając instalację ekranu. Możesz kupić certyfikat SSL z rejestratora domeny na małym wydatku, a następnie skonfigurować go za pośrednictwem usługi hostingowej.

02. Utwórz powłokę aplikacji

Twoja powłoka aplikacji jest pierwszą rzeczą, która ładuje się - pierwsza rzecz, którą użytkownik widzi. Należy istnieć w całości w dokumencie indeksu HTML, z Inline CSS, aby upewnić się, że pojawia się tak szybko, jak to możliwe, a użytkownik wpatruje się na biały ekran dłużej niż to konieczne. Powłoka aplikacji stanowi część wzoru postępowego ulepszenia. Twoja aplikacja powinna podać treści użytkownika jak najszybciej, a następnie stopniowo poprawić go jako więcej danych (prawdopodobnie JavaScript).

Poniższy przykład jest pobierany z aplikacji react.js. Użytkownik jest przedstawiony z konturem aplikacji i wskaźnikiem ładowania w index.html. Następnie, gdy obciążenia JavaScript i reaguje na buty, pełne zastosowanie jest renderowane w skorupce.

! - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; Div ID = "Kontener" & GT;
  & lt; div class = "pojemnik wewnętrzny" & gt;
  & lt; div ID = "Header" & GT;
  & lt; img src = "/ zasoby / ikona.png" alt = "logo" / & gt;
  & lt; h1 & gt; / h1 & gt;
  & lt; / div & gt;
  & lt; div ID = "Loading-Container" & GT;
  & lt; img src = "/ atsets / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reakcja.Render (
& lt; app / & gt ;,
dokument.getElementByid ("root")
);

03. Zarejestruj pracownik serwisowy

Aby wykorzystać pełne spektrum PWA Goody (push Powiadomienia, buforowanie, monitowie instalacji) będziesz potrzebować pracownika usługowego.

Na szczęście są dość łatwe do skonfigurowania. Poniżej najpierw sprawdzamy, czy przeglądarka użytkownika obsługuje pracowników serwisowych. Wtedy, jeśli tak, możemy poruszać się przed rejestracją pliku pracownika usług, zwany tutaj serwis-pracownik.js. . Należy pamiętać, że w tym momencie nie potrzebujesz nic specjalnego, może być puste.

W poniższym przykładzie pokazujemy jednak, jak wykorzystać do trzech kluczowych wydarzeń cyklu życia w dziedzinie życia. Są to "install", gdy użytkownik odwiedza stronę; "Aktywuj", tuż przed zakończeniem rejestracji; i "Fetch", gdy aplikacja ma żądanie sieci. Ostatni jest istotna dla możliwości buforowania i offline.

& lt; script & gt;
  Jeśli ("serwisowy" w Navigator) {
  window.addeventlistener ("obciążenie", funkcja () {
  NAVIGATOR.SERVICORDERER.register ("serwis-pracownik.js"). Następnie (funkcja (rejestracja) {
  // Rejestracja zakończyła się sukcesem
  Console.log ("Zarejestrowany!");
  }, Funkcja (Err) {
  // Rejestracja nieudana :(
  console.log ("Rejestracja serwisowa nie powiodła się:", Err);
  }). Catch (Funkcja (Err) {
  konsola.log (Err);
  });
  });
  } else {
  Console.log ("Pracownik serwisowy nie jest obsługiwany");
  }
  & lt; / script & gt;
// serwis-pracownik.js
self.addeventlistener ("zainstaluj", funkcja () {
  konsola.log ("instalacja!");
});
self.addeventlistener ("Aktywuj", wydarzenie = & gt; {
  Console.log ("Aktywuj!");
});
self.addeventlistener ("fetch", funkcja (wydarzenie) {
  Console.log ("Fetch!", Event.Request);
});

04. Dodaj powiadomienia push

Pracownicy usług pozwalają użytkownikom odbierać powiadomienia push za pośrednictwem interfejsu API w sieci. Aby uzyskać dostęp do niego, możesz dotknąć self.registration.pushmanager. z pliku pracownika serwisowego. Ponieważ wysyłanie powiadomień push mocno opiera się na konfiguracji zaplecza, nie nurkujemy go tutaj.

Jeśli zaczynasz aplikację od podstaw, usługa FireBase Google jest wyposażona w Wiadomości Cloud FireBase dla stosunkowo bezbolesnych powiadomień push (Pamiętaj: upewnij się, że zachowujesz bezpieczne pliki projektowe magazyn w chmurze) . Poniższy kod pokazuje, jak zarejestrować się do powiadomień push za pośrednictwem API push.

 NAVIGATOR.SERVICORDER.Ready.Then (funkcja (rejestracja) {
  Jeśli (! rejestracja.pushmanager) {
    Alert ("Brak wsparcia powiadomień push");
    zwracać false;
  }
  //, aby subskrybować `Push Powiadomienie o Menedżerze
  Rejestracja.Pushmanager.subscribisz ({
  Uservisibleonly: True // Zawsze pokaż powiadomienie po otrzymaniu
  })
  .The (funkcja (subskrypcja) {
  konsola.log ("subskrybowany");
  })
  .Catch (funkcja (błąd) {
  Console.log ("Błąd subskrypcji:", błąd);
  });
})

05. Dodaj manifest aplikacji internetowych

Aby zainstalować aplikację, musisz dołączyć manifest.json. W katalogu głównym aplikacji. Możesz myśleć o tym jako opis aplikacji, podobnie jak do tego, co możesz przesłać do App Store. Zawiera ikony, ekran powitalny, nazwę i opis.

Istnieje również pewna konfiguracja, w jaki sposób pojawia się aplikacja, gdy zostanie uruchomiona z ekranu głównego użytkownika: Czy chcesz wyświetlić pasek adresu w przeglądarce, czy nie? Jaki kolor chcesz być pasek statusu? I tak dalej. Zauważ, że właściwe manifest.json. powinien zawierać pełne spektrum rozmiarów ikon dla różnych urządzeń. Poniższy kod jest podgląd niektórych właściwości, które można dołączyć.

 {
  "Nazwa krótka": "Czat",
  "Nazwa": "Czat",
  "Ikony": [
  {
  "SRC": "/ Assets / Icon.png",
  "Rozmiary": "192x192",
  "Wpisz": "Image / png"
  }
  ],
  "Start_url": "/? utm_source = Homescreen",
  "Background_Color": "# E05A47",
  "Theme_Color": "# E05A47",
  "Wyświetlacz": "samodzielny"
}

06. Skonfiguruj monit instalacyjny

Gdy użytkownik odwiedza PWA z pracownikiem serwisowym i manifestem, Chrome automatycznie poprosi ich, aby zainstalować go na ekranie głównym, biorąc pod uwagę: Użytkownik musi dwukrotnie odwiedzać witrynę, z pięcioma minutami między wizytami.

Chodzi o to, aby czekać, aż użytkownik nie zademonstruje zainteresowanie Twoją aplikacją, a następnie poprosić ich, aby ukończyć go urządzeniem (jest to w ostrym kontraście z rodzimym podejściem do aplikacji, co zwraca się o tę inwestycję w górę).

Ale mogą wystąpić przypadki, w których chcesz pokazać monit instalacyjny w różnych sytuacjach, np. Po tym, jak użytkownik podejmie określoną czynność. Aby to zrobić, przechwytujemy przedinstalowaniem Wydarzenie i zapisz go na później, a następnie wdrożyć monit, gdy widzimy dopasowanie.

 Window.addeventlistener ("przed przedinstalowaniem", e = & gt; {
  Console.log (wystrzelono "przed wystrzeleniem wydarzenia przed
  e.preventdefault ();
  // zapnij wydarzenie, dzięki czemu można go uruchomić później.
  to.deferredprompt = e;
  zwracać false;
  });
// gdy chcesz wywołać monit:
to.deferredprompt.prompt ();
  to.deferredprompt.userchoice.Then (Choice = & GT; {
  konsola.log (wybór);
  });
to.deferredprompt = null;

07. Przeanalizuj wydajność swojej aplikacji

Wydajność jest sercem i duszą PWA. Twoja aplikacja powinna być szybka dla użytkowników we wszystkich warunkach sieciowych. Możliwość buforowania i offline bardzo pomaga, ale pod koniec dnia aplikacja powinna być szybka, nawet jeśli użytkownik nie ma przeglądarki do obsługi technologii pracowników usługowych. Jest to definicja postępowego ulepszenia - zapewnić wspaniałe doświadczenie dla wszystkich, niezależnie od urządzeń nowoczesności lub warunków sieciowych.

Aby to zrobić, przydatnym zestawem metryk jest system szyn. Rail jest tym, co Google wywołuje "Model wydajności z centryczną użytkownika" - zestaw wytycznych dotyczących pomiaru wydajności naszej aplikacji.

Akronym oznacza odpowiedź (jak długo zajmuje aplikację do odpowiedzi na działania użytkownika), animacja (utrzymywanie prędkości animacji w 60FPS), bezczynności (za pomocą czasu, gdy aplikacja nie robi niczego innego do załadowania i pamięci podręcznej dodatkowych aktywów) i Ładować (ładowanie aplikacji w ciągu jednej sekundy lub mniejszej).

Oto stół znaczących benchmarków do załadunku aplikacji, jak dostarczane przez Meggin Kearney, Pisarz Tech Google Web Fundamentals. .

delay and user reaction — Kliknij ikonę w prawym górnym rogu, aby powiększyć obraz

08. Audytuj swoją aplikację z latarnią morską

Google jest największym mistrzem pchającym progresywne aplikacje internetowe jako przyszłość sieci. W związku z tym dostarczył użyteczne narzędzie do prowadzenia rozwoju PWA.

Dawniej nazywana latarnią morską i dostarczana jako rozszerzenie chromu, od chromu 60, jest częścią chromowanych devtools, na karcie "Audyt". Jaka latarnia morska jest prowadzona w różnych warunkach i zmierzyć jego odpowiedź i sukces zgodnie z wytycznymi PWA. Następnie daje wynik na 100. Może również zdobyć twoją aplikację na temat najlepszych praktyk internetowych w tym samym czasie.

Poniższy tekst jest wymierzony lista lighthouse wartości. W użyciu również pokazuje opisy.

Rejestruje pracownik służby
Odpowiada 200 lat podczas offline
Zawiera trochę treści, gdy JavaScript nie jest dostępny
Używa https.
Przekieruj ruch HTTP do HTTPS
Ładunek strony jest wystarczająco szybki na 3G
Użytkownik może zostać wyświetlony monit o zainstalowanie aplikacji internetowej
Skonfigurowany dla niestandardowego ekranu powitalnego
Pasek adresów pasuje do kolorów marki
Ma & LT; Meta Name = "rzutek" & gt; tag szerokość lub Wstępna skala
Treść jest poprawnie rozmiaru dla rzutni

Ten artykuł pierwotnie pojawił się w projektancie internetowym; Subskrybuj tutaj .

Powiązane artykuły:

PWA: Witamy na rewolucji mobilnej
Jak korzystać z animacji w aplikacjach mobilnych
9 Niesamowite tajemnice PWA

Jak zbudować progresywną aplikację internetową

01. Podawaj się na HTTPS

02. Utwórz powłokę aplikacji

03. Zarejestruj pracownik serwisowy

04. Dodaj powiadomienia push

05. Dodaj manifest aplikacji internetowych

06. Skonfiguruj monit instalacyjny

07. Przeanalizuj wydajność swojej aplikacji

08. Audytuj swoją aplikację z latarnią morską

Jak - Najpopularniejsze artykuły

Jak połączyć sztukę 3D i komiks w Zbrush

Zacznij od rdzy

Jak cyfrowo rzeźbić w Zbrushcore

Popraw swoje uderzenia pędzla w olejach

Maluj futrzany portret zwierzęcia

Tekstura autentycznie noszony K-2SO Droid

Jak uzyskać więcej z tekstur cyfrowych

Jak sprawić, aby Twoja strona WordPress wielojęzyczna

Kategorie