Instalacja

Gdy użytkownik zainstaluje Twoją PWA:

  • muszą mieć ikonę w programie uruchamiającym, na ekranie głównym, w menu Start lub na padzie uruchamiającym;
  • Pojawiają się, gdy użytkownik wyszukuje aplikację na swoim urządzeniu.
  • mieć osobne okno w systemie operacyjnym.
  • Pomoc w zakresie konkretnych funkcji
.

Kryteria instalacji

Każda przeglądarka ma kryterium określające, czy witryna lub aplikacja internetowa jest progresywną aplikacją internetową i można ją zainstalować samodzielnie. Metadane Twojej aplikacji PWA są ustawiane w pliku JSON o nazwie Manifest aplikacji internetowej, który omówimy szczegółowo w następnym module.

Jako minimalne wymaganie dla możliwości instalacji większość przeglądarek, które je obsługują, używa pliku manifestu aplikacji internetowej i określonych właściwości, takich jak nazwa aplikacji i konfiguracja zainstalowanej wersji. Wyjątkiem jest przeglądarka Safari dla systemu macOS, która nie obsługuje możliwości instalacji.

Wymagania związane z instalacją różnią się w zależności od przeglądarki. W tym artykule opisano kryteria obowiązujące w Google Chrome i zawarliśmy w nim linki do wymagań innych przeglądarek.

Test, czy PWA spełnia wymagania instalacyjne, może potrwać kilka sekund, dlatego sama możliwość zainstalowania może być niedostępna w chwili otrzymania odpowiedzi z adresem URL.

Instalacja pulpitu

Instalacja aplikacji PWA na komputery jest obecnie obsługiwana przez Google Chrome i Microsoft Edge w systemach Linux, Windows, macOS i na Chromebookach. Na pasku adresu URL (zobacz ilustrację poniżej) będzie widoczna plakietka instalacji (ikona) z informacją, że daną stronę można zainstalować.

Chrome i Edge na komputerze z plakietką instalacji na pasku adresu URL

Gdy użytkownik wchodzi w interakcję z witryną, może zobaczyć wyskakujące okienko, takie jak to poniżej, z prośbą o zainstalowanie tej witryny jako aplikacji.

Pomoc w aplikacji Google Chrome zalecająca instalację PWA.

Menu przeglądarki zawiera też opcję „Zainstaluj” . element, którego może użyć użytkownik:

Pozycje menu Chrome i Edge do instalowania PWA.

W systemach operacyjnych na komputerach obsługiwane są tylko tryby wyświetlania niezależnego i zminimalizowanego interfejsu.

Progresywne aplikacje internetowe zainstalowane na komputerach:

  • mieć ikonę w menu Start lub na ekranie Start na komputerach z systemem Windows, w Docku lub na pulpicie w GUI systemu Linux, na padzie uruchamiającym systemu macOS albo w programie uruchamiającym aplikacje na Chromebooku.
  • mieć ikonę w przełącznikach aplikacji i stacjach dokowania, gdy aplikacja jest aktywna, była ostatnio używana lub otwarta w tle;
  • Wyświetlaj swoją ofertę w wynikach wyszukiwania, na przykład w wyszukiwarce w systemie Windows lub Spotlight w systemie macOS.
  • Można ustawić numer plakietki na ikonach, aby oznaczać nowe powiadomienia. Służy do tego interfejs API z logo.
  • Umożliwia skonfigurowanie menu kontekstowego ikony za pomocą skrótów aplikacji.
  • Nie można zainstalować dwukrotnie w tej samej przeglądarce.
.

Po zainstalowaniu aplikacji na komputerze użytkownicy mogą otworzyć stronę about:apps, kliknąć ją prawym przyciskiem myszy i wybrać „Uruchom aplikację po zalogowaniu” aby aplikacja otwierała się automatycznie po uruchomieniu.

Instalacja iOS i iPadOS

W systemie iOS i iPadOS nie jest wyświetlane okno przeglądarki z prośbą o zainstalowanie Twojej aplikacji PWA. Na tych platformach takie aplikacje są też nazywane aplikacjami internetowymi na ekranie głównym. Aplikacje te należy dodać ręcznie do ekranu głównego za pomocą menu dostępnego tylko w przeglądarce 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 podasz konkretnej ikony dla urządzeń Apple, ikona na ekranie głównym będzie zrzutem ekranu z progresywną aplikacją internetową.

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 dostępne u dołu lub u góry przeglądarki.
  2. Kliknij Add to Home Screen (Dodaj do ekranu głównego).
  3. Potwierdź nazwę aplikacji. którą użytkownik może edytować.
  4. Kliknij Dodaj. W systemie iOS i iPadOS zakładki do stron internetowych i PWA wyglądają tak samo na ekranie głównym.

W systemach iOS i iPadOS obsługiwany jest tylko samodzielny tryb wyświetlania. Dlatego jeśli użyjesz trybu minimalnego interfejsu użytkownika, przełącz się na skrót do przeglądarki. jeśli włączysz pełny ekran, przełączy się on na tryb samodzielny.

