Project Fugu. Is it edible?

Fugu?

Web App
↓↑
Browser
↓↑
OS

Just enable it! 🌝

Privacy ⚠️

Face detection 😱

Geofencing 🎯

Just Chromium? 🤨

You can make
a lot of users
happier 🤩

Happiness 🤩
↓
Money 💰

🪄
Progressive
enhancement

if ('contacts' in navigator) {
    import('./contacts.mjs');
}

const copy = async (blob) => {
    try {
        await navigator.clipboard.write([
            new ClipboardItem({
                [blob.type]: blob,
            }),
        ]);
    } catch (err) {
        console.error(err.name, err.message);
    }
};

Can we
do something
in web app?

✅ Yes

🚫 No

Can we
work with Bluetooth
in web app?

✅ Yes

navigator.bluetooth.requestDevice({
        filters: [{
            services: [
                0x1234,
                0x12345678,
                '99999999-0000-1000-8000-00805f9b34fb'
            ]
        }]
    })
    .then(device => { /* … */ })
    .catch(error => { console.error(error); });

Can we
change macOS Touch Bar
from web app?

🚫 No

Can we
add a badge
to an app icon
from web app?

✅ Yes

const unreadCount = 24;

// Set the badge
navigator.setAppBadge(unreadCount).catch((error) => {
    // Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
    // Do something with the error.
});

Can we
verify user via SMS
in web app?

✅ Yes

const ac = new AbortController();

navigator.credentials.get({
    otp: { transport: ['sms'] },
    signal: ac.signal
}).then(otp => {
    input.value = otp.code;
    if (form) form.submit();
}).catch(err => {
    console.log(err);
});

Can we
recognize
handwritten texts
in web app?

✅ Yes, but...

ChromeOS only 😶

const modelConstraint = {
    languages: ['en']
};

try {
    const recognizer = await navigator
        .createHandwritingRecognizer(modelConstraint);
    // Do something with recognizer
} catch (err) {
    // Ooops
}

I believe in AI 🦾

Can we
spellcheck with JS
in web app?

🚫 No, but...

Can we
turn off the device
from web app?

🚫 No, just no

Can we
disable locking the screen
from web app?

✅ Yes

const requestWakeLock = async () => {
    try {
        wakeLock = await navigator.wakeLock.request();
        wakeLock.addEventListener('release', () => {
            console.log('Screen Wake Lock released:', wakeLock.released);
        });
    } catch (err) {
        // Oops
    }
};

await requestWakeLock();
window.setTimeout(() => {
    wakeLock.release();
    wakeLock = null;
}, 5000);

Can we
pick colors
from the screen
in web app?

✅ Yes

const eyeDropper = new EyeDropper();

try {
    const result = await eyeDropper.open();
    // The user selected a pixel, here is its color:
    const colorHexValue = result.sRGBHex;
} catch (err) {
    // The user escaped the eyedropper mode.
}

Can we
get illuminance data
from web app?

✅ Yes, but...

Behind a flag 🚩

const sensor = new AmbientLightSensor();

sensor.addEventListener('reading', (event) => {
    console.log('Current light level:', sensor.illuminance);
});

sensor.addEventListener('error', (event) => {
    console.log(event.error.name, event.error.message);
});

sensor.start();

Can we
control screen brightness
from web app?

🚫 No, but...

const lock = await navigator.wakeLock.request({
    increaseBrightness: true
});

// Or
try {
    const sentinel = await screen.requestBrightnessIncrease();
    window.setTimeout(() => {
        await sentinel.release();
    }, 5000);
} catch (e) {
    // Oops
}

Can we
work with Lock Screen
from web app?

🚫 No, but...

// app.manifest
"lock_screen": {
    "start_url": "/some/url"
}

// app.js
const data = await window.getLockScreenData();
await data.setData("my-key", "my-content");

Can we
work with Sony DualShock
from web app?

✅ Yes

Can we
detect user's inactivity
from web app?

✅ Yes

const controller = new AbortController();
const signal = controller.signal;

const idleDetector = new IdleDetector();
idleDetector.addEventListener('change', () => {
    const userState = idleDetector.userState;
    const screenState = idleDetector.screenState;
    console.log(`Idle change: ${userState}, ${screenState}.`);
});

await idleDetector.start({
    threshold: 60000,
    signal,
});

Can we
generate PDF
from web app?

🚫 No, but...

CSS Print Media 🖨

Can we
control multiple screens
from web app?

✅ Yes

try {
    const screenDetails = await window.getScreenDetails();
    const primaryScreen = screenDetails
        .screens
        .filter((screen) => screen.isPrimary)[0];
    await document.body.requestFullscreen({
        screen: primaryScreen
    });
} catch (err) {
    // Oops
}

Can we
detect CPU utilization
from web app?

✅ Yes, but...

Behind a flag 🚩

function callback(update) {
    if (update.cpuSpeed > 0.5) {
        // The CPU is running at faster than base speed.
    } else {
        // The CPU is running at normal or reduced speed.
    }

    if (update.cpuUtilization >= 0.9) {
        // CPU utilization is over 90%.
    } else if (update.cpuUtilization >= 0.5) {
        // CPU utilization is over 50%.
    } else {
        // CPU utilization is under 50%.
    }
}

const observer = new ComputePressureObserver(callback, {
    cpuUtilizationThresholds: [0.5, 0.9],
    cpuSpeedThresholds: [0.5],
});

observer.observe();

// Later
observer.unobserve();

bit.ly/fugu-sync