Looking to find low powered devices to disable animations and stuff

browser.js

// https://github.com/bestiejs/platform.js
import platform from 'platform'

export const OS = (platform.os.family || '').toLowerCase()
export const ANDROID = OS === 'android'
export const IOS = OS === 'ios'

export const VERSION = parseFloat(platform.version)
export const MAJOR_VERSION = Math.floor(VERSION)

export function prefersReducedMotion () {
  // https://css-tricks.com/introduction-reduced-motion-media-query/
  const query = matchMedia('(prefers-reduced-motion: reduce)')
  return query.matches
}

export function isLowPerformanceDevice () {
  /*
    | Device              | Browser    | Memory (GB) | CPU (logical cores) | Performance |
    | MacBook Pro (2013)  | Firefox 61 |             |                   8 | great       |
    | MacBook Pro (2013)  | Chrome 68  |           8 |                   8 | great       |
    | MacBook Pro (2013)  | Safari 11  |             |                     | great       |
    | iPhone X (iOS 11.4) | Safari     |             |                     | good        |
    | Pixel 2 XL          | Chrome 68  |           4 |                   8 | good        |
    | Huawei P10          | Chrome 68  |             |                   8 | good        |
    | LG G6               | Chrome 67  |           4 |                   4 | good        |
    | Samsung S4          | Chrome 59  |             |                   4 | poor        |
    | Samsung S5          | Chrome 68  |             |                   4 | poor        |
    | Nexus 6             | Chrome 68  |           2 |                   4 | poor        |
    | Nexus 7             | Chrome 68  |           2 |                   4 | poor        |
  */

  const memory = navigator.deviceMemory
  const cpu = navigator.hardwareConcurrency

  const unknownPerformance = memory === undefined && cpu === undefined
  const goodPerformance = memory >= 4 || cpu > 4
  const lowPerformance = !unknownPerformance && !goodPerformance

  return (ANDROID && MAJOR_VERSION < 5) || lowPerformance
}

demo.js

var data = [
  { device: "MacBook Pro (2013)", browser: "Firefox 61", memory: undefined, cpu: 8, expected: 'good' },
  { device: "MacBook Pro (2013)", browser: "Chrome 68", memory: 8, cpu: 8, expected: 'good' },
  { device: "MacBook Pro (2013)", browser: "Safari 11", memory: undefined, cpu: undefined, expected: 'unknown' },
  { device: "iPhone X", browser: "Safari (iOS 11.4)", memory: undefined, cpu: undefined, expected: 'unknown' },
  { device: "Pixel 2 XL", browser: "Chrome 68", memory: 4, cpu: 8, expected: 'good' },
  { device: "Huawei P10", browser: "Chrome 68", memory: undefined, cpu: 8, expected: 'good' },
  { device: "LG G6", browser: "Chrome 67", memory: 4, cpu: 4, expected: 'good' },
  { device: "Samsung S4", browser: "Chrome 59", memory: undefined, cpu: 4, expected: 'low' },
  { device: "Samsung S5", browser: "Chrome 68", memory: undefined, cpu: 4, expected: 'low' },
  { device: "Nexus 6", browser: "Chrome 68", memory: 2, cpu: 4, expected: 'low' },
  { device: "Nexus 7", browser: "Chrome 68", memory: 2, cpu: 4, expected: 'low' },
]

console.table(data.map(item => {
  const { memory, cpu } = item
  const unknownPerformance = memory === undefined && cpu === undefined
  const goodPerformance = memory >= 4 || cpu > 4
  const lowPerformance = !unknownPerformance && !goodPerformance
  const result = (unknownPerformance && 'unknown')
    || (goodPerformance && 'good')
    || (lowPerformance && 'low')

  return { ...item, result, match: result === item.expected ? 'ok' : 'FAIL' }
}))

/*
  if above test yields `lowPerformance === true` *or* is an androind < 5 device,
  we'll prevent "nice-to-have" animations that are taxing GPU (or CPU, depending on device)
*/