Progresywne aplikacje internetowe zainstalowane na urządzeniach z iOS i iPadOS:

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

Przy okazji – do utworzenia ikon PWA w systemie operacyjnym Safari używa natywnej technologii zwanej klipami internetowymi. Są to po prostu pliki XML w formacie listy właściwości firmy Apple przechowywane w systemie plików.

Instalacja Androida

W przypadku Androida instrukcje instalacji PWA różnią się w zależności od urządzenia i przeglądarki. Użytkownicy mogą zobaczyć:

  • Różne wersje tekstu menu instalacji, np. Zainstaluj lub Dodaj do ekranu głównego.
  • Szczegółowe okna instalacji.

Na poniższej ilustracji znajdują się 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 Twoja aplikacja PWA zostanie zainstalowana jako plik WebAPK, skrót lub QuickApp.

WebAPKs

WebAPK to pakiet na Androida (APK) utworzony przez zaufanego dostawcę urządzenia użytkownika, zwykle w chmurze, na serwerze generowania migracji WebAPK. Google Chrome używa tej metody na urządzeniach z zainstalowanymi usługami Google Mobile Services (GMS) oraz w przeglądarce internetowej firmy Samsung, ale tylko na urządzeniach wytwarzanych przez firmę Samsung, takich jak telefon czy tablet Galaxy. Łącznie stanowią one większość użytkowników Androida.

Gdy użytkownik zainstaluje aplikację PWA z Google Chrome i zostanie użyty pakiet WebAPK, serwer generujący wiadomość „mints” (pakiety) i podpisuje plik APK dla PWA. Ten proces zajmuje trochę czasu, ale gdy plik APK jest gotowy, przeglądarka instaluje aplikację dyskretnie na urządzeniu użytkownika. Ponieważ zaufani dostawcy (Usługi Play lub Samsung) podpisali plik APK, telefon instaluje go bez wyłączania zabezpieczeń, jak w przypadku każdej aplikacji pobieranej ze sklepu. Nie ma potrzeby instalowania aplikacji z innego urządzenia.

Aplikacje PWA zainstalowane przez WebAPK:

.

Skróty

WebAPK to najlepsze rozwiązanie dla użytkowników Androida, ale nie zawsze można je utworzyć. Gdy może to się nie udać, przeglądarki tworzą skrót do witryny. Przeglądarki Firefox, Microsoft Edge, Opera, Brave i Samsung Internet (na urządzeniach innych niż Samsung) nie mają zaufanych serwerów tworzenia stron, więc tworzą skróty. Google Chrome też zrobi to, jeśli usługa generowania plików będzie niedostępna lub jeśli Twoja aplikacja PWA nie będzie spełniać wymagań instalacyjnych.

Zainstalowane aplikacje PWA ze skrótami:

  • mieć na ekranie głównym ikonę z plakietką przeglądarki (zobacz przykłady poniżej).
  • brak ikony w Menu z aplikacjami ani na liście Ustawienia, Aplikacje.
  • Nie można używać żadnych funkcji, które wymagają instalacji.
  • Nie udało się zaktualizować ikon ani metadanych aplikacji.
  • można zainstalować wiele razy, nawet w tej samej przeglądarce; W takim przypadku wszystkie będą wskazywać 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, która pozwala tworzyć lekkie aplikacje internetowe podobne do PWA, ale przy użyciu innego stosu technologicznego. Niektóre przeglądarki na takich urządzeniach, np. przeglądarka Huawei, mogą instalować aplikacje PWA spakowane jako QuickApp, nawet jeśli nie używasz stosu QuickApp.

Gdy Twoja aplikacja PWA zostanie zainstalowana jako QuickApp, użytkownicy będą mogli korzystać z funkcji podobnych do tych ze skrótami, ale z ikoną z ikoną QuickApps (błyskawicą). Aplikację będzie można również uruchomić w QuickApp Center.

QuickApps na ekranie głównym Huawei lub ZTE.

Monit o instalację

W przeglądarkach opartych na Chromium na komputerach i urządzeniach z Androidem można otworzyć okno instalacji przeglądarki z poziomu aplikacji PWA. W rozdziale z promptem instalacyjnym omówione są wzorce, które do tego służą i ich implementowanie.

Katalogi i sklepy aplikacji

Progresywna aplikacja internetowa może być również widoczna w katalogach aplikacji i sklepach, aby zwiększyć jej zasięg i umożliwić użytkownikom znalezienie jej w tym samym miejscu, w którym znajdują inne aplikacje. Większość katalogów i sklepów z aplikacjami obsługuje technologie umożliwiające opublikowanie pakietu, który nie zawiera całej aplikacji internetowej (np. kodu HTML i zasobów). Dzięki tym technologiom utworzysz tylko program uruchamiający do niezależnego silnika renderowania stron internetowych, który wczyta aplikację i pozwoli skryptowi service worker buforować niezbędne zasoby.

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

Więcej informacji o publikowaniu PWA w katalogach aplikacji i sklepach znajdziesz w artykułach BubbleWrap CLI oraz PWA Builder.

Zasoby