Slide 18
Slide 18 text
const network = navigator.connection.effectiveType;
console.log ("Effective connection type is " + network); // 3g
Network-aware Resource Loading
import { useNetworkStatus } from './network';
const { effectiveConnectionType } = useNetworkStatus();
...
switch(effectiveConnectionType) {
case '3g':
media = 
; break;
case '4g':
media = ;
break;
; break;
case '4g':
media = ;
break;
Slide 20
Slide 20 text
const saveData = navigator.connection.saveData;
if (saveData) { // Don’t load heavy resources }
Data-Saver aware Resource Loading
import { useSaveData } from './save-data';
const { saveData } = useSaveData();
...
return (
{ saveData ? 
: }
Slide 24
Slide 24 text
const memory = navigator.deviceMemory
console.log ("Device has at least " + memory + "GB of RAM.")
// Device has at least 4GB of RAM
Memory-aware Resource Loading
import { useMemoryStatus } from './memory';
const { deviceMemory } = useMemoryStatus();
...
return (
{ deviceMemory < 4 ? : }
Slide 32
Slide 32 text
const cores = window.navigator.hardwareConcurrency
console.log ("# logical processor cores are " + cores) // 4
CPU Core-aware Resource Loading
import { useHardwareConcurrency } from './hardware-concurrency';
const { numberOfLogicalProcessors } = useHardwareConcurrency();
return (
{ numberOfLogicalProcessors <= 4 ?
: }