Sprawdzone metody dotyczące aplikacji internetowych

Tworzenie stron internetowych i aplikacji na urządzenia mobilne wiąże się z innymi wyzwaniami niż tworzenie stron internetowych na przeglądarki na komputery. Poniższe wskazówki pomogą Ci stworzyć najskuteczniejszą aplikację internetową na Androida i inne urządzenia mobilne.

  1. Przekierowuj użytkowników urządzeń mobilnych do specjalnej wersji mobilnej witryny. Można to zrobić na kilka sposobów za pomocą przekierowań po stronie serwera. Jedną z popularnych metod jest „wykrywanie” ciągu klienta użytkownika dostarczanego przez przeglądarkę. Aby określić, czy udostępnić wersję mobilną witryny, poszukaj w kliencie użytkownika ciągu znaków „mobile”.
  2. Na urządzeniach mobilnych używaj HTML5. HTML5 to najpopularniejszy język znaczników używany w przypadku witryn mobilnych. Ten standard zachęca do tworzenia stron z myślą o urządzeniach mobilnych, aby witryny działały na różnych urządzeniach. W przeciwieństwie do poprzednich języków internetowych HTML5 używa prostszych deklaracji <DOCTYPE> i charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Używaj metadanych widocznego obszaru, aby prawidłowo zmieniać rozmiar strony internetowej. W dokumencie<head> podaj metadane określające, jak przeglądarka ma renderować stronę internetową w widoku. Na przykład metadane widocznego obszaru mogą określać wysokość i szerokość widocznego obszaru przeglądarki, początkową skalę strony i docelową gęstość ekranu.

    Przykład poniżej pokazuje, jak ustawić metadane viewport:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Więcej informacji o używaniu metadanych widocznego obszaru na urządzeniach z Androidem znajdziesz w artykule Obsługa różnych ekranów w aplikacjach internetowych.

  4. Użyj pionowego układu liniowego. Unikaj sytuacji, w których użytkownik musi przewijać stronę w lewo i w prawo. Przewijanie w górę i w dół jest łatwiejsze dla użytkownika i upraszcza stronę.
  5. Ustaw wysokość i szerokość układu na match_parent. Ustawienie wysokości i szerokości obiektu WebView na match_parent zapewnia prawidłowe rozmiary widoków aplikacji. Nie zalecamy ustawiania wysokości na wrap_content, ponieważ powoduje to nieprawidłowe określenie rozmiaru. Podobnie ustawienie szerokości układu na wrap_content nie jest obsługiwane i powoduje, że element WebView używa szerokości elementu nadrzędnego. Z tego powodu ważne jest też, aby żaden z obiektów układu nadrzędnego obiektu WebView nie miał ustawionej wysokości i szerokości na wrap_content.
  6. Unikaj wysyłania wielu żądań dotyczących plików. Urządzenia mobilne mają zwykle mniejszą szybkość połączenia niż komputery stacjonarne, dlatego zadbaj o to, aby Twoja strona wczytywała się jak najszybciej. Jednym ze sposobów na przyspieszenie tego procesu jest unikanie wczytywania dodatkowych plików, takich jak arkusze stylów i pliki skryptów, w <head>. Warto też przeprowadzić analizę mobilną za pomocą narzędzia PageSpeed Insights od Google, aby uzyskać szczegółowe sugestie dotyczące optymalizacji aplikacji.
  7. Wyłącz automatyczne pobieranie ikon witryn, jeśli ich nie potrzebujesz. Domyślnie WebView automatycznie pobiera favikonę przy każdej wizycie na stronie. WebView przechowuje 2 kopie każdej pobranej favikony (jedną w pamięci Javy, a drugą w pamięci natywnej), więc wyłączenie pobierania favikon oszczędza pamięć (około 8 KB na instancję WebView) i zmniejsza zużycie przepustowości. Jeśli Twoja aplikacja nie używa ani nie wyświetla ikon ulubionych, użyj WebSettingsCompat.setDownloadFaviconsEnabled() z biblioteki Jetpack Webkit , aby wyłączyć automatyczne pobieranie:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Zarządzaj zapisanym stanem i unikaj limitów transakcji. Jeśli zapisujesz stan WebView podczas zdarzeń cyklu życia za pomocą saveState(Bundle), wymuś limity rozmiaru ładunku za pomocą WebViewCompat.saveState(), aby uniknąć przekroczenia limitu savedInstanceState w Androidzie (1 MB). Więcej informacji znajdziesz w artykule Efektywne zarządzanie stanem WebView.
  9. Optymalizuj połączenia sieciowe i wczytywanie stron za pomocą interfejsów API do ładowania spekulacyjnego. Aby zmniejszyć opóźnienie nawigacji, użyj interfejsów API Jetpack Webkit do wcześniejszego przygotowania połączeń sieciowych i treści. Wywołaj Profile.addQuicHints, aby wstępnie wypełnić obsługę HTTP/3 przez QUIC, dzięki czemu WebView może od razu używać QUIC przy pierwszym połączeniu, oraz użyj Profile.preconnect, aby wstępnie przygotować gniazda sieciowe. Gdy adresy URL stron docelowych są znane lub prawdopodobne, używaj tagów Profile.prefetchUrlAsync lub WebViewCompat.prerenderUrlAsync, aby pobierać lub renderować strony w tle. Więcej informacji znajdziesz w artykule Ładowanie spekulacyjne w WebView.
  10. Wyłącz automatyczne pobieranie ikon witryn, jeśli ich nie potrzebujesz. Domyślnie WebView automatycznie pobiera favikonę przy każdej wizycie na stronie. WebView przechowuje 2 kopie każdej pobranej favikony (jedną w pamięci Javy, a drugą w pamięci natywnej), więc wyłączenie pobierania favikon oszczędza pamięć (około 8 KB na instancję WebView) i zmniejsza zużycie przepustowości. Jeśli Twoja aplikacja nie używa ani nie wyświetla ikon ulubionych, użyj WebSettingsCompat.setDownloadFaviconsEnabled() z biblioteki Jetpack Webkit , aby wyłączyć automatyczne pobieranie:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Zarządzaj zapisanym stanem i unikaj limitów transakcji. Jeśli zapisujesz stan WebView podczas zdarzeń cyklu życia za pomocą saveState(Bundle), wymuś limity rozmiaru ładunku za pomocą WebViewCompat.saveState(), aby uniknąć przekroczenia limitu savedInstanceState w Androidzie (1 MB). Więcej informacji znajdziesz w artykule Efektywne zarządzanie stanem WebView.

Dodatkowe materiały