Samouczek progresywnej aplikacji internetowej: stwórz swój pierwszy PWA

Opublikowany: 2020-06-23

Spis treści

Stworzony przez Google i obecnie wprowadzany na popularne platformy, takie jak Windows 10, PWA może robić wiele rzeczy, które wcześniej były dostępne wyłącznie dla aplikacji natywnych, w tym takie funkcje, jak powiadomienia push, angażujący interfejs aplikacji, funkcje offline, instalacje aplikacji… Ty to nazywasz .

I dlatego pojawienie się PWA nie jest już chwilowe, ponieważ jest to teraz ruch na dużą skalę, który może fundamentalnie zmienić sieć, jaką znamy. Dla nowicjuszy nie jest za późno na poznanie tej rozwijającej się technologii, ponieważ proces budowania PWA jest teraz znacznie uproszczony niż wcześniej, odpowiedni dla zainteresowanych laików, takich jak Ty.

Aby ułatwić Ci naukę, dzisiaj stworzymy w pełni funkcjonalne PWA przy użyciu React, Node.js i Firebase.

Warunki wstępne

Wersja Node.js >= 8.10
wersja npm >= 5,6

Uwagi : wersja npm nie powinna stanowić problemu, ponieważ instalacja Node.js zawsze zawiera najnowszą wersję menedżera pakietów npm .

1. Stwórz SPA za pomocą `create-react-app`

Po pierwsze, potrzebujemy czegoś solidnego do pracy, a create-react-app jest do tego idealnym narzędziem.

 npx create-react-app my-PWA
cd mój-pwa
początek npm

Powyższe polecenia pomogą Ci stworzyć uczące się środowisko oparte na React, z którym będziesz mógł pracować.

Podawaj przez HTTPS

HTTPS to nowy standard dla sieci, a wraz z pojawieniem się PWA, staje się coraz bardziej powszechny. Zwykle PWA musi być obsługiwany przez HTTPS, ponieważ sami pracownicy usług nie mogą bez niego pracować; ale ponieważ pracujemy w środowisku localhost, nie jest to konieczne.

2. Spraw, aby działało w trybie offline

Domyślnie pracownicy usług z create-react-app powinni być wstępnie skonfigurowani do obsługi buforowania offline i ładowania treści, gdy użytkownik nie ma połączenia lub podczas kolejnych wizyt.

Service worker to po prostu skrypt JavaScript, który działa w osobnym wątku niż strona iz tego powodu nie ma dostępu do struktury DOM. To świeże podejście daje początek bardziej progresywnym funkcjom zwiększającym wydajność, ponieważ pracownicy serwisu nie tylko obsługują teraz wszystkie typowe funkcje PWA (funkcje offline, powiadomienia push itp.), ale także odgrywają dużą rolę w odciążeniu ciężkich obliczeń witryny w osobnym wątku.

Aby zainstalować usługi Service Worker na swoim PWA, zajrzyj do /src/index.js .

W index.js poszukaj tej linii

 serviceWorker.unregister()

Zmień unregister() na register() , a Twoje Service Workery zostaną automatycznie zarejestrowane, gdy uruchomisz my-pwa w trybie produkcyjnym . Nie zaleca się włączania pracowników usług w trybie programistycznym, ponieważ może to prowadzić do przypadków, w których program PWA ładuje tylko zasoby z pamięci podręcznej i nie uwzględnia najnowszych zmian lokalnych.

Aby uruchomić my-pwa w trybie produkcyjnym:

 npm uruchom kompilację
npx służyć kompilacji

Następnie otwórz Chrome i przejdź do localhost:5000 , sprawdź go, a zobaczysz, że pracownicy serwisu działają poprawnie na karcie Aplikacja .

W kategorii Pamięć podręczna znajduje się miejsce, w którym chcesz sprawdzić, czy zawartość offline Twojej witryny jest prawidłowo buforowana.

Uwagi : Istnieje obejście polegające na zarejestrowaniu pracowników serwisu w trybie nieprodukcyjnym. Jest to osiągane przez usunięcie wiersza process.env.NODE_ENV === 'production' z src/serviceWorker.js .

Jeśli chcesz zagłębić się w tę sprawę i stworzyć od podstaw własnych Service Workerów i nie polegać na wstępnie skonfigurowanych konfiguracjach Reacta, mamy Cię. W tym samouczku pokażemy, jak utworzyć najpierw progresywną aplikację internetową w trybie offline z prostej aplikacji internetowej.

