Dodawanie progresywnej aplikacji internetowej do Google Play

1. Witamy

W tym module weźmiesz istniejącą progresywną aplikację internetową, którą masz wdrożoną, i umieścisz ją w aplikacji do rozpowszechniania w Sklepie Google Play.

Czego się nauczysz

  • Jak za pomocą Bubblewrap spakować progresywną aplikację internetową do Sklepu Google Play
  • Czym jest klucz podpisywania i jak go używać
  • Jak utworzyć nową aplikację w Konsoli deweloperów Google Play i skonfigurować wersję testową, aby przetestować aplikację przed opublikowaniem
  • Czym są linki do zasobów cyfrowych i jak je dodać do aplikacji internetowej

Co warto wiedzieć

Czego potrzebujesz

  • progresywna aplikacja internetowa opublikowana w internecie, w której możesz wprowadzać zmiany;
  • Interfejs wiersza poleceń Bubblewrap zainstalowany i gotowy do użycia.
  • konto dewelopera w Google Play;
  • dotychczasowy klucz podpisywania, jeśli masz już aplikacje opublikowane w Google Play;
  • Urządzenie z Androidem lub ChromeOS do testowania

Czego nie obejmuje gwarancja

2. Bubblewrapping Your PWA

Bubblewrap to narzędzie, które ułatwia przekształcenie progresywnej aplikacji internetowej w pakiet aplikacji na Androida. Wystarczy uruchomić kilka poleceń wiersza poleceń. W tym celu generuje projekt na Androida, który uruchamia aplikację PWA jako zaufaną aktywność internetową.

Zacznij od utworzenia katalogu, w którym będzie znajdować się Twój projekt, i przejdź do niego:

$ mkdir my-pwa && cd my-pwa

Następnie uruchom narzędzie wiersza poleceń Bubblewrap, aby wygenerować konfigurację i projekt Androida dla pakietu aplikacji na Androida, który prześlesz do Google Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

W tym przypadku Bubblewrap jest inicjowany za pomocą lokalizacji pliku pliku manifestu aplikacji internetowej PWA. Spowoduje to wygenerowanie domyślnej konfiguracji na podstawie pliku manifestu aplikacji internetowej i uruchomienie w konsoli kreatora, który umożliwi zmianę domyślnej konfiguracji. Postępuj zgodnie z instrukcjami kreatora, aby zmienić dowolną wartość wygenerowaną przez to narzędzie.

Kreator interfejsu wiersza poleceń Bubblewrap pokazujący inicjowanie z airhorner z zastąpioną domeną example.com i zastąpionymi adresami URL startowymi.

Klucz podpisywania

Sklep Google Play wymaga, aby pakiety aplikacji były podpisane cyfrowo certyfikatem podczas przesyłania. Jest to często nazywane kluczem podpisywania. Jest to certyfikat z podpisem własnym, który różni się od certyfikatu używanego do udostępniania aplikacji przez protokół HTTPS.

Podczas tworzenia aplikacji narzędzie Bubblewrap poprosi o podanie ścieżki do klucza. Jeśli używasz istniejącej karty aplikacji w Sklepie Play, musisz dodać ścieżkę do tego samego klucza, którego używa ta karta.

Kreator interfejsu wiersza poleceń Bubblewrap z pytaniem o lokalizację i nazwę istniejącego klucza podpisywania użytkownika.

Jeśli nie masz klucza podpisywania i tworzysz nową stronę w Sklepie Play, możesz użyć wartości domyślnej podanej przez Bubblewrap, aby utworzyć nowy klucz:

Kreator Bubblewrap CLI z pytaniem, czy użytkownik chce utworzyć nowy klucz podpisywania.

Dane wyjściowe Bubblewrap

Po zainicjowaniu projektu Bubblewrap i ukończeniu pracy kreatora utworzone zostaną te elementy:

  • twa-manifest.json – konfiguracja projektu odzwierciedlająca wartości wybrane w kreatorze Bubblewrap. Warto śledzić ten plik za pomocą systemu kontroli wersji, ponieważ w razie potrzeby można go użyć do ponownego wygenerowania całego projektu Bubblewrap.
  • Pliki projektu Androida – pozostałe pliki w katalogu to wygenerowany projekt Androida. Ten projekt jest źródłem używanym w poleceniu kompilacji Bubblewrap. Możesz też śledzić te pliki za pomocą systemu kontroli wersji.
  • (Opcjonalnie) Klucz podpisywania – jeśli zdecydujesz, że Bubblewrap ma utworzyć klucz podpisywania, zostanie on wygenerowany w lokalizacji opisanej w kreatorze. Klucz należy przechowywać w bezpiecznym miejscu i ograniczyć liczbę osób, które mają do niego dostęp. Służy on do potwierdzania, że aplikacje w Sklepie Play pochodzą od Ciebie.

