Instalacja

Gdy użytkownik zainstaluje Twoją progresywną aplikację internetową:

  • mieć ikonę w Menu z aplikacjami, na ekranie głównym, w menu Start lub na pulpicie nawigacyjnym;
  • Pojawiać się w rezultacie, gdy użytkownik wyszukuje aplikację na swoim urządzeniu.
  • mieć oddzielne okno w systemie operacyjnym.
  • Zapewniają pomoc dotyczącą konkretnych funkcji.

Kryteria instalacji

Każda przeglądarka ma kryterium określające, kiedy witryna lub aplikacja internetowa jest progresywną aplikacją internetową i można ją zainstalować samodzielnie. Metadane Twojej aplikacji PWA są ustawiane w pliku w formacie JSON nazywanym webem Manifest App Manifest aplikacji. Omówimy je szczegółowo w następnym module.

Minimalnym wymaganiem dotyczącym możliwości instalacji jest używanie pliku manifestu aplikacji internetowej i pewnych właściwości, takich jak nazwa aplikacji i konfiguracja zainstalowanego środowiska, przez większość przeglądarek, które go obsługują. Wyjątkiem jest Safari dla systemu macOS, który nie obsługuje instalacji.

Wymagania dotyczące zezwolenia na instalację różnią się w zależności od przeglądarki. W tym artykule znajdziesz szczegółowe informacje o kryteriach korzystania z Google Chrome, a także linki do wymagań dotyczących innych przeglądarek.

Test spełniania wymagań dotyczących możliwości instalowania aplikacji PWA może potrwać kilka sekund, dlatego możliwość instalacji może nie być dostępna od razu po otrzymaniu odpowiedzi dotyczącej adresu URL.

Montaż pulpitu

Instalacja PWA na komputerze jest obecnie obsługiwana przez Google Chrome i Microsoft Edge na urządzeniach z systemem Linux, Windows, macOS i na Chromebookach. W przypadku tych przeglądarek na pasku adresu URL (patrz ilustracja poniżej) będzie widoczna plakietka instalacji (ikona) z informacją, że daną witrynę można zainstalować.

Chrome i Edge na komputerach z plakietką instalacji na pasku adresu URL.

Gdy użytkownik wejdzie w interakcję z witryną, może zobaczyć wyskakujące okienko, takie jak poniżej, z zaproszeniem do zainstalowania jej jako aplikacji.

Dostępna w usłudze pomoc dotycząca Google Chrome sugerująca instalację PWA.

Menu przeglądarki zawiera też pozycję „Zainstaluj”, z której użytkownik może skorzystać:

Pozycje menu Chrome i Edge dotyczące instalacji PWA.

Systemy operacyjne na komputerach obsługują tylko samodzielne i minimalne tryby wyświetlania interfejsu użytkownika.

PWA zainstalowane na komputerach:

  • mieć ikonę w menu Start lub na ekranie Start na komputerach z systemem Windows, w docku i na pulpicie na graficznym interfejsie użytkownika systemu Linux, w panelu uruchamiania macOS lub w Menu z aplikacjami na Chromebooku;
  • mają ikonę w przełącznikach i dokach aplikacji, gdy aplikacja jest aktywna, była ostatnio używana lub została otwarta w tle;
  • Pojawiają się w wyszukiwarce aplikacji, na przykład w wyszukiwarce Windows lub Spotlight w macOS.
  • mogą ustawić na ikonach numer plakietki, który wskazuje nowe powiadomienia. Służy do tego interfejs API Badging.
  • Umożliwia skonfigurowanie menu kontekstowego ikony za pomocą skrótów do aplikacji.
  • Nie można zainstalować dwukrotnie w tej samej przeglądarce.

Po zainstalowaniu aplikacji na komputerze użytkownicy mogą przejść do about:apps, kliknąć PWA prawym przyciskiem myszy i wybrać „Uruchom aplikację po zalogowaniu”, jeśli chcą, aby aplikacja otwierała się automatycznie przy uruchamianiu.

