Hướng dẫn get device info javascript - lấy thông tin thiết bị javascript

Vài tháng trước, tôi đã xem một cuộc nói chuyện tuyệt vời từ hội nghị thượng đỉnh Chrome Dev về hiệu suất trong các thiết bị chậm.

Nó thổi vào tâm trí tôi tất cả các công việc được thực hiện bởi Facebook trong việc xác định các thiết bị để tạo trải nghiệm người dùng tốt hơn. Chuyển tiếp nhanh đến bây giờ, và tôi đã quyết định nghiên cứu thêm một chút về chủ đề này và xem những gì tôi có thể làm tại Thinkific [công ty tôi làm việc].

Đại lý người dùng

Đại lý người dùng nổi tiếng bởi các nhà phát triển. Chúng tôi sử dụng chúng để phát hiện bot, chuyển hướng người dùng đến một phiên bản cụ thể của trang web của chúng tôi hoặc nối các lớp CSS trên trang của chúng tôi để chúng tôi có thể tạo các trải nghiệm khác nhau.

Tại Thinkific, chúng tôi đã sử dụng & NBSP; Vì vậy, tôi đã quyết định duy trì thông tin chính trong bảng khách truy cập_device - đây là lược đồ:

tenant_id: the course creator school the visitor is checking

raw: the raw ua

type: desktop / mobile / tablet / bot / other

browser_name

browser_version

platform_name

platform_version

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

Bạn có thể nhận thấy rằng một vài điều không có sẵn trong chuỗi UA. Thời gian cho API JavaScript mới:

Nhận thông tin phần cứng bằng JavaScript

Như được đề cập trong video Chrome Dev Summit, chúng ta có thể sử dụng JS để có được thông tin này.

Kỉ niệm

________ 12 & nbsp; sẽ trả về một số điểm nổi. Có những điều cần xem xét ở đây:

• Nó chỉ hoạt động trên https
• Hỗ trợ khá hạn chế [về cơ bản chỉ có Chrome]

Thông tin thêm về nó:

• Thông số kỹ thuật từ W3C
• Tài liệu MDN
• Tôi có thể sử dụng API thông tin mạng không

Phát hiện mô hình thiết bị

Tác nhân người dùng & nbsp; May & nbsp; trả lại một số thông tin về tên mô hình. & Nbsp; userstack & nbsp; là một dịch vụ cung cấp cho bạn thông tin dựa trên tác nhân người dùng. Nó hoạt động tốt và rất dễ dàng để tích hợp, tuy nhiên, tùy thuộc vào nhu cầu của bạn, họ có thể giúp đỡ.

Phát hiện thông tin kết nối bằng JavaScript

________ 14 & nbsp; là một API mới chứa thông tin về kết nối hệ thống, chẳng hạn như băng thông hiện tại của thiết bị người dùng hay liệu kết nối có được đo không. Sự hỗ trợ khá hạn chế [về cơ bản chỉ là Chrome] nhưng mọi thứ rất hứa hẹn.

Thông tin thêm về nó:

• Ví dụ chrome
• Tài liệu MDN
• Tôi có thể sử dụng API thông tin mạng không

Phát hiện mô hình thiết bị

Tác nhân người dùng & nbsp; May & nbsp; trả lại một số thông tin về tên mô hình. & Nbsp; userstack & nbsp; là một dịch vụ cung cấp cho bạn thông tin dựa trên tác nhân người dùng. Nó hoạt động tốt và rất dễ dàng để tích hợp, tuy nhiên, tùy thuộc vào nhu cầu của bạn, họ có thể giúp đỡ.

Lấy ví dụ Idevices. Tác nhân người dùng của họ về cơ bản là giống nhau để bạn có thể phân biệt iPad Pro với iPad cũ chạy iOS cuối cùng. Đối với những trường hợp này, bạn có thể cần phát hiện tốt hơn dựa trên độ phân giải, mật độ pixel và thông tin phần cứng khác được hiển thị trong trình duyệt. Tôi đã thực hiện một số nghiên cứu nhanh về điều này và tìm thấy 3 sản phẩm cho đến nay: & nbsp; wurfl.io, & nbsp; deviceatlas & nbsp; và & nbsp; 51degrees. Tôi đã có thời gian để thử sản phẩm của họ, nhưng tôi rất mong được làm điều đó [và đăng về nó]

Câu hỏi thường gặp

Câu hỏi: Tại sao không sử dụng Google Analytics / MixPanel / Kibana / New Relic / Công cụ của bạn tại đây?

Chúng tôi có thể nhận được thông tin trình duyệt bên trong các công cụ khác. Nhưng với tư cách là một sản phẩm SaaS, chúng tôi không sử dụng tài sản Google Analytics của riêng mình [khách hàng thêm riêng của họ]. Ngoài ra, quảng cáo có thể chặn các công cụ của bên thứ ba này. Cuối cùng nhưng không kém phần quan trọng, bằng cách có thông tin này ở phía chúng tôi, chúng tôi có thể thích nghi tốt hơn.

Câu hỏi: Bạn có danh sách các thiết bị cấp cao/cao cấp không?

Không. Có thể điều này có thể được xây dựng kết hợp số lượng bộ xử lý và bộ nhớ nhưng tôi đã không đầu tư nhiều thời gian vào việc này. Trong dự án này, đồng nghiệp của tôi đã tạo ra một người trợ giúp Rails sẽ xác định xem người dùng có sử dụng Lite hay phiên bản mặc định của trang web dựa trên phần cứng hay không. Về chủ đề này, điều quan trọng là phải đề cập rằng Facebook có một thư viện cho Android có tên là Lớp Thiết bị.

Cũng được đăng trên blog của tôi. Nếu bạn thích nội dung này, hãy theo dõi tôi trên Twitter và GitHub.

Nhân tiện - suy nghĩ là tuyển dụng cho một số vị trí nếu bạn quan tâm.