Device Memory API

Możliwości urządzeń, które można połączyć z internetem, są obecnie większe niż kiedykolwiek wcześniej. Ta sama aplikacja internetowa, która jest obsługiwana w zaawansowanych komputerach, może być również udostępniana na telefonach, zegarkach i tabletach o niskiej mocy, a stworzenie atrakcyjnych rozwiązań, które działają płynnie na każdym urządzeniu, może być nie lada wyzwaniem.

Interfejs Device Memory API to nowa funkcja platformy internetowej, która ma pomagać deweloperom stron internetowych w radzeniu sobie z nowoczesnym środowiskiem urządzeń. Dodaje do obiektu navigator właściwość tylko do odczytu, navigator.deviceMemory, która zwraca ilość pamięci RAM urządzenia (w gigabajtach) zaokrągloną w dół do najbliższej wielokrotności dwóch. Interfejs API zawiera też nagłówek podpowiedzi klienta (Device-Memory), który zgłasza tę samą wartość.

Interfejs Device Memory API daje programistom dwa główne zadania:

  • Podejmuj decyzje w czasie działania o tym, które zasoby mają być wyświetlane na podstawie zwróconej wartości pamięci urządzenia (np. udostępniaj aplikację w wersji „lite” użytkownikom korzystającym z urządzeń z małą ilością pamięci).
  • Zgłoś tę wartość usłudze analitycznej, aby lepiej zrozumieć, w jaki sposób pamięć urządzenia ma związek z zachowaniem użytkowników, konwersjami i innymi wskaźnikami ważnymi 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ługi zasobów, możesz warunkowo odpowiadać na żądania zawierające nagłówek wskazówek dla klienta Device-Memory.

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

Dzięki tej technice możesz utworzyć co najmniej jedną wersję skryptu aplikacji i odpowiadać na żądania klienta warunkowo na podstawie wartości ustawionej w nagłówku Device-Memory. Nie muszą one zawierać zupełnie innego kodu (ponieważ trudniej nimi zarządzać). W większości przypadków wersja „lite” wykluczy funkcje, które mogą być drogie i nie mają znaczenia dla wygody użytkowników.

Korzystanie z nagłówka wskazówek klienta

Aby włączyć nagłówek Device-Memory, dodaj tag <meta> Wskazówki klienta do sekcji <head> dokumentu:

<meta http-equiv="Accept-CH" content="Device-Memory">

Możesz też umieścić tekst „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

Sprawi to, że przeglądarka ma wysyłać nagłówek Device-Memory ze wszystkimi żądaniami zasobów podrzędnych z bieżącej strony.

Oznacza to, że po wdrożeniu w witrynie jednej z powyższych opcji i gdy użytkownik korzysta z urządzenia z 0, 5 GB pamięci RAM, wszystkie żądania obrazów, CSS i JavaScriptu z tej strony będą zawierać nagłówek Device-Memory z wartością ustawioną na „0, 5”, a serwer będzie mógł reagować na takie żądania w dowolny sposób.

