Эта страница переведена с помощью Cloud Translation API.

Лаборатория веб-возможностей

1. Введение и настройка

Возможности веб-технологий

Мы хотим сократить разрыв в возможностях между веб-разработкой и нативными приложениями и упростить разработчикам создание превосходных веб-приложений. Мы твердо убеждены, что каждый разработчик должен иметь доступ к необходимым ему возможностям для создания отличного веб-интерфейса, и мы стремимся к созданию более функционального веб-пространства.

Однако некоторые возможности — такие как доступ к файловой системе и обнаружение простоя — доступны в нативных приложениях, но недоступны в веб-версиях. Отсутствие этих возможностей означает, что некоторые типы приложений не могут быть развернуты в веб-среде или являются менее полезными.

Мы будем проектировать и разрабатывать эти новые возможности открытым и прозрачным способом , используя существующие стандарты открытых веб-платформ, а также получая раннюю обратную связь от разработчиков и других поставщиков браузеров по мере итерации проектирования, чтобы обеспечить совместимость.

Что вы построите

В этом практическом занятии вы поэкспериментируете с рядом совершенно новых веб-API или API, доступных только с помощью флага. Таким образом, это занятие сосредоточено на самих API и на вариантах их использования, а не на создании конкретного конечного продукта.

Что вы узнаете

В этом практическом занятии вы познакомитесь с основными механизмами работы нескольких передовых API. Обратите внимание, что эти механизмы еще не окончательно утверждены, и мы будем очень благодарны за ваши отзывы о процессе разработки.

Что вам понадобится

Поскольку API, представленные в этом практическом занятии, являются самыми передовыми, требования к каждому API различаются. Пожалуйста, внимательно ознакомьтесь с информацией о совместимости в начале каждого раздела.

Как подойти к выполнению практического задания по программированию

Данный учебный курс не обязательно проходить последовательно. Каждый раздел представляет собой независимый API, поэтому вы можете выбрать то, что вас больше всего интересует.

2. API для создания бейджей

Примечание: Мы работаем над этим API в рамках нового проекта Capabilities . Данный практический пример основан на текущей версии, и API может измениться до стандартизации этой функции. Актуальную информацию см. в публикации об API для создания значков .

Совместимость : API для создания значков доступен через флаг #enable-experimental-web-platform-features , а также в рамках пробной версии Origin. В настоящее время он доступен только для Windows и macOS и работает только с установленными PWA.

Цель API для создания значков — привлечь внимание пользователей к событиям, происходящим в фоновом режиме. Для простоты демонстрации в этом практическом занятии давайте используем API, чтобы привлечь внимание пользователей к чему-то, что происходит на переднем плане. Затем вы сможете мысленно переключиться на события, происходящие в фоновом режиме.

Установите пневматический звуковой сигнал.

Для работы этого API вам потребуется PWA, установленное на главном экране, поэтому первым шагом будет установка PWA, например, известного во всем мире airhorner.com . Нажмите кнопку «Установить» в правом верхнем углу или воспользуйтесь меню с тремя точками для ручной установки.

Появится запрос на подтверждение, нажмите «Установить» .

Теперь в доке вашей операционной системы появился новый значок. Щелкните по нему, чтобы запустить PWA. Оно будет работать в собственном окне и в автономном режиме.

Установка значка

Теперь, когда у вас установлено PWA, вам понадобятся числовые данные (значки могут содержать только числа) для отображения на нём. В Air Horner легко подсчитать , сколько раз был подан звуковой сигнал. На самом деле, с помощью установленного приложения Airhorner попробуйте подать звуковой сигнал и проверьте значок. Он засчитывает единицу каждый раз, когда вы подаёте сигнал.

Итак, как это работает? По сути, код выглядит так:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

Подайте звуковой сигнал пару раз и проверьте значок PWA: он будет обновляться каждый раз, когда прозвучит звуковой сигнал. Всё очень просто.

Снятие удостоверения

Счетчик доходит до 99, а затем начинается заново. Вы также можете сбросить его вручную. Откройте вкладку «Консоль инструментов разработчика», вставьте строку ниже и нажмите Enter.

navigator.setExperimentalAppBadge(0);

