Deweloperzy mogą przenosić strony internetowe na Androida z wielu powodów, np. aby ponownie wykorzystać widżet internetowy w aplikacji na Androida, włączyć treści własne lub zewnętrzne albo przenieść na platformę całą aplikację internetową. Niezależnie od przypadku, Android oferuje wiele narzędzi, które to umożliwiają.
Oto najnowsze informacje o tych narzędziach. Na przykład:
- Ulepszenia dotyczące prywatności i lepsza obsługa dużych ekranów, np. obsługa przeciągania i upuszczania obrazów w WebView.
- Kartki niestandardowe obsługują teraz częściowe karty niestandardowe.
- zintegrowane funkcje aplikacji PWA, takie jak poszerzone UI do instalacji i interfejs API płatności Google Play w zaufanych aktywności internetowych;
Przejdźmy do sedna i dowiedzmy się więcej.
WebView | komponent WebView
WebView to najczęściej stosowany sposób umieszczania treści z internetu w aplikacjach na Androida, ponieważ znaczna większość aplikacji na Androida korzysta z komponentu WebView. Jest to świetny sposób na płynne zintegrowanie interfejsu internetowego z natywnymi aplikacjami na Androida. Możesz na przykład umieszczać w aplikacji różne elementy interfejsu internetowego, takie jak reklamy, widżety czy przeglądarki w aplikacji. Jedną z największych zalet WebView jest potężny interfejs API do kontrolowania i modyfikowania wczytywanych treści internetowych. Co nowego w WebView?
Nagłówek X-Requested-With
Zacznijmy od prywatności i wycofania nagłówka X-Requested-With. Gdy użytkownik zainstaluje i uruchomi aplikację, która do umieszczania treści z internetu użyje komponentu WebView, ten komponent doda nagłówek X-Żądane-With do każdego żądania wysłanego do serwerów. Wartością tego nagłówka jest nazwa pliku APK aplikacji. Oznacza to, że każde żądanie zawiera konkretne informacje o kontekście, w którym użytkownik przegląda treści internetowe, i ujawnia tożsamość aplikacji usłudze online. Aby chronić prywatność użytkowników, zespół WebView rozpoczął testowanie wycofywania, który powoduje usunięcie tego nagłówka ze wszystkich żądań WebView.
Co jednak, jeśli Twoja aplikacja korzysta z nagłówka X-Request-With? Zalecamy użycie nowego interfejsu API do wyrażenia zgody, który umożliwia wysyłanie nagłówka żądania do określonych źródeł. Oznacza to, że korzystasz z obu rozwiązań: możesz nadal korzystać z dotychczasowych funkcji utworzonych na podstawie tego nagłówka, jednocześnie dbając o ochronę prywatności użytkownika we wszystkich pozostałych przypadkach. Jeśli chcesz zachować dotychczasowe działanie, możesz też zarejestrować się w ramach okresu próbnego X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Testowanie WebView
Następnym tematem jest testowanie. Jeśli jesteś programistą stron internetowych i Twoje witryny otrzymują dużo ruchu z WebViews, mamy dla Ciebie 2 informacje:
WebView obsługuje teraz testy pochodzenia Chrome. Wersje próbne origin dają dostęp do nowych lub eksperymentalnych funkcji w Chrome. Możesz ich użyć, aby wypróbować nową funkcję, zanim udostępnimy ją wszystkim użytkownikom. Do tej pory testowanie origin było dostępne tylko w Chrome na komputery i telefony, ale od wersji M110 testowanie origin działa też w komponencie WebView.
Instalowanie WebView Beta jest teraz znacznie łatwiejsze. Zdecydowanie zalecamy przetestowanie witryny za pomocą kanału WebView Beta, aby upewnić się, że działa ona prawidłowo w przyszłych wersjach WebView. Aby to zrobić, dołącz do programu testów wersji beta WebView w Sklepie Google Play. Twoje urządzenie zostanie automatycznie zarejestrowane.
Obsługa urządzeń z dużym ekranem
Naszym celem jest zapewnienie prawidłowego działania WebView na urządzeniach z dużym ekranem. Jednym z kroków w tym kierunku jest to, że WebView obsługuje teraz przeciąganie i upuszczanie obrazów. Na przykład w widoku podzielonego ekranu możesz przeciągnąć obraz z komponentu WebView do innej aplikacji.
Dodanie przeciągania i upuszczania do WebView jest bardzo proste: wystarczy zadeklarować DropDataProvider w AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
Jeśli chodzi o urządzenia z dużym ekranem, Chrome i WebView na Androidzie U będą w pełni obsługiwać pisanie odręczne w polach tekstowych HTML oraz gesty wprowadzania służące do usuwania tekstu lub dodawania spacji. Obsługa pisma odręcznego jest już dostępna na wszystkich urządzeniach Samsung z One UI 5.1, takich jak S23 Ultra. W przypadku innych urządzeń z Androidem T możesz włączyć pismo odręczne w polach wejściowych HTML w sekcji Opcje programisty.
Jetpack JavaScript Engine
Czasami może być konieczne uruchomienie w aplikacji kodu JavaScript bez wyświetlania żadnych treści internetowych, np. gdy udostępniasz logikę biznesową w aplikacji internetowej i mobilnej. Aby ułatwić to zadanie, wprowadziliśmy w ubiegłym roku wersję alfa nowego mechanizmu JavaScript JetPack. Biblioteka ta korzysta z V8, czyli mechanizmu JavaScriptu w Chrome, i pozwala aplikacji oceniać kod JavaScript lub WebAssembly bez tworzenia instancji WebView. Nowy mechanizm JavaScriptu ma tę zaletę, że wykonuje kod JavaScript w ramach innego procesu, co czyni go bezpiecznym i stabilnym sposobem uruchamiania kodu JavaScriptu w aplikacji. Wymaga też mniej zasobów niż instancja WebView.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Karty niestandardowe
WebView doskonale nadaje się do integracji interfejsu internetowego z aplikacją. Ale czy warto pozwolić użytkownikom przeglądać treści internetowe w aplikacji?
To świetny przykład zastosowania kart niestandardowych. To bezpieczny i przyjazny dla użytkowników sposób przeglądania treści internetowych w Twojej aplikacji. Ich dużą zaletą jest to, że użytkownicy nie muszą ponownie logować się w ulubionych witrynach. Dzieje się tak, ponieważ są one instancją domyślnej przeglądarki użytkownika i plików cookie, które są udostępniane, oraz oferują wszystkie funkcje platformy internetowej i interfejsy API obsługiwane przez przeglądarkę.
Oznacza to też, że jeśli Twoją przeglądarką domyślną jest Chrome, karta niestandardowa zostanie otwarta w Chrome. Jeśli Twoją przeglądarką domyślną jest Firefox, karta niestandardowa zostanie otwarta w Firefox. Większość głównych przeglądarek na Androida obsługuje karty niestandardowe. Jeśli domyślna przeglądarka nie obsługuje kart niestandardowych, otworzy się aplikacja przeglądarki.
Zaletą kart niestandardowych jest to, że możesz je stylizować, aby pasowały do wyglądu i działania aplikacji, dodawać niestandardowe interakcje za pomocą działań i własnych pasków narzędzi.
Częściowe karty niestandardowe
Dostosowanie kart niestandardowych zostało znacznie ulepszone dzięki obsłudze częściowych kart niestandardowych. Umożliwiają użytkownikom wykonywanie wielu zadań jednocześnie w aplikacjach i w internecie. Do tej pory podczas korzystania z kart niestandardowych nakładka zakrywała cały ekran. Możesz teraz kontrolować wysokość nakładki karty niestandardowej. Dzięki temu użytkownicy mogą jednocześnie korzystać z aplikacji i zawartości w internecie. Jeśli przeglądarka użytkownika nie obsługuje częściowych kart niestandardowych, użytkownik zobaczy tylko obsługiwaną kartę niestandardową na pełnym ekranie.
Wystarczy połączyć się z usługą kart niestandardowych, przekazać sesję do klasy CustomTabsBuilder i wywołać metodę setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
W YouTube uruchomiliśmy w reklamach bezpośrednich wstawiane w treści reklamy karty niestandardowe, które można zmieniać w rozmiarze. Dzięki temu mogą wdrożyć nowy sposób interakcji z reklamami i treściami internetowymi, nie zakłócając korzystania z aplikacji.
A co z tabletami i innymi urządzeniami z dużym ekranem? Zespół Chrome pracuje obecnie nad nowym interfejsem kart niestandardowych, który będzie wyświetlać się obok siebie na urządzeniach w orientacji poziomej i na urządzeniach z dużym ekranem. Gdy określisz maksymalną szerokość karty w połączeniu z punktem przerwania, karta niestandardowa będzie automatycznie przełączać się między nakładką u dołu a stroną obok siebie. Ta funkcja jest już dostępna w Canary i zostanie wprowadzona w lipcu 2023 r. Jeśli chcesz wypróbować tę funkcję, zapoznaj się z kodem źródłowym przykładowej aplikacji Karty niestandardowe w Chromium.
Pomiar sygnałów zaangażowania
Drugą ważną zmianą w przypadku kart niestandardowych jest pomiar zaangażowania użytkowników w poszczególnych sesjach. Jeśli Twoja aplikacja regularnie wyświetla użytkownikom treści, w tym linki, np. w kanałach wiadomości, nie byłoby wspaniale, gdyby można było określić, które linki są dla nich wartościowe, a które nie? Te informacje mogą być naprawdę pomocne, jeśli chodzi o to, które linki mają być wyświetlane użytkownikom.
Zespół Chrome dodał do kart niestandardowych Chrome widoczność danych dotyczących sesji. Oprócz czasu spędzonego na stronie możesz teraz też sprawdzić odległość przewijania, kierunek przewijania i ogólne zaangażowanie w treści.
Sygnały zaangażowania są dostępne od wersji 114 Chrome i wymagają biblioteki obsługi androidx.browser:browser:1.6.0-alpha01 lub nowszej. Więcej informacji znajdziesz w przewodniku dla początkujących w sekcji Sygnały zaangażowania.
PWA
Wprowadziliśmy też aktualizacje dotyczące PWA, czyli zestawu technologii, które umożliwiają tworzenie w internecie aplikacji zbliżonych do aplikacji mobilnych.
Dzięki PWA na Androida możesz zainstalować aplikację internetową: będzie ona widoczna na ekranie głównym, w launcherze, ustawieniach i na innych powierzchniach obok innych aplikacji.
Funkcje PWA są tworzone na podstawie standardów internetowych. Koncentrują się na zgodności z wieloma platformami, dzięki czemu deweloperzy mają narzędzia, które umożliwiają jednorazowe stworzenie aplikacji internetowej, a użytkownicy mogą ją zainstalować na dowolnym urządzeniu. Stworzenie instalowanej aplikacji internetowej nie oznacza, że nie możesz mieć natywnej aplikacji na Androida. Jest to po prostu kolejna opcja udostępniania treści internetowych na Androidzie.
Przyjrzyjmy się kilku funkcjom, dzięki którym możesz zainstalować aplikację internetową na Androidzie.
Chcieliśmy umożliwić użytkownikom instalowanie witryn, które najbardziej ich interesują. Pierwszym krokiem było usunięcie modułu obsługi pobierania usługi jako wymagania do instalacji na Androidzie i w Chrome. Chrome pominie uruchomienie pracownika usługi, jeśli obsługa pobierania jest pusta. Chrome będzie przeprowadzać eksperymenty, aby umożliwić użytkownikom instalację. Zwróć na nie uwagę i prześlij opinię.
Skrypt service worker był wymagany, aby deweloperzy mogli zapewnić użytkownikom takie same funkcje jak w innych aplikacjach na Androida. Można go użyć do utworzenia strony informującej użytkownika, że nie może on korzystać z aplikacji w trybie offline.
Zdaliśmy sobie sprawę, że możemy zmniejszyć nakład pracy deweloperów i zadbać o to, aby te aplikacje zapewniały wygodę od samego początku. Dlatego w Chrome dodano domyślne działanie offline, które wyświetla użytkownikom ekran z ikoną aplikacji, informując ich o tym, że są offline. Nie wymaga to dodatkowych działań ze strony programistów.
Interfejs service worker API jest oczywiście nadal dostępny do tworzenia niestandardowych funkcji offline i wdrażania innych funkcji, takich jak buforowanie, które zwiększa wydajność.
Inne funkcje, które mogą poprawić działanie aplikacji internetowych na Androidzie, to bogatszy interfejs instalacji. Dodanie pól description i screenshots do pliku manifestu internetowego sprawi, że użytkownicy będą mogli zainstalować aplikację w sposób zbliżony do tego, który jest widoczny w sklepach z aplikacjami.
Mamy też skróty. Gdy dodasz tablicę o nazwie shortcuts, która opisuje zestaw szybkich działań, które użytkownicy często wykonują w Twojej aplikacji, będą mogli je otworzyć, przytrzymując ikonę aplikacji.
Dzięki interfejsom API Web Share i Web Share Target Twoja aplikacja może wchodzić w interakcje z innymi aplikacjami tak jak każda inna aplikacja na dowolnej platformie. Twoja aplikacja będzie opcją w arkuszu udostępniania i będzie mogła udostępniać oraz odbierać zdjęcia, teksty i inne pliki.
Więcej informacji o tym, jak firmy wykorzystują te technologie, znajdziesz w prezencie z konferencji I/O „The Web: Your platform for growth” (Internet – Twoja platforma do rozwoju).
Zaufana aktywność w internecie
Innym sposobem na korzystanie z internetu na urządzeniach z Androidem jest korzystanie z zaufanej aktywności internetowej (TWA).
TWA to najlepszy sposób na wyświetlanie w aplikacji własnych treści internetowych na pełnym ekranie. Jest to idealne rozwiązanie dla deweloperów, którzy chcą zamienić swoją aplikację internetową na aplikację na Androida lub używać swojej witryny jako części aplikacji.
Pamiętaj, że TWA brzmi jakby było ściśle powiązane z PWA, ale tak nie jest. Tak. Za pomocą TWA możesz opublikować instalowaną aplikację internetową w Google Play, ale możesz też utworzyć jedną czynność w internecie i umieścić ją w aplikacji na Androida.
Zaufane działanie w internecie jest renderowane przez przeglądarkę użytkownika dokładnie tak samo, jak widzia je użytkownik w swojej przeglądarce, z tym że działa na pełnym ekranie i nie wyświetla paska adresu URL. Oznacza to, że obsługują wszystkie funkcje platformy internetowej i interfejsy API obsługiwane przez przeglądarkę obsługującą tę platformę.
Oto kilka zalet korzystania z opakowania aplikacji internetowej za pomocą TWA:
Publikowanie w Google Play, co zapewnia aplikacji widoczność i możliwość dystrybucji w Google Play. Dostęp do Play Billing API, który umożliwia deweloperom zarządzanie sprzedażą produktów cyfrowych w aplikacjach, co ułatwia konfigurowanie produktów, sprzedaży, subskrypcji i innych funkcji. delegowanie uprawnień do powiadomień i lokalizacji geograficznej aplikacji na Androida zamiast stronie internetowej;
W tym artykule znajdziesz więcej informacji o tym, jak firma ContactsDirect wykorzystała TWA, aby pomóc użytkownikom i potroić współczynniki konwersji.
Podsumowanie
Jak widzisz, istnieje wiele różnych opcji umożliwiających umieszczanie treści internetowych w aplikacji, a wszystkie te opcje są stale ulepszane.