Deweloperzy mogą przenosić strony internetowe na Androida z wielu powodów, np. aby ponownie wykorzystać widżet internetowy w aplikacji na Androida, wdrożyć treści własne lub zewnętrzne albo nawet 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 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 używany sposób umieszczania treści internetowych w aplikacjach na Androida, ponieważ większość aplikacji na Androida korzysta z 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 używa WebView do umieszczania treści internetowych, WebView doda nagłówek X-Requested-With do każdego żądania wysył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-Requested-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 możesz korzystać z najlepszych cech obu rozwiązań: nadal możesz obsługiwać dotychczasowe funkcje zbudowane na podstawie tego nagłówka, a jednocześnie dbać o prywatność użytkowników we wszystkich innych 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żywać, aby wypróbować nową funkcję, zanim stanie się ona dostępna dla wszystkich. Do tej pory testowanie origin było dostępne tylko w Chrome na komputery i urządzenia mobilne, 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 tych kroków jest to, że komponent 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żytkownika sposób na wyświetlanie treści internetowych w 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, niestandardowa karta zostanie otwarta w Chrome. Jeśli Twoją przeglądarką domyślną jest Firefox, niestandardowa karta 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ą one użytkownikom wielozadaniowość w aplikacjach i w sieci. Do tej pory, gdy korzystasz z niestandardowych kart, nakładka karty przeglądarki zajmował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 udało im się wdrożyć nowy sposób interakcji z reklamami i treściami w internecie bez zakłócania naturalnego korzystania z aplikacji.
A co z tabletami i innymi urządzeniami z dużym ekranem? Zespół Chrome pracuje obecnie nad nową wersją kart niestandardowych wyświetlanych obok siebie w trybie poziomym i na dużych ekranach. Po zdefiniowaniu maksymalnej szerokości karty wraz z punktem przełamania karta niestandardowa będzie automatycznie przełączać się między dolnym paskiem nakładki a wyświetlaniem obok siebie. Ta funkcja jest już dostępna w Canary i zostanie wprowadzona w lipcu 2023 r. Jeśli chcesz to wypróbować, zapoznaj się z kodem źródłowym przykładowej aplikacji kart niestandardowych 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ć bardzo przydatne przy ustalaniu priorytetów dotyczących linków, które 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 na temat sygnałów 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. Skupiają się na kompatybilności między platformami, dając deweloperom narzędzia do tworzenia aplikacji internetowych, które można 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, które sprawiają, że instalowana aplikacja internetowa czuje się jak w domu na Androidzie.
Chcieliśmy umożliwić użytkownikom instalowanie witryn, które są dla nich najważniejsze. 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ę.
Wymaganie dotyczące usługi w tle było wymagane, aby deweloperzy mogli zapewnić użytkownikom wrażenia zbliżone do tych, jakie oferują inne aplikacje 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 dodaliśmy do Chrome domyślną obsługę trybu offline, która wyświetla użytkownikom ekran z ikoną aplikacji, informując ich o tym, że są offline. Nie wymaga to dodatkowej pracy 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. Dodanie tablicy o nazwie shortcuts, która opisuje zestaw szybkich działań, które użytkownicy często wykonują w aplikacji, umożliwi im dostęp do tych działań przez długie naciśnięcie ikony aplikacji.
Dzięki interfejsom API udostępniania w internecie i docelowych interfejsów API udostępniania w internecie Twoja aplikacja może wchodzić w interakcje z innymi aplikacjami tak samo jak każda inna aplikacja na dowolnej platformie. Twoja aplikacja będzie dostępna w arkuszach udostępniania, a także będzie mogła udostępniać i 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 (ZAI).
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 jak usługa ściśle powiązana 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ą one wszystkie funkcje platformy internetowej i interfejsy API obsługiwane przez przeglądarkę.
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 interfejsu Play Billing API, który umożliwia deweloperom zarządzanie sprzedażą produktów cyfrowych w aplikacjach, ułatwiając konfigurowanie produktów, promocji, subskrypcji i innych funkcji; delegowanie uprawnień do powiadomień i lokalizacji geograficznej aplikacji na Androida zamiast witryny.
Aby dowiedzieć się więcej o tym, jak firma ContactsDirect wykorzystała TWA, aby pomóc użytkownikom i potroić współczynniki konwersji, przeczytaj ten artykuł.
Podsumowanie
Jak widzisz, istnieje wiele różnych opcji umożliwiających umieszczanie treści internetowych w aplikacji, a wszystkie te opcje są stale ulepszane.