В качестве альтернативы вы также можете удалить значок, явно очистив его, как показано в следующем фрагменте кода. Теперь иконка вашего PWA должна снова выглядеть так же, как и в начале, — чистой и без значка.

navigator.clearExperimentalAppBadge();

Обратная связь

Что вы думаете об этом API? Пожалуйста, помогите нам, кратко ответив на этот опрос:

Был ли этот API интуитивно понятен в использовании?

Да

Нет

Вам удалось запустить пример?

Да

Нет

Хотите что-то добавить? Чего не хватает? Пожалуйста, оставьте краткий отзыв в этом опросе . Спасибо!

3. Собственный API файловой системы

API нативной файловой системы позволяет разработчикам создавать мощные веб-приложения, взаимодействующие с файлами на локальном устройстве пользователя. После предоставления веб-приложению доступа этот API позволяет веб-приложениям читать или сохранять изменения непосредственно в файлах и папках на устройстве пользователя.

Чтение файла

Функция «Hello, world» в API Native File System предназначена для чтения локального файла и получения его содержимого. Создайте простой текстовый файл .txt и введите в него текст. Затем перейдите на любой защищенный сайт (то есть сайт, работающий по протоколу HTTPS ), например example.com , и откройте консоль DevTools. Вставьте приведенный ниже фрагмент кода в консоль. Поскольку API Native File System требует действия пользователя, мы добавляем обработчик двойного щелчка к документу. Дескриптор файла понадобится нам позже, поэтому мы просто сделаем его глобальной переменной.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

При двойном щелчке в любом месте страницы example.com появится окно выбора файла.

Выберите созданный вами ранее .txt файл. Содержимое этого файла заменит фактическое содержимое body example.com .

Сохранение файла

Далее мы хотим внести некоторые изменения. Поэтому давайте сделаем body редактируемым, вставив приведенный ниже фрагмент кода. Теперь вы можете редактировать текст так же, как если бы браузер был текстовым редактором.

document.body.contentEditable = true;

Теперь нам нужно записать эти изменения обратно в исходный файл. Для этого нам нужен объект для записи в дескриптор файла, который мы можем получить, вставив приведенный ниже фрагмент кода в консоль. Снова нам нужен пользовательский жест, поэтому на этот раз мы ждем щелчка по основному документу.

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

Теперь при щелчке (не двойном щелчке) по документу появится запрос на предоставление разрешения. После предоставления разрешения содержимое файла будет соответствовать тому, что вы отредактировали в body документа ранее. Проверьте изменения, открыв файл в другом редакторе (или начните процесс заново, снова дважды щелкнув по документу и открыв файл).

Поздравляем! Вы только что создали самый маленький текстовый редактор в мире [citation needed] .

Обратная связь

Что вы думаете об этом API? Пожалуйста, помогите нам, кратко ответив на этот опрос:

Был ли этот API интуитивно понятен в использовании?

Да

Нет

Вам удалось запустить пример?

Да

Нет

Хотите что-то добавить? Чего не хватает? Пожалуйста, оставьте краткий отзыв в этом опросе . Спасибо!

4. API для определения формы

Совместимость : API распознавания форм доступен через флаг #enable-experimental-web-platform-features . Поддержка этого API зависит от функций аппаратного ускорения, которые различаются в зависимости от операционной системы:

FaceDetector : Android, macOS, Windows
BarcodeDetector : Android, macOS
TextDetector : Android, macOS (только ограничивающие рамки), Windows

API обнаружения форм предоставляет доступ к ускоренным детекторам форм (например, для человеческих лиц) и работает как со статическими изображениями, так и с потоками изображений в реальном времени. Операционные системы имеют высокопроизводительные и высокооптимизированные детекторы признаков, такие как Android FaceDetector . API обнаружения форм открывает доступ к этим нативным реализациям и предоставляет к ним доступ через набор интерфейсов JavaScript.

В настоящее время поддерживаются следующие функции: распознавание лиц через интерфейс FaceDetector , распознавание штрих-кодов через интерфейс BarcodeDetector и распознавание текста (оптическое распознавание символов) через интерфейс TextDetector .

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