Dzięki tym plikom mamy wszystko, czego potrzebujemy do utworzenia pakietu Android App Bundle.

Tworzenie pakietu Android App Bundle

W tym samym katalogu, w którym zostało uruchomione polecenie inicjowania Bubblewrap, uruchom to polecenie (będziesz potrzebować haseł do klucza podpisywania):

$ bubblewrap build

Dane wyjściowe interfejsu wiersza poleceń Bubblewrap podczas tworzenia projektu, z prośbą o podanie haseł do klucza podpisywania i pokazujące generowanie różnych wersji aplikacji na Androida.

Polecenie kompilacji wygeneruje 2 ważne pliki:

  • app-release-bundle.aab – pakiet Android App Bundle Twojej PWA. Taki plik prześlij do Sklepu Google Play.
  • app-release-signed.apk – format pakietu na Androida, który można wykorzystać do zainstalowania aplikacji bezpośrednio na urządzeniu deweloperskim za pomocą polecenia bubblewrap install.

3. Wypróbuj – folia bąbelkowa

Teraz Twoja kolej. Wykorzystując wiedzę zdobytą w poprzednim kroku, spróbuj wykonać te czynności:

  1. Utwórz katalog, w którym będzie przechowywany wygenerowany projekt na Androida.
  2. Zainicjuj ten katalog za pomocą narzędzia Bubblewrap i pliku manifestu aplikacji internetowej PWA.
  3. Wygeneruj nowy klucz podpisywania lub użyj istniejącego, jeśli go masz.
  4. Utwórz pakiet Android App Bundle z wygenerowanego projektu na Androida.

4. Dodawanie aplikacji do Sklepu Google Play

Teraz, gdy masz pakiet aplikacji na Androida dla swojej progresywnej aplikacji internetowej, możesz przesłać go do Sklepu Google Play. Po zarejestrowaniu konta dewelopera możesz otworzyć Konsolę Play, aby się zalogować i zacząć korzystać z niej.

Tworzenie aplikacji

Po zalogowaniu zobaczysz ekran ze wszystkimi aplikacjami. U góry znajduje się przycisk Utwórz aplikację, który po kliknięciu wyświetli poniższy ekran z instrukcjami tworzenia nowej karty aplikacji na Androida.

Ekran z formularzem tworzenia aplikacji w Konsoli Play.

Musisz wypełnić kilka pól, m.in. nazwę aplikacji, język domyślny, informację, czy jest to aplikacja czy gra, czy jest płatna czy bezpłatna, oraz kilka deklaracji. Nie będziesz w stanie utworzyć aplikacji bez zaakceptowania deklaracji, dlatego przed ich zaakceptowaniem musisz je przeczytać i zrozumieć.

Gdy wypełnisz wszystkie informacje i klikniesz przycisk Utwórz aplikację u dołu formularza, przejdziesz do panelu nowej aplikacji. W panelu zobaczysz listy kontrolne zadań, które musisz wykonać, aby skonfigurować aplikację, rozpocząć jej testowanie i ją opublikować.

Konfigurowanie testów wewnętrznych

Testy wewnętrzne to świetny sposób na szybkie opublikowanie aplikacji bez sprawdzania przez nasz zespół w wybranej grupie zaufanych testerów. Wyświetl zadania na liście kontrolnej Zacznij testowanie aplikacji i kliknij Wybierz testerów.

Lista kontrolna „Zacznij testowanie”

Kliknięcie tego zadania spowoduje przejście na stronę Testowanie wewnętrzne. W tym miejscu możesz zarządzać konfiguracją testów aplikacji. Aby ponownie otworzyć tę stronę, w menu bocznym kliknij Wersja > Testowanie. Pierwszym krokiem jest utworzenie listy e-mailowej testerów, którzy będą testować Twoją aplikację. Aby to zrobić, w sekcji Testerzy na stronie kliknij link Utwórz listę e-mailową. Otworzy się wyskakujące okienko, w którym możesz utworzyć listę e-mailową.

Wyskakujące okienko z formularzem tworzenia listy adresów e-mail, który zawiera nazwę listy, adresy e-mail, link do przesłania pliku CSV z adresami e-mail oraz obszar, w którym wyświetlane są przesłane adresy e-mail.

