Jak zintegrować Dodaj do ekranu głównego z PWA?

Dodaj do ekranu głównego (w skrócie A2HS) ma fundamentalne znaczenie dla korzystania z progresywnych aplikacji internetowych, ponieważ umożliwia pełne korzystanie z aplikacji natywnych, w tym uruchamianie aplikacji z ekranu głównego użytkownika.

 Polecana literatura: PWA vs Native: co pasuje do Ciebie lepiej?

Będąc tak istotną cechą Twojego PWA, z pewnością nie możesz nie mieć go zintegrowanego, dlatego dzisiaj w samouczku SimiCart PWA omówimy powody, dla których A2HS jest konieczne, jak to jest używane i jak zrobić PWA Gotowy do A2HS, zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

Obsługiwane przeglądarki

A2HS jest bardzo bliski bycia uniwersalną funkcją między przeglądarkami. Obecnie jest obsługiwany przez Mobile Chrome/Android Webview (od wersji 31 ​​i nowsze), Opera na Androida (od wersji 32 i nowsze) i Firefox dla Androida (od wersji 58 i nowsze). Aby uzyskać bardziej szczegółowy widok, odwiedź witrynę CanIUse.

PWA Dodaj do ekranu głównego w akcji

Gdy natkniesz się na witrynę z włączonym PWA Dodaj do ekranu głównego (włączone A2HS), baner informujący, że witrynę można dodać do ekranu głównego, można zobaczyć na dole interfejsu użytkownika:

Jest to domyślna promocja instalacji udostępniana przez przeglądarkę , która ma miejsce, gdy spełnione są określone kryteria instalacji. Samo powiadomienie zostanie wyświetlone przy pierwszej wizycie użytkownika w Twojej witrynie, a następnie ponownie po około 90 dniach.

Jak zrobić aplikację internetową z obsługą A2HS na urządzeniu mobilnym?

Instalowalne kryteria

Aby Twoja aplikacja internetowa była możliwa do zainstalowania, musi:

• jeszcze nie być zainstalowany
• spełnia heurystykę zaangażowania użytkownika (użytkownik musi wchodzić w interakcję ze stroną przez co najmniej 30 sekund)
• być obsługiwane z bezpiecznego połączenia (HTTPS)
• mieć zarejestrowanego pracownika serwisu
• mieć prawidłowo skonfigurowany plik manifestu
• A co najważniejsze, używana przeglądarka musi obsługiwać zdarzenie beforeinstallprompt . Pełną listę przeglądarek obsługujących zdarzenie beforeinstallprompt można znaleźć w artykule CanIUse.

Rozpoczęcie pracy

W celach demonstracyjnych w tym artykule użyjemy projektu create-react-app jako podstawy do stworzenia instalowalnego PWA. create-react-app to proste polecenie React do tworzenia aplikacji jednostronicowej.

Uwaga : create-react-app wymaga co najmniej węzła >= 10,16 i npm >= 5,6

Otwórz wiersz polecenia Node.js, uruchom następujące polecenia:

 npx create-react-app pwa-a2hs
cd pwa-a2hs
początek przędzy 

Utwórz plik manifestu

Manifest internetowy, zwykle znajdujący się głęboko w folderze głównym aplikacji internetowej, to plik zawierający wszystkie niezbędne informacje dotyczące witryny — takie jak tytuł aplikacji, ścieżki do różnych ikon, kolor tła itp. — w formacie JSON. Plik manifestu internetowego ma kluczowe znaczenie dla funkcjonalnej aplikacji internetowej, ponieważ umożliwia właściwą prezentację aplikacji internetowej na różnych etapach jej użytkowania.

Zalecamy użycie generatora manifestów, aby automatycznie wygenerować plik, wraz z ikonami zoptymalizowanymi pod względem rozmiaru dla Twojej aplikacji.

Korzystając z generatora manifestów, możesz mieć plik manifest.zip o takiej treści:

Twój manifest.webmanifest powinien wyglądać mniej więcej tak:

 {
    "theme_color": "#f69435",
    "background_color": "#f69435",
    "wyświetlacz": "samodzielny",
    "zakres": "/",
    "start_url": ".",
    "nazwa": "PWA-A2HS",
    "short_name": "PWA",
    "description": "Demo PWA dla funkcji A2HS",
    "ikony": [
        {
            "src": "/icon-192x192.png",
            "rozmiary": "192x192",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-256x256.png",
            "rozmiary": "256x256",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-384x384.png",
            "rozmiary": "384x384",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-512x512.png",
            "rozmiary": "512x512",
            "typ": "obraz/png"
        }
    ]
}