Увлекательная функция API распознавания форм — это распознавание лиц. Для её тестирования нам нужна страница с лицами. Эта страница с лицом автора — хорошее начало. Она будет выглядеть примерно так, как на скриншоте ниже. В поддерживаемом браузере будут распознаны ограничивающая рамка лица и его ориентиры.

Вы можете убедиться, как мало кода потребовалось для реализации этого, изменив или отредактировав проект Glitch , особенно файл script.js .

Если вы хотите работать с полностью динамическими данными, а не только с лицом автора, перейдите на эту страницу результатов поиска Google, полную лиц, в приватной вкладке или в гостевом режиме. Теперь на этой странице откройте инструменты разработчика Chrome, щелкнув правой кнопкой мыши в любом месте и выбрав «Просмотреть код элемента» . Затем на вкладке «Консоль» вставьте приведенный ниже фрагмент кода. Код выделит обнаруженные лица полупрозрачной красной рамкой.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Вы заметите, что появляются сообщения об ошибке DOMException , и не все изображения обрабатываются. Это связано с тем, что изображения, видимые без прокрутки , встроены в виде data URI и, следовательно, доступны, тогда как изображения, видимые без прокрутки, поступают с другого домена, который не настроен на поддержку CORS. В рамках демонстрации нам не нужно об этом беспокоиться.

Обнаружение ключевых точек лица

Помимо распознавания самих лиц, macOS также поддерживает распознавание лицевых ориентиров. Чтобы проверить распознавание лицевых ориентиров, вставьте следующий фрагмент кода в консоль. Напоминание: расположение ориентиров не идеально из-за ошибки crbug.com/914348 , но вы можете увидеть, в каком направлении развивается эта функция и насколько она может быть полезной.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

Обнаружение штрих-кода

Вторая функция API распознавания форм — распознавание штрихкодов. Как и раньше, нам нужна страница со штрихкодами, например, вот эта . Открыв её в браузере, вы увидите расшифрованные QR-коды. Попробуйте изменить или отредактировать проект Glitch , особенно файл script.js, чтобы увидеть, как это делается.

Если вам нужно что-то более динамичное, мы снова можем использовать поиск изображений Google. На этот раз в браузере перейдите на эту страницу результатов поиска Google в приватной вкладке или в гостевом режиме. Теперь вставьте приведенный ниже фрагмент кода во вкладку «Консоль инструментов разработчика» Chrome. Через некоторое время распознанные штрихкоды будут снабжены аннотациями, указывающими исходное значение и тип штрихкода.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Обнаружение текста

Последняя функция API распознавания форм — это распознавание текста. К этому моменту вы уже знаете, как это работает: нам нужна страница с изображениями, содержащими текст, например, эта страница с результатами сканирования Google Books. В поддерживаемых браузерах вы увидите распознанный текст и ограничивающую рамку, обведенную вокруг фрагментов текста. Переделайте или отредактируйте проект Glitch , особенно файл script.js, чтобы увидеть, как это делается.

Для динамического тестирования перейдите на эту страницу результатов поиска в приватном режиме или в режиме гостя. Теперь вставьте приведенный ниже фрагмент кода во вкладку «Консоль инструментов разработчика Chrome». После небольшого ожидания часть текста будет распознана.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

Обратная связь

Что вы думаете об этом API? Пожалуйста, помогите нам, кратко ответив на этот опрос:

Был ли этот API интуитивно понятен в использовании?

Да

Нет

Вам удалось запустить пример?

Да

Нет

Хотите что-то добавить? Чего не хватает? Пожалуйста, оставьте краткий отзыв в этом опросе . Спасибо!

5. API для обмена веб-контентом

API Web Share Target позволяет установленным веб-приложениям регистрироваться в базовой операционной системе в качестве целевого объекта для получения общего контента либо через API Web Share, либо через системные события, такие как кнопка общего доступа на уровне операционной системы.

В качестве первого шага вам понадобится PWA-приложение, которым вы сможете поделиться. На этот раз Airhorner (к счастью) не подойдёт, но демонстрационное приложение Web Share Target вам поможет. Установите приложение на главный экран вашего устройства.

Далее вам понадобится что-то, чем вы хотите поделиться, например, фотография из Google Фото. Воспользуйтесь кнопкой «Поделиться» и выберите Scrapbook PWA в качестве объекта для публикации.

