Проект Fugu — это съедобно?

Фугу?

Веб-приложение
↓↑
Браузер
↓↑
ОС

Просто включите! 🌝

Приватность ⚠️

Распознавание лиц 😱

Геопозиция 🎯

Только Chromium? 🤨

Вы можете сделать
много пользователей
счастливее 🤩

Счастье 🤩
↓
Деньги 💰

🪄
Прогрессивное
улучшение

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);
    }
};

Можем ли мы
что-то сделать
в веб-приложении?

✅ Да

🚫 Нет

Можем ли мы
работать с Bluetooth
в веб-приложении?

✅ Да

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

Можем ли мы
менять macOS Touch Bar
из веб-приложения?

🚫 Нет

Можем ли мы
добавить беджик
к иконке приложения
из веб-приложения?

✅ Да

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.
});

Можем ли мы
верифицировать пользователя по SMS
в веб-приложении?

✅ Да

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);
});

Можем ли мы
распознавать
рукописные тексты
в веб-приложении?

✅ Да, но...

Только в ChromeOS 😶

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

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

Я верю в AI 🦾

Можем ли мы
проверять правописание
в веб-приложении?

🚫 Нет, но...

Можем ли мы
выключить устройство
из веб-приложения?

🚫 Нет, просто нет

Можем ли мы
не давать уснуть экрану
из веб-приложения?

✅ Да

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);

Можем ли мы
получать цвета
с экрана пользователя
в веб-приложении?

✅ Да

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.
}

Можем ли мы
получать информацию об освещении
из веб-приложения?

✅ Да, но...

За флагом 🚩

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();

Можем ли мы
контролировать яркость экрана
из веб-приложения?

🚫 Нет, но...

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

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

Можем ли мы
работать с Lock Screen
из веб-приложения?

🚫 Нет, но...

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

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

Можем ли мы
работать с Sony DualShock
из веб-приложения?

✅ Да

Можем ли мы
определить,
активен ли пользователь,
из веб-приложения?

✅ Да

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,
});

Можем ли мы
генерировать PDF
из веб-приложения?

🚫 Нет, но...

CSS Print Media 🖨

Можем ли мы
управлять множеством экранов
из веб-приложения?

✅ Да

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

Можем ли мы
определять степень использования CPU
из веб-приложения?

✅ Да, но...

За флагом 🚩

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