W tym wyskakującym okienku możesz nadać nazwę liście adresów e-mail i ręcznie wpisać adresy e-mail lub przesłać plik CSV z adresami e-mail, których chcesz użyć. Gdy skończysz, kliknij przycisk Zapisz zmiany. W razie potrzeby możesz wrócić do utworzonych już list e-mail i dodać lub usunąć adresy e-mail. Po dodaniu testerów możesz utworzyć wersję testową. U góry strony kliknij przycisk Utwórz nową wersję.

Strona testów wewnętrznych ze strzałką wskazującą przycisk tworzenia nowej wersji.

Tworzenie wersji testowej

Po kliknięciu przycisku Utwórz nową wersję zobaczysz kilka sekcji. Pierwsza z nich to Integralność aplikacji, w której możesz wybrać sposób zarządzania kluczem podpisywania aplikacji. Domyślną opcją jest zezwolenie Google na zarządzanie kluczem podpisywania. Jest to zalecane rozwiązanie, ponieważ jest bezpieczne i umożliwia odzyskanie aplikacji w przypadku utraty klucza przesyłania.

podpisywanie aplikacji przez Google Play

Schemat blokowy pokazujący od lewej do prawej dewelopera i jego klucz przesyłania, który podpisuje aplikację i wysyła ją do Google. Google ma wtedy klucz podpisywania aplikacji i podpisuje nim aplikację, a następnie dostarcza ją użytkownikowi.

Przesyłanie i finalizowanie aplikacji

Po wybraniu sposobu zarządzania kluczem podpisywania pojawi się prośba o przesłanie pakietu aplikacji do wersji. Aby to zrobić, przeciągnij i upuść w formularzu wygenerowany przez Bubblewrap plik app-release-bundle.aab. Aby sfinalizować wersję, wypełnij pozostałe szczegóły i kliknij kolejno przyciski Zapisz, Sprawdzanie wersji i Rozpocznij wdrażanie do testów wewnętrznych. Dzięki temu Twoja aplikacja będzie dostępna dla testerów wewnętrznych. Na karcie Testerzy na stronie Testy wewnętrzne możesz skopiować link i udostępnić go testerom, aby mogli uzyskać dostęp do Twojej aplikacji.

Strona testów wewnętrznych ze strzałką wskazującą link do kopiowania, który umożliwia udostępnianie linku do testowania testerom.

5. Wypróbuj – tworzenie aplikacji

Teraz Twoja kolej. Wykorzystując wiedzę zdobytą w poprzednim kroku, spróbuj wykonać te czynności:

  1. Utwórz nową aplikację dla swojej PWA w Konsoli Play.
  2. Skonfiguruj testy wewnętrzne aplikacji i dodaj siebie jako testera.
  3. Prześlij pakiet aplikacji i utwórz wersję testową aplikacji.
  4. Zainstaluj aplikację ze Sklepu Play na urządzeniu z Androidem lub ChromeOS, korzystając z linku do testowania.

6. Digital Asset Links

Jeśli udało Ci się przetestować PWA w Google Play, możesz zauważyć, że nie działa ona na pełnym ekranie. Dzieje się tak, ponieważ nie masz jeszcze potwierdzonej własności witryny za pomocą pliku Digital Asset Links. Bubblewrap może skonfigurować i utworzyć pakiet aplikacji na Androida, ale musisz dokończyć proces, aktualizując aplikację internetową.

Pobieranie odcisku cyfrowego SHA-256 aplikacji

Aby skonfigurować linki Digital Asset Links do progresywnej aplikacji internetowej, musisz mieć odcisk cyfrowy SHA-256 certyfikatu użytego do podpisania pakietu, który użytkownik otrzymuje na telefonie.

Z podpisywaniem aplikacji przez Google Play

Jeśli podczas tworzenia wersji aplikacji skonfigurujesz podpisywanie aplikacji przez Google Play (co było wcześniej zalecane), odcisk cyfrowy SHA-256 znajdziesz w Konsoli Play. Pamiętaj, że ten certyfikat różni się od certyfikatu używanego do przesyłania aplikacji. Aby uzyskać odcisk palca, w aplikacji w Konsoli Play otwórz Wersje –> Konfiguracja –> Integralność aplikacji. W sekcji Certyfikat klucza podpisywania aplikacji zobaczysz kilka opcji. Skopiuj wartość odcisku cyfrowego certyfikatu SHA-256.

