Device Memory API

Philip Walton

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.

  1. Skonfiguruj wymiar niestandardowy w Google Analytics.
  2. Zaktualizuj kod śledzenia do wersji set wartość 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:

Tworzenie w Google Analytics wymiarów niestandardowych pamięci urządzenia
Tworzenie w Google Analytics wymiarów niestandardowych pamięci urządzenia

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:

Tworzenie w Google Analytics niestandardowego raportu Pamięć urządzenia
Tworzenie w Google Analytics niestandardowego raportu Pamięć urządzenia

Raport, który generuje, może wyglądać tak:

Raport dotyczący pamięci urządzenia
Raport dotyczący pamięci urządzenia

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.