Instalacja systemu iOS i iPadOS

W przeglądarce nie wyświetla się prośba o zainstalowanie aplikacji PWA w systemach iOS i iPadOS. Na tych platformach aplikacje PWA są też nazywane aplikacjami internetowymi na ekranie głównym. Te aplikacje należy dodać ręcznie do ekranu głównego za pomocą menu, które jest dostępne tylko w Safari. Zalecamy dodanie tagu apple-touch-icon do kodu HTML. Aby zdefiniować ikonę, podaj ścieżkę do sekcji HTML <head> w następujący sposób:

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari użyje tych informacji do utworzenia skrótu. Jeśli nie udostępnisz konkretnej ikony dla urządzeń Apple, ikona na ekranie głównym będzie stanowił zrzut ekranu aplikacji PWA w chwili instalacji.

Pamiętaj, że instalacja PWA jest dostępna tylko wtedy, gdy użytkownik przegląda Twoją witrynę w Safari. Inne przeglądarki dostępne w App Store, takie jak Google Chrome, Firefox, Opera czy Microsoft Edge, nie mogą zainstalować PWA na ekranie głównym.

Aby dodać aplikacje do ekranu głównego:

  1. Otwórz menu Udostępnij, które znajduje się u dołu lub u góry przeglądarki.
  2. Kliknij Add to Home Screen (Dodaj do ekranu głównego).
  3. Potwierdź nazwę aplikacji. Można ją edytować.
  4. Kliknij Dodaj. W iOS i iPadOS zakładki do stron internetowych i PWA wyglądają tak samo na ekranie głównym.

W systemie iOS i iPadOS obsługiwany jest tylko samodzielny tryb wyświetlacza. Jeśli więc używasz minimalnego trybu UI, zamiast niego zostanie użyty skrót przeglądarki. Jeśli korzystasz z trybu pełnoekranowego, wróci on do trybu niezależnego.

Progresywne aplikacje internetowe zainstalowane na iOS i iPadOS:

  • Pojawia się na ekranie głównym, w wyszukiwarce Spotlight, sugestiach Siri i w bibliotece aplikacji.
  • nie są widoczne w folderach kategorii Galerii aplikacji,
  • Brak obsługi takich funkcji jak plakietki i skróty do aplikacji.

Safari korzysta z natywnej technologii znanej jako Web Clips, aby tworzyć ikony PWA w systemie operacyjnym. Są to po prostu pliki XML w formacie Listy właściwości Apple przechowywane w systemie plików.

Instalacja Androida

Na Androidzie prośby o zainstalowanie PWA różnią się w zależności od urządzenia i przeglądarki. Użytkownicy mogą zobaczyć:

  • różne sformułowania w treści pozycji menu instalacji, np. Zainstaluj lub Dodaj do ekranu głównego.
  • Szczegółowe okna instalacji.

Na ilustracji poniżej widać 2 różne wersje okna instalacji: prosty minipasek informacyjny (po lewej) i szczegółowe okno instalacji (po prawej).

Minipasek informacyjny i okna instalacji na Androidzie

W zależności od urządzenia i przeglądarki aplikacja PWA zostanie zainstalowana jako WebAPK, skrót lub aplikacja QuickApp.

WebAPKs

WebAPK to pakiet na Androida (APK) utworzony przez zaufanego dostawcę urządzenia użytkownika, zwykle w chmurze, na serwerze tworzenia WebAPK. Metoda ta jest używana przez Google Chrome na urządzeniach z zainstalowanymi usługami Google Mobile Services (GMS) i w przeglądarce internetowej Samsunga, ale tylko na urządzeniach produkowanych przez firmę Samsung, takich jak telefon lub tablet Galaxy. Razem stanowi to dla większości użytkowników Androida.