Teraz skopiuj zawartość wygenerowanych plików manifestu do folderu /public/ , usuń domyślny plik manifest.json w tym folderze i przejdź do następnego kroku.

Połącz kod HTML z manifestem

Po zakończeniu konfigurowania pliku manifestu zapisz go w katalogu głównym witryny, aby można było go później wywołać ze ścieżką względną, tj. /manifest.webmanifest . Aby zakończyć konfigurację pliku manifestu, odnieś się do niego w nagłówku HTML ( \pwa-a2hs\public\index.html ), na przykład:

 <głowa>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=szerokość-urządzenia, początkowa-skala=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      nazwa="opis"
      content="Strona internetowa utworzona za pomocą aplikacji create-react-app"
    />
    <link rel="ikona-dotyku-apple" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <title>PWA A2HS</title>
  </head>

Skonfiguruj przebieg instalacji

Manifest aplikacji internetowej to nie wszystko, co jest wymagane do zainstalowania aplikacji internetowej. Jest trochę dodatkowej konfiguracji, którą musisz wykonać, aby Twoja aplikacja internetowa była instalowalna, a tym samym zbliżona o krok do PWA.

Utwórz pracownika serwisu

Service Worker przechwytuje żądania sieciowe i włącza różne funkcje podobne do aplikacji, z których słynie PWA. Utwórz plik service-worker.js w pwa-a2hs\public i wypełnij go następującą treścią:

 self.addEventListener('pobierz', function(event) {
  zdarzenie.odpowiedźZ(
      caches.match(event.request).then(function(odpowiedź) {
          odpowiedź zwrotna || pobierz(zdarzenie.żądanie);
      })
  );
});

Tutaj musimy wysłuchać zdarzenia fetch , ponieważ jest ono kluczowe dla dodania do ekranu głównego, bez niego Twoja aplikacja React nie będzie w stanie spełnić wymagań dotyczących instalacji.

Zarejestruj pracowników serwisu

Aby nasz service-worker.js działał, musimy go zarejestrować, wstawiając ten kod na końcu <body> naszego index.html :

 //indeks.html
<skrypt>
    if ('serviceWorker' w nawigatorze) {
      // Zarejestruj pracownika usługi hostowanego w katalogu głównym
      // witryna używająca zakresu domyślnego.
      navigator.serviceWorker.register('/service-worker.js').then(function(rejestracja) {
        console.log('Rejestracja pracownika usługi powiodła się:', rejestracja);
      }, /*złap*/ function(błąd) {
        console.log('Rejestracja pracownika usługi nie powiodła się:', błąd);
      });
    } w przeciwnym razie {
      console.log('Usługi robocze nie są obsługiwane.');
    }
  </script>

Czas to przetestować!

Twoje PWA powinno być teraz instalowalne. Odśwież swój frontend i powinieneś zobaczyć przycisk instalacji na pasku zadań (komputer) lub mały baner powiadomień (urządzenie mobilne).

Kliknięcie Instaluj spowoduje wyświetlenie skrótu do PWA na pulpicie/ekranu głównym:

A2HS to coś więcej

Powyższe jest tylko podstawowym dodatkiem do ekranu głównego przy użyciu promocji instalacji zapewnianej przez przeglądarkę. Aby podnieść poprzeczkę, możesz również zapisać zdarzenie beforeinstallprompt, aby ręcznie uruchomić przepływ instalacji z różnymi wzorcami promującymi instalację PWA.

Dzięki niestandardowemu przyciskowi instalacji możesz uniknąć zakłócania podróży użytkownika, kierując reklamy na konkretnych użytkowników, którzy skorzystają z instalacji aplikacji. A dzięki zastanowieniu się nad tym, gdzie i gdzie umieścić interfejs promocji, Twoje PWA prawdopodobnie poradzi sobie lepiej niż konkurencja i w rezultacie uzyska znacznie lepsze współczynniki konwersji aplikacji.