Sådan registreres din brugers enhed, så du kan forbedre deres brugeroplevelse

For et par måneder siden så jeg en fantastisk samtale fra Chrome Dev Summit om ydeevne i langsomme enheder.

Det blæste mit sind alt det arbejde, Facebook har udført med at identificere enheder for at skabe en bedre brugeroplevelse. Spol frem til nu, og jeg har besluttet at studere lidt mere om emnet og se, hvad jeg kan gøre hos Thinkific (det firma, jeg arbejder for).

Brugeragenter

Brugeragenter er velkendte af udviklere. Vi bruger dem til at opdage bots, omdirigere brugere til en bestemt version af vores websted eller tilføje CSS-klasser på vores side, så vi kan skabe forskellige oplevelser.

Hos Thinkific bruger vi allerede browseren Ruby perle til at analysere brugeragenten og få relevant info (bot detektion for eksempel). Så jeg besluttede at opretholde de vigtigste oplysninger i en besøgende_enhedstabel - her er skemaet:

tenant_id: the course creator school the visitor is checkingraw: the raw uatype: desktop / mobile / tablet / bot / otherbrowser_namebrowser_versionplatform_nameplatform_versionhardware: hstore containing memory, processor, device_model, device_nameconnection: hstore containing downlink_max, connection_type

Du bemærkede sandsynligvis, at et par ting der ikke er tilgængelige i UA-strengen. Tid til nye JavaScript API'er:

Få hardwareinfo ved hjælp af JavaScript

Som beskrevet i Chrome Dev Summit-videoen kan vi bruge JS til at få denne info.

Hukommelse

navigator.deviceMemoryreturnerer et flydende nummer. Der er ting at overveje her:

  • Det fungerer kun via HTTPS
  • Support er ret begrænset (kun Chrome grundlæggende)

Mere om det:

  • Spec fra W3C
  • MDN Docs
  • Kan jeg bruge deviceMemory

Processorer

navigator.hardwareConcurrencyreturnerer antallet af logiske kerner i brugerens CPU. Støtte til dette er anstændigt.

Registrering af forbindelsesoplysninger ved hjælp af JavaScript

navigator.connectioner en ny API, der indeholder oplysninger om systemets forbindelse, f.eks. den aktuelle båndbredde på brugerens enhed, eller om forbindelsen måles. Support er ret begrænset (kun grundlæggende Chrome), men tingene er lovende.

Mere om det:

  • Chrome-eksempel
  • MDN Docs
  • Kan jeg bruge Network Information API

Registrering af enhedsmodellen

Brugeragenten returnerer muligvis nogle oplysninger om modelnavnet. userstack er en tjeneste, der giver dig information baseret på brugeragenten. Det fungerer godt, og det er let at integrere, men afhængigt af dine behov kan de ikke hjælpe.

Tag for eksempel iDevices. Deres brugeragent er stort set den samme, så du kan ikke skelne en iPad Pro fra en gammel iPad, der kører den sidste iOS. I disse tilfælde har du muligvis brug for en bedre detektion baseret på opløsning, pixeltæthed og anden hardwareinformation eksponeret i browseren. Jeg undersøgte dette hurtigt og fandt indtil videre 3 produkter: WURFL.io, DeviceAtlas og 51Degrees. Jeg har ikke haft tid til at prøve deres produkter endnu, men jeg ser frem til at gøre det (og skrive om det)

FAQ

Spørgsmål: Hvorfor ikke bruge Google Analytics / Mixpanel / Kibana / New Relic / dit værktøj her?

Vi kunne få browseroplysninger inde i andre værktøjer. Men som et SaaS-produkt bruger vi ikke vores egen Google Analytics-ejendom (kunder tilføjer deres egne). Adblockere kan også blokere disse tredjepartsværktøjer. Sidst men ikke mindst ved at have denne info i vores side kan vi tilpasse os bedre.

Spørgsmål: Har du en liste over low-end / high-end-enheder?

Nej. Måske kan dette bygges ved at kombinere antallet af processorer og hukommelse, men jeg investerede ikke meget tid på dette. I dette projekt oprettede min kollega en Rails-hjælper, der ville afgøre, om brugeren ville bruge lite eller standardversionen af ​​et websted baseret på hardware. Om dette emne er det vigtigt at nævne, at Facebook har et bibliotek til Android, der hedder Device Year Class.

Også sendt på min blog. Hvis du kan lide dette indhold, skal du følge mig på Twitter og GitHub.

Forresten - Thinkific ansætter flere stillinger, hvis du er interesseret.