Na przykład ta trasa ekspresowa obsługuje wersję „lite” skryptu, jeśli nagłówek Device-Memory jest ustawiony, a jego wartość jest mniejsza niż 1, lub jeśli przeglądarka nie obsługuje nagłówka Device-Memory lub jego 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`);
});

Korzystanie z 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 możesz za pomocą JavaScript API 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 ramach logiki 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 wyświetlanie różnych wersji tego samego komponentu w zależności od możliwości urządzenia jest dobrą strategią, ale czasem lepszym rozwiązaniem jest całkowite zaprzestanie wyświetlania danego komponentu.

W wielu przypadkach są to tylko ulepszenia. Wnoszą kilka fajnych ulepszeń, ale nie są niezbędne do działania głównej funkcji aplikacji. W takich przypadkach lepiej nie ładować takich komponentów. Jeśli komponent, który ma poprawić wygodę użytkowników, powoduje spowolnienie działania aplikacji lub jej brak, nie osiąga swojego celu.

W przypadku każdej decyzji, która ma wpływ na wrażenia użytkownika, koniecznie mierz jej wpływ. Bardzo ważne jest też określenie bieżącej skuteczności aplikacji.

Zrozumienie, w jaki sposób pamięć urządzenia przekłada się na zachowanie użytkowników w bieżącej wersji aplikacji, ułatwi Ci podjęcie działań, które należy podjąć. Dzięki temu uzyskasz punkt odniesienia, na podstawie którego możesz mierzyć skuteczność przyszłych zmian.

Śledzenie pamięci urządzenia za pomocą analityki

Interfejs Device Memory API jest nowością i większość dostawców rozwiązań analitycznych nie śledzi go domyślnie. Na szczęście większość dostawców narzędzi analitycznych zapewnia możliwość śledzenia danych niestandardowych (np. Google Analytics udostępnia funkcję o nazwie Wymiary niestandardowe), która pozwala monitorować pamięć urządzeń użytkowników.

Korzystanie z niestandardowego wymiaru pamięci urządzenia

Korzystanie z wymiarów niestandardowych w Google Analytics składa się z 2 etapów.

  1. Skonfiguruj wymiar niestandardowy w Google Analytics.
  2. Zaktualizuj kod śledzenia do set wartości pamięci urządzenia dla utworzonego właśnie wymiaru niestandardowego.

Tworząc wymiar niestandardowy, nadaj mu nazwę „Pamięć urządzenia” i wybierz zakres „sesja”, ponieważ wartość ta nie będzie się zmieniać podczas sesji przeglądania przez użytkownika:

Tworzenie w Google Analytics wymiarów niestandardowych Pamięć urządzenia
Tworzenie w Google Analytics wymiarów niestandardowych Pamięć urządzenia

Następnie zaktualizuj kod śledzenia. Oto przykład, jak to może wyglądać. Pamiętaj, że w przypadku przeglądarek, które nie obsługują interfejsu Device Memory API, wartość wymiaru będzie wynosić „(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 ma wartość set w obiekcie trackera, wszystkie dane wysyłane do Google Analytics będą zawierać tę wartość. W ten sposób możesz podzielić dowolne dane (np. czas wczytywania strony, współczynnik realizacji celu itp.) według pamięci urządzenia i sprawdzić, czy występują jakieś korelacje.

Pamięć urządzenia to wymiar niestandardowy, a nie wymiar wbudowany, więc nie zobaczysz go w żadnym ze standardowych raportów. Aby uzyskać dostęp do tych danych, musisz utworzyć raport niestandardowy. Na przykład konfiguracja raportu niestandardowego, który porównuje czasy wczytywania według pamięci urządzenia, może wyglądać tak:

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

A wygenerowany raport może wyglądać tak:

Raport Pamięć urządzenia
Raport Pamięć urządzenia

Gdy już zbierzesz dane dotyczące pamięci urządzenia i ustalisz punkt odniesienia dla sposobu korzystania z aplikacji przez użytkowników we wszystkich zakresach pamięci, możesz eksperymentować z udostępnianiem różnych zasobów różnym użytkownikom (korzystając z metod opisanych w sekcji powyżej). Następnie możesz przejrzeć wyniki i zobaczyć, czy poprawiły się.

Podsumowanie

W tym poście pokazujemy, jak za pomocą interfejsu Device Memory API dostosowywać aplikację do możliwości urządzeń użytkowników, oraz jak mierzyć wrażenia użytkowników z korzystania z aplikacji.

Choć ten post dotyczy interfejsu Device Memory API, większość z opisanych tu technik można zastosować do dowolnego interfejsu API, który zgłasza możliwości urządzenia lub warunki sieciowe.

Ponieważ środowisko urządzeń stale się poszerza, tak ważne jest, aby przy podejmowaniu decyzji wpływających na wygodę użytkowników twórcy stron internetowych brali pod uwagę całe spektrum użytkowników.