Jak sprawdzić, czy użytkownik korzysta ze strony czy z aplikacji

Jest wiele sytuacji, w których warto rozróżnić osobę przeglądającą Twoją stronę w przeglądarce od tej, która robi to przez aplikację. Może chcesz sprawdzić, jak dobrze użytkownicy przyjmują Twoją aplikację, albo pokazać inną treść użytkownikom aplikacji.

Tak jak jest wiele zastosowań, tak jest też kilka sposobów, by to osiągnąć. Przejdźmy przez nie po kolei.

Na podstawie User Agent

User agent to krótki ciąg znaków, który przeglądarka wysyła do stron internetowych przy każdym ładowaniu strony. Zawiera on informacje o przeglądarce, na przykład przeglądarka Firefox może wysłać taki user agent:

Na tej podstawie Twoja strona może wykryć, że użytkownik korzysta z przeglądarki Mozilla Firefox w wersji 47.0. Tak samo jak przeglądarki, Twoja aplikacja również wysyła user agent, który ją identyfikuje.

User agenty używane przez aplikację

Aplikacja używa kilku różnych user agentów:

• $regularUserAgent App-WebView ($operatingSystem) $version
  To typowy user agent używany przez wewnętrzną przeglądarkę aplikacji (która wyświetla Twoją stronę w aplikacji). Żądania z tym user agentem są inicjowane przez użytkownika aplikacji podczas nawigacji między stronami.
• App-HttpClient $version
  To user agent używany do żądań wykonywanych przez aplikację, które nie są bezpośrednio inicjowane przez użytkownika. Na przykład aplikacja używa go do zapisywania części strony do trybu offline. Tryb offline jest domyślnie wyłączony, więc prawdopodobnie nie zobaczysz wielu żądań z tym user agentem.

$version to wewnętrzna wersja aplikacji (np. 1.4.8+52), a $operatingSystem to platforma, na której działa aplikacja (np. ios lub android).

$regularUserAgent to user agent mobilnej przeglądarki, którego można się spodziewać na danym urządzeniu, np. Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Przykładowy user agent, którego aplikacja może użyć na iOS, wyglądałby tak: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

W ustawieniach nawigacji możesz też sprawić, by $regularUserAgent bardziej przypominał zwykłą przeglądarkę (a nie WebView). Na przykład doda Safari/605.1.15 po Mobile/15E148.

Filtrowanie po user agencie aplikacji

Na podstawie powyższego formatu user agenta możesz wykryć, że Twoja strona jest ładowana przez aplikację, sprawdzając, czy user agent zawiera "App-WebView". Jeśli chcesz sprawdzić też system operacyjny, możesz dodatkowo sprawdzić, czy user agent zawiera "(android)" lub "(ios)".

Przykład: Pokazywanie innej treści na stronie WordPress

Z domyślnym edytorem WordPress

Jeśli korzystasz z WordPressa, możesz użyć wtyczki "UserAgent Content Switcher". Nazwa wtyczki mówi sama za siebie: pozwala pokazywać różną treść użytkownikom w zależności od ich user agenta. Oto jak ją skonfigurować (i przykładowe zastosowanie):

1. Zainstaluj wtyczkę na swojej stronie. Pamiętaj, że nie jesteśmy powiązani z tą wtyczką ani jej twórcą, po prostu ją przetestowaliśmy i wydaje się być darmowa i działać poprawnie.
2. Na stronie ustawień wtyczki dodaj nowy typ z następującymi ustawieniami:
   • Nazwa typu: Aplikacja
   • Atrybut shortcode: app
   • User agent: App-WebView
3. Edytuj jedną ze swoich stron i przejdź do edytora kodu.
4. Teraz możesz tworzyć sekcje widoczne tylko w aplikacji, na przykład tak:

   
   Ten tekst jest widoczny dla wszystkich.
   
   [agentsw ua='app']
   Ten tekst widzą tylko użytkownicy aplikacji!
   [/agentsw]

   

Z Elementorem

Jeśli korzystasz z Elementora, możesz zamiast tego użyć darmowej wtyczki Powerpack wraz z rozszerzeniem powerpack-webtoapp. Oto jak to działa:

1. Zainstaluj wtyczkę Powerpack przez sklep WordPress.
2. Pobierz wtyczkę powerpack-webtoapp jako plik zip i zainstaluj ją.
   Wtyczka powerpack-webtoapp (i pomysł użycia Powerpack na stronach Elementor) została stworzona przez ALL IN APPLI. Używają tej wtyczki do zarządzania wieloma aplikacjami webtoapp.design i hojnie postanowili się nią podzielić.
3. Teraz możesz ustawić, by konkretne elementy były widoczne tylko w aplikacji.

Za pomocą JavaScript

Na podstawie User Agent

Oczywiście możesz sprawdzać user agenta nie tylko po stronie serwera (jak opisano wcześniej), ale także w JavaScript.

Oto przykład, jak za pomocą JavaScript wykryć, czy użytkownik korzysta z aplikacji czy przeglądarki:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

Sprawdzając modyfikacje HTML

Aplikacja wprowadza drobne, niewidoczne zmiany w kodzie HTML strony, które są potrzebne do działania niektórych funkcji aplikacji. Możemy też wykorzystać te zmiany, by wykryć, czy strona została załadowana przez aplikację.

Ponieważ to trochę trudniejsze, polecamy użyć executeWhenAppReady ze skryptu pomocniczego aplikacji. Możesz wtedy umieścić dowolny kod wewnątrz funkcji executeWhenAppReady, a zostanie on wykonany tylko wtedy, gdy strona została załadowana przez aplikację. Małym minusem tej metody jest to, że kod wykona się z kilkumilisekundowym opóźnieniem, nawet jeśli strona została załadowana przez aplikację.

Wstrzykując kod do aplikacji

Na stronie personalizacji strony możesz dodać dowolny JavaScript lub CSS, który aplikacja powinna wstrzykiwać na każdej ładowanej stronie. Możliwości są tu praktycznie nieograniczone, ale na przykładzie sprawmy, by ten tekst był zielony w aplikacji:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Możemy teraz ustawić, by aplikacja wstrzykiwała taki JavaScript:

document.getElementById("red-text").style.color = "green";

Albo alternatywnie taki CSS:

#red-text {
    color: green !important;
}

Jak widzisz, to także sposób na uzyskanie innego zachowania na stronie i w aplikacji.