Krótki przewodnik

Peter Conn
Peter Conn

Konfiguracja zaufanych działań w internecie może być nieco kłopotliwa, zwłaszcza jeśli chcesz tylko wyświetlić swoją witrynę. W tym przewodniku znajdziesz instrukcje tworzenia podstawowego projektu, który korzysta z zaufanych działań w internecie, a także wszystkie ważne informacje.

Po zakończeniu tego przewodnika:

  • Użyj Bubblewrap do utworzenia aplikacji, która korzysta z zaufanej aktywności w internecie i przeszkadza weryfikację.
  • Dowiedz się, kiedy są używane klucze podpisywania.
  • Musisz być w stanie określić podpis, z którego stworzona jest Twoja aplikacja na Androida.
  • Dowiedz się, jak utworzyć podstawowy plik Digital Asset Links.

Aby wykonać te czynności, musisz mieć:

  • Node.js 10 lub nowsza wersja zainstalowana na komputerze programisty.
  • telefon z Androidem lub emulator połączony i skonfigurowany do celów programistycznych (włącz debugowanie USB, jeśli używasz fizycznego telefonu).
  • przeglądarka obsługująca zaufaną aktywność internetową na telefonie deweloperskim. Chrome 72 lub nowsza wersja. Wkrótce zaczniemy obsługiwać również inne przeglądarki.
  • witryna, którą chcesz wyświetlić w zaufanej aktywności w internecie.

Zaufane działanie internetowe umożliwia aplikacji na Androida uruchamianie karty przeglądarki w trybie pełnoekranowym bez żadnego interfejsu przeglądarki. Ta funkcja jest ograniczona do witryn, które są Twoją własnością. Musisz to potwierdzić, konfigurując połączenia z zasobami cyfrowymi. Więcej o nich dowiesz się później.

Gdy uruchomisz zaufane działanie w przeglądarce, przeglądarka sprawdzi, czy protokół Digital Asset Links jest poprawny. Nazywamy to weryfikacją. Jeśli weryfikacja się nie powiedzie, przeglądarka wyświetli Twoją witrynę jako kartę niestandardową.

Instalowanie i konfigurowanie Bubblewrap

Bubblewrap to zestaw bibliotek i narzędzie wiersza poleceń (CLI) dla Node.js, które pomaga deweloperom generować, kompilować i uruchamiać progresywne aplikacje internetowe w aplikacji na Androida przy użyciu zaufanej aktywności w internecie.

Interfejs wiersza poleceń można zainstalować za pomocą tego polecenia:

npm i -g @bubblewrap/cli

Konfigurowanie środowiska

Gdy uruchomisz Bubblewrap po raz pierwszy, pojawi się oferta automatycznego pobrania i zainstalowania wymaganych zależności zewnętrznych. Zalecamy zezwolenie na to narzędziu, ponieważ gwarantuje to prawidłową konfigurację zależności. Sprawdź w dokumentacji Bubblewrap, czy chcesz używać istniejącej instalacji pakietu Java Development Kit (JDK) lub narzędzi wiersza poleceń Androida.

Inicjowanie i tworzenie projektu

Inicjalizowanie projektu na Androida, który zawiera PWA, odbywa się przez uruchomienie polecenia init:

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

Bubblewrap odczyta plik manifestu internetowego, poprosi deweloperów o potwierdzenie wartości do użycia w projekcie na Androida i wygeneruje projekt na podstawie tych wartości. Po wygenerowaniu projektu wygeneruj pakiet APK, uruchamiając polecenie:

bubblewrap build

Uruchom

Etap kompilacji wygeneruje plik o nazwie app-release-signed.apk. Plik można zainstalować na urządzeniu deweloperskim na potrzeby testowania lub przesłać do Sklepu Play w celu opublikowania.

Bubblewrap udostępnia polecenie do zainstalowania i przetestowania aplikacji na urządzeniu lokalnym. Po podłączeniu urządzenia do komputera wykonaj te czynności:

bubblewrap install

Możesz też użyć narzędzia adb.

adb install app-release-signed.apk

Aplikacja powinna być teraz dostępna w wyszukiwarce urządzenia. Po otwarciu aplikacji zauważysz, że Twoja witryna jest otwierana jako karta niestandardowa, a nie zaufana aktywność w internecie. Dzieje się tak, ponieważ nie skonfigurowaliśmy jeszcze weryfikacji linków do zasobów cyfrowych, ale najpierw...

Alternatywy graficznego interfejsu użytkownika (GUI) dla Bubblewrap

PWA Builder udostępnia interfejs graficzny, który korzysta z biblioteki Bubblewrap do generowania projektów zaufanej aktywności internetowej. Więcej instrukcji korzystania z twórcy aplikacji PWA do tworzenia aplikacji na Androida, która otwiera Twoją aplikację PWA, znajdziesz w tym wpisie na blogu.

Uwaga na temat kluczy podpisywania

Digital Asset Links biorą pod uwagę klucz, którym został podpisany plik APK. Typową przyczyną niepowodzenia weryfikacji jest użycie nieprawidłowego podpisu. (Pamiętaj, że jeśli nie przejdziesz weryfikacji, Twoja witryna będzie otwierać się jako karta niestandardowa z interfejsem przeglądarki u góry strony). Gdy Bubblewrap skompiluje aplikację, w kroku init zostanie utworzony plik APK z konfiguracją klucza. Jednak gdy opublikujesz aplikację w Google Play, może zostać utworzony inny klucz, w zależności od tego, jaką metodę obsługi kluczy podpisywania wybierzesz. Dowiedz się więcej o kluczach podpisywania i o tym, jak są one powiązane z Bubblewrap i Google Play.

Digital Asset Links to przede wszystkim plik w Twojej witrynie, który wskazuje na Twoją aplikację, oraz metadane w aplikacji, które wskazują na Twoją witrynę.

Po utworzeniu pliku assetlinks.json prześlij go do swojej witryny w folderze .well-known/assetlinks.json (względnie katalogu głównego), aby przeglądarka mogła prawidłowo zweryfikować aplikację. Aby dowiedzieć się więcej o tym, jak to się ma do Twojego klucza podpisywania, przeczytaj szczegółowe informacje o protokole Digital Asset Links.

Sprawdzanie przeglądarki

Zaufana aktywność internetowa będzie się starała stosować do domyślnej przeglądarki użytkownika. Jeśli domyślna przeglądarka użytkownika obsługuje zaufane działania w internecie, zostanie ona uruchomiona. Jeśli nie, zostanie wybrana przeglądarka, która obsługuje zaufane działania w internecie. W przeciwnym razie domyślnie używany jest tryb kart niestandardowych.

Oznacza to, że jeśli debugujesz coś, co ma związek z zaufanymi działaniami internetowymi, upewnij się, że używasz przeglądarki, którą zaliczasz. Aby sprawdzić, która przeglądarka jest używana, użyj tego polecenia:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

Następne kroki

Mamy nadzieję, że jeśli zastosujesz się do tego przewodnika, Twoja zaufana aktywność internetowa działa prawidłowo i będziesz mieć wystarczającą wiedzę, aby debugować problem, gdy weryfikacja się nie powiedzie. Jeśli nie, zapoznaj się z innymi pojęciami dotyczącymi Androida dla programistów stron internetowych lub zgłoś problem na GitHubie w tych dokumentach.

Zacznij od utworzenia ikony aplikacji. Potem możesz rozważyć wdrożenie jej w Sklepie Play.