При нажатии на значок приложения вы сразу попадете в PWA-приложение Scrapbook, и фотография окажется прямо там.

Итак, как это работает? Чтобы узнать, изучите манифест веб-приложения Scrapbook PWA. Конфигурация для работы API Web Share Target находится в свойстве "share_target" манифеста, поле "action" которого указывает на URL-адрес, дополненный параметрами, перечисленными в "params" .

Затем сторона, предоставляющая доступ, соответствующим образом заполняет этот шаблон URL (либо посредством действия по предоставлению доступа, либо программно управляемым разработчиком с помощью Web Share API ), чтобы принимающая сторона могла извлечь параметры и выполнить с ними какие-либо действия, например, отобразить их.

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

Обратная связь

Что вы думаете об этом API? Пожалуйста, помогите нам, кратко ответив на этот опрос:

Был ли этот API интуитивно понятен в использовании?

Да

Нет

Вам удалось запустить пример?

Да

Нет

Хотите что-то добавить? Чего не хватает? Пожалуйста, оставьте краткий отзыв в этом опросе . Спасибо!

6. API блокировки пробуждения

Чтобы избежать разрядки батареи, большинство устройств быстро переходят в спящий режим, когда остаются бездействующими. Хотя в большинстве случаев это нормально, некоторым приложениям необходимо поддерживать экран или устройство в активном состоянии для выполнения своей работы. API Wake Lock предоставляет способ предотвратить затемнение и блокировку экрана устройства или предотвратить переход устройства в спящий режим. Эта возможность открывает новые возможности, которые до сих пор требовали создания нативных приложений.

Установите заставку.

Чтобы протестировать API Wake Lock, сначала необходимо убедиться, что ваше устройство переходит в спящий режим. Для этого в настройках операционной системы активируйте заставку по своему выбору и убедитесь, что она запускается через 1 минуту. Убедитесь, что всё работает, оставив устройство в покое ровно на это время (да, я знаю, это неприятно). На скриншотах ниже показана macOS, но вы, конечно, можете попробовать это на своём мобильном устройстве Android или любой поддерживаемой настольной платформе.

Установить блокировку включения экрана

Теперь, когда вы знаете, что ваша заставка работает, вы можете использовать блокировку пробуждения типа "screen" , чтобы предотвратить выполнение заставки. Перейдите в демонстрационное приложение Wake Lock и нажмите « Активировать».

Флажок «Блокировка screen .

С этого момента активируется блокировка пробуждения. Если вы проявите терпение и оставите устройство без присмотра на минуту, вы увидите, что заставка действительно не запустилась.

Итак, как это работает? Чтобы узнать, перейдите на страницу проекта Glitch , где находится демонстрационное приложение Wake Lock, и посмотрите файл script.js . Суть кода приведена в фрагменте ниже. Откройте новую вкладку (или любую другую открытую вкладку) и вставьте приведенный ниже код в консоль инструментов разработчика Chrome. После щелчка по окну вы должны увидеть блокировку экрана, которая будет активна ровно 10 секунд (см. логи консоли), и ваша заставка не должна запускаться.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

Обратная связь

Что вы думаете об этом API? Пожалуйста, помогите нам, кратко ответив на этот опрос:

Был ли этот API интуитивно понятен в использовании?

Да

Нет

Вам удалось запустить пример?

Да

Нет

Хотите что-то добавить? Чего не хватает? Пожалуйста, оставьте краткий отзыв в этом опросе . Спасибо!

7. API для выбора контактов

Один из API, который нас очень радует, — это API выбора контактов. Он позволяет веб-приложению получать доступ к контактам из встроенного менеджера контактов устройства, так что ваше веб-приложение получает доступ к именам, адресам электронной почты и номерам телефонов ваших контактов. Вы можете указать, хотите ли вы получить доступ только к одному или нескольким контактам, а также ко всем полям или только к подмножеству имен, адресов электронной почты и номеров телефонов.

Вопросы конфиденциальности

После открытия окна выбора контактов вы можете выбрать те, которыми хотите поделиться. Обратите внимание, что опции «выбрать все» нет, и это сделано намеренно: мы хотим, чтобы предоставление доступа было осознанным решением. Аналогично, доступ предоставляется не постоянно, а однократно.

