Prije nekoliko mjeseci gledao sam sjajan razgovor sa summita Chrome Dev o performansama na sporim uređajima.
Zapanjilo me sve što je Facebook obavio na prepoznavanju uređaja kako bi stvorio bolje korisničko iskustvo. Premotavanje unaprijed do sada, i odlučio sam proučiti nešto više o toj temi i vidjeti što mogu učiniti u Thinkificu (tvrtki u kojoj radim).
Korisnički agenti
Korisnički agenti programeri su dobro poznati. Koristimo ih za otkrivanje botova, preusmjeravanje korisnika na određenu verziju naše web stranice ili dodavanje CSS klasa na našoj stranici kako bismo mogli stvoriti različita iskustva.
U Thinkificu već koristimo preglednik Ruby gem za raščlanjivanje korisničkog agenta i dobivanje relevantnih informacija (na primjer, otkrivanje botova). Dakle, odlučio sam zadržati glavne informacije u tablici visitor_device - ovdje je shema:
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 |
Vjerojatno ste primijetili da nekoliko stvari nije dostupno u UA nizu. Vrijeme je za nove JavaScript API-je:
Dobivanje podataka o hardveru pomoću JavaScript-a
Kao što je opisano u videozapisu Chrome Dev Summit, možemo koristiti JS da bismo dobili ove informacije.
Memorija
navigator.deviceMemoryvratit će broj s pomičnom zarezom. Ovdje treba razmotriti neke stvari:
- Radi samo putem HTTPS-a
- Podrška je prilično ograničena (Chrome u osnovi)
Više o tome:
- Specifikacije iz W3C
- MDN dokumenti
- Mogu li koristiti deviceMemory
Procesori
navigator.hardwareConcurrencyvratit će broj logičkih jezgri korisničkog CPU-a. Podrška za to je pristojna.
Otkrivanje podataka o vezi pomoću JavaScript-a
navigator.connectionnovi je API koji sadrži informacije o povezanosti sustava, kao što je trenutna propusnost korisnika uređaja ili je li veza izmjerena. Podrška je prilično ograničena (Chrome samo u osnovi), ali stvari obećavaju.
Više o tome:
- Primjer za Chrome
- MDN dokumenti
- Mogu li koristiti API za mrežne informacije
Otkrivanje modela uređaja
Korisnički agent može vratiti neke informacije o imenu modela. userstack je usluga koja vam daje informacije na temelju korisničkog agenta. Djeluje dobro i lako ga je integrirati, no ovisno o vašim potrebama, oni vam ne mogu pomoći.
Uzmimo za primjer iDevices. Njihov korisnički agent u osnovi je isti, tako da ne možete razlikovati iPad Pro od starog iPada koji pokreće zadnji iOS. U tim slučajevima možda će vam trebati bolja detekcija na temelju razlučivosti, gustoće piksela i ostalih podataka o hardveru izloženih u pregledniku. Napravio sam kratko istraživanje o tome i do sada sam pronašao 3 proizvoda: WURFL.io, DeviceAtlas i 51Degrees. Još nisam imao vremena isprobati njihove proizvode, ali radujem se što ću to učiniti (i objaviti o tome)
Pitanja
Pitanje: Zašto ovdje ne biste koristili Google Analytics / Mixpanel / Kibana / New Relic /?
Informacije o pregledniku mogli bismo dobiti unutar drugih alata. Ali kao SaaS proizvod ne koristimo vlastito svojstvo Google Analytics (kupci dodaju svoje). Također, blokatori oglasa mogu blokirati ove alate treće strane. I na kraju, ali ne najmanje važno, ako imamo ove informacije u svojoj blizini, možemo se bolje prilagoditi.
Pitanje: Imate li popis low-end / high-end uređaja?
Ne. Možda se ovo može izgraditi kombinirajući broj procesora i memorije, ali nisam uložio puno vremena u ovo. U ovom je projektu moj kolega stvorio pomagač Rails koji će odrediti hoće li korisnik koristiti osnovnu ili zadanu verziju web mjesta zasnovanog na hardveru. Na ovu temu, važno je spomenuti da Facebook ima knjižnicu za Android pod nazivom Device Year Class.
Također objavljeno na mom blogu. Ako vam se sviđa ovaj sadržaj, slijedite me na Twitteru i GitHubu.
Inače - Thinkific zapošljava na nekoliko pozicija ako ste zainteresirani.