Możliwości urządzeń, które mogą łączyć się z internetem, są obecnie znacznie większe do tej pory. Ta sama aplikacja internetowa, która jest używana urządzeniom zaawansowanym z komputera, telefonu lub tabletu o niskim zużyciu energii, a stworzenie atrakcyjnych doświadczeń, które sprawdzą się w każdej sytuacji, może być niezwykle trudne. na każdym urządzeniu.
Interfejs Device Memory API to nowy interfejs internetowy
to funkcja platformy, która pomaga programistom stron internetowych w radzeniu sobie z nowoczesnymi urządzeniami
w orientacji poziomej. Dodaje do obiektu navigator właściwość tylko do odczytu,
navigator.deviceMemory, która podaje, ile pamięci RAM ma urządzenie
gigabajtów w dół i zaokrąglonych do najbliższej potęgi 2. Interfejs API
Client Hints Header (Nagłówek wskazówek dla klientów),
Device-Memory, która zgłasza tę samą wartość.
Interfejs Device Memory API daje deweloperom możliwość wykonywania 2 głównych zadań:
- W czasie działania aplikacji podejmuj decyzje o tym, które zasoby mają być wyświetlane na podstawie zwróconych zasobów ilość pamięci urządzenia (np. udostępnianie „lekkiej” wersji aplikacji urządzeniach z małą ilością pamięci).
- Zgłoś tę wartość do usługi analitycznej, aby lepiej zrozumieć, jak pamięć urządzenia jest powiązana z zachowaniem użytkownika, konwersjami lub innymi wskaźnikami. ważne dla Twojej firmy.
Dynamiczne dostosowywanie treści na podstawie pamięci urządzenia
Jeśli masz własny serwer WWW i możesz zmodyfikować logikę,
obsługuje zasoby, możesz warunkowo odpowiadać na żądania zawierające
Device-Memory Nagłówek wskazówek dla klientów.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Dzięki tej metodzie możesz utworzyć co najmniej jedną wersję swojej aplikacji
skrypt(y) i odpowiadanie na żądania klienta warunkowo, na podstawie
ustawiona w nagłówku Device-Memory. Te wersje nie muszą zawierać ciągu
zupełnie innym kodem (bo jest trudniejsze w utrzymaniu). Zwykle
„lekka” wykluczy tylko funkcje, które mogą być drogie i nie mają krytycznego znaczenia.
z wrażeniami użytkownika.
Korzystanie z nagłówka ze wskazówkami klienta
Aby włączyć nagłówek Device-Memory, dodaj tag <meta> Wskazówki dla klienta
do sekcji <head> dokumentu:
<meta http-equiv="Accept-CH" content="Device-Memory">
Lub uwzględnij „Pamięć urządzenia” w nagłówkach odpowiedzi Accept-CH serwera:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Informuje to przeglądarkę, że ma wysłać nagłówek Device-Memory ze wszystkimi zasobami podrzędnymi
żądania dla bieżącej strony.
Innymi słowy, jeśli zastosujesz jedną z powyższych opcji
witryny, jeśli użytkownik korzysta z urządzenia z 0, 5 GB pamięci RAM, wszystkie obrazy, pliki CSS
Żądania JavaScript z tej strony będą zawierać nagłówek Device-Memory z parametrem
jest ustawiona na 0,5, przy czym serwer może odpowiadać na takie żądania
wedle uznania.
Na przykład ta trasa Express obsługuje
„lekka” wersji skryptu, jeśli nagłówek Device-Memory jest ustawiony, a jego wartość to
ma wartość mniejszą niż 1 lub wyświetla „pełen” jeśli przeglądarka nie obsługuje
Device-Memory albo wartość wynosi 1 lub więcej:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
Używanie interfejsu JavaScript API
W niektórych przypadkach (np. w przypadku statycznego serwera plików lub sieci CDN) nie można warunkowo odpowiadać na żądania na podstawie nagłówka HTTP. W takich przypadkach API JavaScript może wysyłać żądania warunkowe w kodzie JavaScript.
Poniższa logika jest podobna do powyższej trasy ekspresowej, z tą różnicą, że dynamicznie określa adres URL skryptu w logice po stronie klienta:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Warunkowe udostępnianie różnych wersji tego samego komponentu na podstawie możliwości urządzenia to dobra strategia, czasami lepiej nie ani nie używać komponentu w ogóle.
W wielu przypadkach komponenty to tylko ulepszenia. Dodają miły akcent ale nie są niezbędne do realizowania głównej funkcji aplikacji. W w takich przypadkach warto zrezygnować z wczytywania takich komponentów. jeśli komponent, który ma poprawić wrażenia użytkownika, powoduje powolne działanie aplikacji; lub nie reaguje, nie osiąga zamierzonego celu.
Każda decyzja wpływająca na wygodę użytkowników mierzyć ich wpływ. Niezbędne jest również dokładne zaplanowanie, skuteczność aplikacji na rynku.
Zrozumienie, jak pamięć urządzenia koreluje z zachowaniem użytkownika w danym okresie będzie lepiej wie, jakie działania trzeba podjąć, stanowi punkt odniesienia, na podstawie którego będzie można mierzyć skuteczność przyszłych zmian.
Śledzenie pamięci urządzenia za pomocą statystyk
Interfejs Device Memory API jest nowy i większość dostawców narzędzi analitycznych go nie śledzi domyślnie. Na szczęście większość dostawców rozwiązań analitycznych umożliwia śledzenie danych (np. Google Analytics oferuje funkcję Wymiary niestandardowe), dzięki której możesz służy do śledzenia pamięci urządzenia urządzenia.
Używanie niestandardowego wymiaru pamięci urządzenia
Używanie wymiarów niestandardowych w Google Analytics to proces dwuetapowy.
- Skonfiguruj wymiar niestandardowy w Google Analytics.
- Zaktualizuj kod śledzenia do wersji
setwartość pamięci urządzenia dla utworzonego właśnie wymiaru niestandardowego.
Podczas tworzenia wymiaru niestandardowego nadaj mu nazwę „Pamięć urządzenia” i wybierz zakres „sesja”. ponieważ wartość nie zmienia się w trakcie sesji przeglądania przez użytkownika:
Następnie zaktualizuj kod śledzenia. Oto przykład, jak może to wyglądać. W przypadku przeglądarek, które nie obsługują interfejsu Device Memory API, wymiar ma wartość „(nie ustawiono)”.
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Raportowanie danych o pamięci urządzenia
Gdy wymiar pamięci urządzenia zostanie
set
trackera, wszystkie dane wysyłane do Google Analytics będą zawierać tę wartość.
Umożliwi Ci to podział dowolnych danych (np.czasu wczytywania strony, współczynnika realizacji celu itp.) według urządzenia.
pamięci i sprawdzać, czy są jakieś korelacje.
Pamięć urządzenia to wymiar niestandardowy, a nie wbudowany, więc nie będą widoczne w żadnym z raportów standardowych. Aby uzyskać dostęp do tych danych, musisz: utworzyć raport niestandardowy. Przykładem może być konfiguracja raportu niestandardowego, który porównuje czasy wczytywania pamięć urządzenia może wyglądać tak:
Raport, który generuje, może wyglądać tak:
Gdy już zbierzesz dane o pamięci urządzenia i wyznaczysz poziom bazowy Twojej aplikacji we wszystkich zakresach pamięci, możesz Poeksperymentuj z udostępnianiem różnych zasobów różnym użytkownikom (za pomocą metod opisanych w sekcji powyżej). Później możesz zobaczyć, i sprawdzić, czy się poprawiły.
Podsumowanie
Z tego posta dowiesz się, jak dostosować aplikację za pomocą interfejsu Device Memory API. do możliwości użytkowników urządzeń i pokazuje, jak mierzyć tym użytkownikom.
Choć ten post dotyczy interfejsu Device Memory API, większość metod opisane tu można zastosować do dowolnego interfejsu API raportującego możliwości urządzenia warunków sieci.
Rynek urządzeń stale się powiększa, więc ważniejsze niż kiedykolwiek wcześniej programiści stron internetowych biorą pod uwagę całe spektrum użytkowników podejmując decyzje, co wpływa na ich wrażenia.