Gdy użytkownik instaluje aplikację PWA z Google Chrome i używa pakietu WebAPK, serwer generowania „mints” (pakiety) i podpisuje na nią pakiet APK. Ten proces jest czasochłonny, ale gdy plik APK będzie gotowy, przeglądarka zainstaluje ją dyskretnie na urządzeniu użytkownika. Plik APK został podpisany przez zaufanych dostawców (Usługi Play lub Samsung), więc telefon instaluje go bez wyłączania zabezpieczeń, tak jak w przypadku każdej aplikacji ze sklepu. Nie ma potrzeby instalowania aplikacji z innego urządzenia.

Progresywne aplikacje internetowe zainstalowane za pomocą WebAPK:

Skróty

Pakiety WebAPK są najlepsze dla użytkowników Androida, ale nie zawsze można je tworzyć. Jeśli im się to nie uda, wracają do tworzenia skrótów do stron internetowych. Przeglądarki Firefox, Microsoft Edge, Opera, Brave i Samsung Internet (na urządzeniach innych niż Samsung) nie mają zaufanych serwerów generowania, dlatego tworzone są skróty. Także Google Chrome będzie działać, jeśli usługa tworzenia treści jest niedostępna lub Twoja aplikacja PWA nie spełnia wymagań instalacji.

PWA zainstalowane za pomocą skrótów:

  • Na ekranie głównym musi być widoczna ikona z plakietką przeglądarki (zobacz przykłady poniżej).
  • Brak ikony w Menu z aplikacjami ani w sekcji Ustawienia, Aplikacje.
  • Nie można użyć żadnych funkcji, które wymagają instalacji.
  • Nie udało się zaktualizować ikon ani metadanych aplikacji.
  • Można ją zainstalować wiele razy, nawet za pomocą tej samej przeglądarki. Gdy tak się stanie, wszystkie będą wskazywać na tę samą instancję i korzystać z tej samej pamięci.

PWA zainstalowana w różnych przeglądarkach na tym samym urządzeniu.

QuickApps

Niektórzy producenci, w tym Huawei i ZTE, oferują platformę o nazwie QuickApps do tworzenia prostych aplikacji internetowych podobnych do PWA, ale przy użyciu innego stosu technologicznego. Niektóre przeglądarki na tych urządzeniach, na przykład Huawei, mogą instalować aplikacje PWA spakowane do formatu QuickApp, nawet jeśli nie używasz stosu QuickApp.

Po zainstalowaniu Twojej aplikacji PWA jako aplikacji QuickApp użytkownicy będą jej dysponować podobnymi funkcjami do skrótów, ale z ikoną Szybkie aplikacje (ikoną błyskawiczną). Aplikację będzie też można uruchomić z poziomu QuickApp Center.

QuickApps na ekranie głównym Huawei lub ZTE.

Prośba o instalację

W przeglądarkach opartych na Chromium na komputerach i urządzeniach z Androidem z PWA można wywołać okno instalacji przeglądarki. W rozdziale dotyczącym prośby o instalację omówimy wzorce tego procesu i sposoby ich wdrażania.

Katalogi aplikacji i sklepy z aplikacjami

PWA można też wyświetlać w katalogach i sklepach aplikacji, aby zwiększyć jej zasięg i umożliwić użytkownikom znajdowanie ich w tym samym miejscu, w którym znajdują się inne aplikacje. Większość katalogów i sklepów z aplikacjami obsługuje technologie, które umożliwiają opublikowanie pakietu niezawierającego całej aplikacji internetowej (np. kodu HTML i zasobów). Dzięki tym technologiom można utworzyć tylko program uruchamiający do autonomicznego silnika renderowania stron internetowych, który będzie wczytywać aplikację i zezwolić skryptowi service worker na zapisywanie w pamięci podręcznej niezbędnych zasobów.

Katalogi i sklepy aplikacji obsługujące publikowanie aplikacji PWA to:

Jeśli chcesz dowiedzieć się więcej o publikowaniu aplikacji PWA w katalogach i sklepach z aplikacjami, zapoznaj się z artykułami BubbleWrap CLI i PWA Builder.

Zasoby