Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
lib
public
src
.gitignore
README.md
package-lock.json
package.json
server.js

README.md

Demo: Device class aware resource loading in React.js

Live Demo

A demo showing how to use device class aware resource loading in React.js.

This project was bootstrapped with Create React App.

Installation

git clone https://github.com/GoogleChromeLabs/adaptive-loading
cd cra-device-class-aware-code-splitting

local development

npm install  
npm run dev

production build

npm install  
npm run build
npm run server

Approach

It is to UA(user agent) match and try to determine the characteristics of the device based on that. e.g if you detect I am on a "Pixel 2", a look-up of the device hardware from a service could let you know details about my CPU. We can find out device model name with the help of DeviceAtlas (basically by parsing UA) and pair that up with a static (e.g device.json) JSON merge of (Android and iOS) to do a "closet match" check against the "name" field in that JSON using string-similarity or get-closest because there might be a slight difference in the device model names between DeviceAtlas and Geekbench Browser.

Dependencies

This demo relies on the DeviceAtlas API for device detection and on the Geekbench Browser JSON data for device's CPU and Compute performance detection of Android and iOS.

You can’t perform that action at this time.