Доступ к контактам

Доступ к контактам — простая задача. Перед открытием окна выбора контактов вы можете указать, какие поля вам нужны (доступны поля name , email и telephone ), а также хотите ли вы получить доступ к нескольким контактам или только к одному. Вы можете протестировать этот API на устройстве Android, открыв демонстрационное приложение . Соответствующий фрагмент исходного кода — это, по сути, приведенный ниже пример:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

8. Асинхронный API буфера обмена

Копирование и вставка текста

До сих пор не существовало способа программного копирования и вставки изображений в буфер обмена системы. Недавно мы добавили поддержку изображений в API асинхронного буфера обмена.

Теперь вы можете копировать и вставлять изображения. Новинкой является возможность записи изображений в буфер обмена. Асинхронный API буфера обмена уже некоторое время поддерживает копирование и вставку текста. Вы можете скопировать текст в буфер обмена, вызвав метод navigator.clipboard.writeText(), а затем вставить этот текст, вызвав метод navigator.clipboard.readText().

Копирование и вставка изображений

Теперь вы также можете записывать изображения в буфер обмена. Для этого вам нужны данные изображения в виде двоичных данных (blob), которые затем нужно передать в конструктор элемента буфера обмена. Наконец, вы можете скопировать этот элемент буфера обмена, вызвав метод navigator.clipboard.write().

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

Вставка изображения обратно из буфера обмена выглядит довольно сложной, но на самом деле сводится к извлечению объекта из буфера обмена. Поскольку объектов может быть несколько, необходимо пройтись по ним циклом, пока не будет найден нужный. Из соображений безопасности в настоящее время эта функция ограничена изображениями в формате PNG, но в будущем может быть добавлена поддержка других форматов изображений.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

Вы можете увидеть этот API в действии в демонстрационном приложении ; соответствующие фрагменты его исходного кода приведены выше. Копирование изображений в буфер обмена можно выполнить без разрешения, но для вставки из буфера обмена необходимо предоставить соответствующий доступ.

После предоставления доступа вы сможете прочитать изображение из буфера обмена и вставить его в приложение:

9. У вас получилось!

Поздравляем, вы дошли до конца этого практического задания. Ещё раз напоминаем, что большинство API всё ещё находятся в стадии разработки и активно совершенствуются. Поэтому команда очень ценит ваши отзывы , ведь только взаимодействие с такими людьми, как вы, поможет нам довести эти API до совершенства.

Мы также рекомендуем вам регулярно заглядывать на нашу страницу «Возможности» . Мы будем постоянно обновлять её, и там вы найдете ссылки на все подробные статьи об API, над которыми мы работаем. Продолжайте в том же духе!

Том и вся команда Capabilities 🐡

Лаборатория веб-возможностей

1. Введение и настройка

Возможности веб-технологий

Что вы построите

Что вы узнаете

Что вам понадобится

Как подойти к выполнению практического задания по программированию

2. API для создания бейджей

Установите пневматический звуковой сигнал.

Установка значка

Снятие удостоверения

Был ли этот API интуитивно понятен в использовании?

Вам удалось запустить пример?

3. Собственный API файловой системы

Чтение файла

Сохранение файла

Был ли этот API интуитивно понятен в использовании?

Вам удалось запустить пример?

4. API для определения формы

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

Обнаружение ключевых точек лица

Обнаружение штрих-кода

Обнаружение текста

Был ли этот API интуитивно понятен в использовании?

Вам удалось запустить пример?

5. API для обмена веб-контентом

Установите PWA, чтобы поделиться им с другими.

Поделитесь чем-нибудь с PWA

Был ли этот API интуитивно понятен в использовании?

Вам удалось запустить пример?

6. API блокировки пробуждения

Установите заставку.

Установить блокировку включения экрана

Был ли этот API интуитивно понятен в использовании?

Вам удалось запустить пример?

7. API для выбора контактов

Вопросы конфиденциальности

Доступ к контактам

8. Асинхронный API буфера обмена

Копирование и вставка текста

Копирование и вставка изображений

9. У вас получилось!