Ekran „Integralność aplikacji” z wyróżnionym odciskiem cyfrowym certyfikatu SHA-256.

Bez podpisywania aplikacji przez Google Play

Jeśli zrezygnujesz z podpisywania aplikacji przez Google Play, klucz używany do podpisywania ostatecznej wersji aplikacji będzie taki sam jak ten, którego używasz do przesyłania aplikacji do Konsoli Play. Aby wyodrębnić odcisk palca, możesz użyć narzędzia keytool w języku Java:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Aby z niej skorzystać, musisz znać ścieżkę do klucza podpisywania i odpowiednie hasła. Skopiuj wartości szesnastkowe klucza SHA256.

Bubblewrap może zarządzać pobranymi odciskami palców podpisu i generować prawidłowy plik Digital Asset Links. Aby dodać odcisk palca za pomocą narzędzia Bubblewrap, uruchom to polecenie w tym samym katalogu, który został utworzony podczas pakowania PWA w Bubblewrap. Zastąp symbol <fingerprint> odciskiem palca skopiowanym w poprzednim kroku.

$ bubblewrap fingerprint add <fingerprint>

To polecenie doda odcisk palca do listy odcisków palców aplikacji i wygeneruje plik assetlinks.json. Prześlij ten plik do katalogu .well-known w tym samym źródle co Twoja progresywna aplikacja internetowa.

7. Wypróbuj – Digital Asset Links

Teraz Twoja kolej. Wykorzystując wiedzę zdobytą w poprzednim kroku, spróbuj wykonać te czynności:

  1. Znajdź odcisk cyfrowy SHA-256 aplikacji.
  2. Wygeneruj plik Digital Asset Links dla swojej aplikacji.
  3. Prześlij plik Digital Asset Links do progresywnej aplikacji internetowej.
  4. Sprawdź, czy plik Digital Asset Links jest prawidłowo skonfigurowany, korzystając z interfejsu API i aplikacji testowej.

8. Sprawdzian wiedzy

Zanim skończysz, sprawdź swoją wiedzę i zobacz, czego się nauczyłeś(-aś), odpowiadając na poniższe pytania. Nie podglądaj odpowiedzi!

Po wygenerowaniu projektu na Androida za pomocą narzędzia Bubblewrap Sally przesyła wygenerowany plik ______ do systemu kontroli wersji, aby w razie potrzeby móc go ponownie utworzyć.

twa-manifest.json klucz podpisywania app-release-bundle.aab build.gradle

Jack chce, aby jego zespół ds. kontroli jakości przetestował jego aplikację PWA na Androida. Musi więc ______ pakiet Android App Bundle na ścieżce testów wewnętrznych.

przesyłanie kompilowanie i przesyłanie wersje podpisywanie i przesyłanie

Aplikacja PWA Oogie Boogie na Androida nie działa na pełnym ekranie. Aby to naprawić, uzyskują odcisk cyfrowy certyfikatu SHA-256 dla swojego ______ i przesyłają go do pliku Digital Asset Links znajdującego się w lokalizacji ______ w tej samej domenie co ich progresywna aplikacja internetowa.

klucz przesyłania, /.well-known/assetlinks.json klucz przesyłania, /assetlinks.json klucz podpisywania, /.well-known/assetlinks.json klucz podpisywania, /assetlinks.json

9. Sprawdź swoją wiedzę – odpowiedzi

Odpowiedzi na pytania z sekcji Sprawdź swoją wiedzę

  1. Po wygenerowaniu projektu na Androida za pomocą narzędzia Bubblewrap Sally przesyła wygenerowany plik ______ do systemu kontroli wersji, aby w razie potrzeby móc go ponownie utworzyć.
  2. Jack chce, aby jego zespół ds. kontroli jakości przetestował jego aplikację PWA na Androida. Musi więc ______ pakiet Android App Bundle na ścieżce testów wewnętrznych.
  3. Aplikacja PWA Oogie Boogie na Androida nie działa na pełnym ekranie. Aby to naprawić, uzyskują odcisk cyfrowy certyfikatu SHA-256 dla swojego ______ i przesyłają go do pliku Digital Asset Links znajdującego się w lokalizacji ______ w tej samej domenie co ich progresywna aplikacja internetowa.

10. Gratulacje!

Gratulacje! Wiesz już, jak dodać progresywną aplikację internetową do Sklepu Google Play.

Gdy poczujesz się gotowy, wykonaj te czynności samodzielnie:

Pozdrawiamy