3. Skonfiguruj dodawanie do ekranu głównego

Jeśli do tej pory wszystko zostało zrobione poprawnie, powinieneś zobaczyć małą ikonę instalacji (+) podczas uruchamiania produkcyjnej wersji twojego my-pwa .

Zainstaluj PWA — Instalowanie PWA na wielu urządzeniach z Magento PWA SimiCart

Ponieważ wszystko odbywa się za Ciebie automatycznie, prawdopodobnie zastanawiasz się, jak to wszystko było możliwe. Nie martw się, dlatego tu jesteśmy.

Aby przygotować PWA A2HS (Dodaj do ekranu głównego), potrzebujemy manifest.json . Plik manifest.json dostarczany z create-react-app to bardzo prosty plik JSON, który określa sposób wyświetlania ikon aplikacji dla użytkownika i określa wygląd ekranu powitalnego. Aby je dostosować, zmień istniejący plik w /public/manifest.json .

 {
  "short_name": "Moje pierwsze PWA",
  "name": "Utwórz proste PWA",
  "ikony": [
    {
      "src": "favicon.ico",
      "rozmiary": "64x64 32x32 24x24 16x16",
      "typ": "obraz/ikona x"
    },
    {
      "src": "logo192.png",
      "typ": "obraz/png",
      "rozmiary": "192x192"
    },
    {
      "src": "logo512.png",
      "typ": "obraz/png",
      "rozmiary": "512x512"
    }
  ],
  "start_url": ".",
  "wyświetlacz": "samodzielny",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Większość informacji tutaj nie wymaga wyjaśnień, ale jeśli chcesz zagłębić się w plik manifest.json i wydarzenia, które prowadzą do instalacji PWA, napisaliśmy o tym artykuł. Nie zapomnij tego sprawdzić.

Uwagi : Aby manifest.json działał, musisz uwzględnić go w index.html . Domyślnie create-react-app powinna już zrobić to za Ciebie.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Po zarejestrowaniu PWA w Service Workerach i prawidłowym pliku manifest.json , po uruchomieniu aplikacji przez użytkownika zostanie uruchomiony komunikat beforeinstallpromt z prośbą o pozwolenie na zainstalowanie PWA na ekranie głównym użytkownika.

Należy jednak zauważyć, że tylko zarysowujemy powierzchnię procesu A2HS (Dodaj do ekranu głównego), a wciąż jest wiele do nauczenia się. Uważamy, że najlepszym sposobem na nauczenie się czegokolwiek jest budowanie tego od podstaw, dlatego przygotowaliśmy dla Ciebie krótki przewodnik po tej specyficznej funkcji PWA. Poradnik przeprowadzi Cię przez kilka ważnych części wydarzeń związanych z instalacją PWA.

Alternatywnie, jeśli czujesz się leniwy i pozbawiony motywacji, jesteśmy tutaj, aby Ci pomóc. Nasz Generator Manifestów został stworzony, aby zautomatyzować cały ten proces dla Ciebie.

4. Skonfiguruj powiadomienia push

Przeglądarki przeszły długą drogę w zakresie obsługi powiadomień push. Od niedawna Chrome wprowadził nawet wyzwalacze powiadomień, aby umożliwić wyświetlanie powiadomień w trybie samolotowym. To ogromny krok naprzód w przypadku powiadomień push.

Wyzwalacze powiadomień Chrome — *Nowość w Chrome 80, **wyzwalacze** powiadomień umożliwiają powiadomienia nawet w trybie samolotowym*

Do tej pory musisz się zastanawiać, gdzie w tym samouczku jest ta część, która korzysta z Firebase. Cóż, to jest to. W tej części poznasz proces integracji powiadomień push z PWA za pomocą Firebase, a konkretnie zawartej w nim funkcji Cloud Messaging , która umożliwia wysyłanie wiadomości za pomocą żądań HTTPS.

Ale ponieważ cały proces jest trochę długi, a także aby pomóc Ci lepiej śledzić całość, przygotowaliśmy dla Ciebie własny samouczek integracji powiadomień push. Dzięki temu samouczkowi nie powinieneś mieć żadnych problemów podczas próby wysłania powiadomień push do tokena użytkownika lub do grupy użytkowników.

Wniosek

I to wszystko w przypadku kompletnego PWA. Nie wahaj się zadać nam pytań, jeśli utkniesz w jakiejkolwiek części samouczka, a my postaramy się jak najlepiej odpowiedzieć!

Czytaj więcej:
Jak zintegrować PWA z Magento 2?