웹 기능
Google은 웹과 네이티브 간의 기능 격차를 줄이고 개발자가 개방형 웹에서 우수한 환경을 쉽게 빌드할 수 있도록 노력하고 있습니다. Google은 모든 개발자가 우수한 웹 환경을 만드는 데 필요한 기능에 액세스할 수 있어야 한다고 믿으며, 보다 강력한 웹을 제공하는 데 최선을 다하고 있습니다.
그러나 파일 시스템 액세스 및 유휴 감지와 같은 일부 기능은 웹에서 사용할 수 있지만 기본적으로는 사용할 수 없습니다. 이렇게 누락된 기능은 일부 앱 유형이 웹에 제공되지 않거나 관련성이 떨어짐을 의미합니다.
Google은 상호 운용성을 보장할 수 있도록 기존의 개방형 웹 플랫폼 표준 프로세스를 사용하는 동시에 개방적이고 투명한 방식으로 이러한 새 기능을 설계하고 개발하며, 이를 통해 개발자와 다른 브라우저 공급업체의 의견을 조기에 수렴합니다.
빌드할 항목
이 Codelab에서는 새롭게 개발되었거나 플래그 뒤에만 제공되는 여러 웹 API를 사용해 봅니다. 따라서 이 Codelab에서는 특정 최종 제품을 빌드하는 대신 API 자체와 이러한 API가 잠금 해제하는 사용 사례에 중점을 둡니다.
학습할 내용
이 Codelab에서는 여러 최신 API의 기본 메커니즘을 알아봅니다. 이러한 메커니즘은 아직 확정되지 않았으므로 개발자 플로우에 관한 의견을 보내주시면 대단히 감사하겠습니다.
필요한 항목
이 Codelab에 소개된 API는 최첨단 첨단 기술이므로 각 API에 대한 요구사항은 다릅니다. 각 섹션의 시작 부분에서 호환성 정보를 주의 깊게 읽어보시기 바랍니다.
Codelab에 접근하는 방법
Codelab이 순차적으로 작동하는 것은 아닙니다. 각 섹션은 독립적인 API를 나타내므로 가장 관심 있는 분야를 자유롭게 선택해 주세요.
Badging API의 목표는 사용자에게 백그라운드에서 정보를 제공하는 것입니다. 이 Codelab의 샘플에서는 편의를 위해 API를 사용하여 포그라운드에서 발생하는 상황에 대한 사용자의 관심을 유도할 수 있습니다. 그런 다음, 백그라운드에서 일어나는 일에 대한 정신적인 지혜를 얻을 수 있습니다.
Airairer 설치
이 API가 작동하려면 홈 화면에 설치된 PWA가 필요하므로 첫 번째 단계는 세계적으로 유명한 악명 높은 airheroer.com과 같은 PWA를 설치하는 것입니다. 오른쪽 상단의 설치 버튼을 누르거나 점 3개로 된 메뉴를 사용하여 직접 설치합니다.
확인 메시지가 표시되면 Install을 클릭합니다.
운영체제의 도크에 새로운 아이콘이 추가되었습니다. 이 아이콘을 클릭하여 PWA를 실행합니다. 자체 앱 창이 있으며 독립형 모드로 실행됩니다.
|
|
배지 설정
PWA가 설치되었으므로 배지에 표시할 숫자 데이터 (배지는 숫자만 포함할 수 있음)가 필요합니다. 에어 호너에 집계되는 간단한 방법은 숨을 들이쉬고 숨쉬는 횟수입니다. 실제로 Airairer 앱이 설치된 상태에서 경적을 울리고 배지를 확인해 보세요. 경적을 울릴 때마다 한 번으로 계산됩니다.
작동 원리는 무엇인가요? 기본적으로 코드는 다음과 같습니다.
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});에어혼을 몇 번 누르고 PWA 아이콘을 확인합니다. 한 번씩 업데이트됩니다. 에어혼 소리가 재생됩니다. 매우 간단하죠.
배지 지우기
카운터는 99까지 올라갔다가 다시 시작됩니다. 수동으로 재설정해도 됩니다. DevTools Console 탭을 열고 아래 줄을 붙여넣은 다음 Enter 키를 누릅니다.
navigator.setExperimentalAppBadge(0);또는 다음 스니펫과 같이 배지를 명시적으로 삭제하여 삭제할 수도 있습니다. 이제 PWA 아이콘이 배지 배지 없이 첫 시작부터 또렷하게 표시됩니다.
navigator.clearExperimentalAppBadge();
의견
이 API에 대해 어떻게 생각하시나요? 설문조사에 참여해 주세요.
이 API가 직관적이었나요?
실행할 예시가 있으신가요?
의견이 더 있으신가요? 누락된 기능이 있었나요? 이 설문조사에서 간단한 의견을 보내주세요. 감사합니다
네이티브 파일 시스템 API를 사용하면 개발자는 사용자의 로컬 기기에 있는 파일과 상호작용하는 강력한 웹 앱을 빌드할 수 있습니다. 사용자가 웹 앱에 액세스 권한을 부여하면 이 API는 웹 앱에서 사용자 기기의 파일 및 폴더에 변경사항을 직접 읽거나 저장할 수 있습니다.
파일 읽기
Native File System API의 "Hello, world"는 로컬 파일을 읽고 파일 콘텐츠를 가져오는 것입니다. 일반 .txt 파일을 만들고 텍스트를 입력합니다. 그런 다음 example.com과 같이 보안 사이트 (HTTPS를 통해 제공되는 사이트)로 이동하여 DevTools 콘솔을 엽니다. Console에 아래 코드 스니펫을 붙여넣습니다. Native File System API에는 사용자 동작이 필요하므로 문서에 더블클릭 핸들러를 연결합니다. 나중에 파일 핸들이 필요하므로 전역 변수로 만듭니다.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
그러면 example.com 페이지 아무 곳이나 더블클릭하면 파일 선택 도구가 표시됩니다.
이전에 만든 .txt 파일을 선택합니다. 그러면 파일 콘텐츠가 example.com의 실제 body 콘텐츠를 대체합니다.
파일 저장
다음으로 몇 가지를 변경해야 합니다. 따라서 아래의 코드 스니펫에 붙여넣어 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가 직관적이었나요?
실행할 예시가 있으신가요?
의견이 더 있으신가요? 누락된 기능이 있었나요? 이 설문조사에서 간단한 의견을 보내주세요. 감사합니다
Shape Detection API는 가속 도형 감지기 (예: 사람의 얼굴)에 액세스하며 정지 이미지 또는 실시간 이미지 피드에서 작동합니다. 운영체제에는 Android FaceDetector와 같이 성능이 뛰어나고 매우 최적화된 기능 감지기가 있습니다. Shape Detection API는 이러한 기본 구현을 열고 자바스크립트 인터페이스 세트를 통해 노출합니다.
현재 지원되는 기능은 FaceDetector 인터페이스를 통한 얼굴 인식, BarcodeDetector 인터페이스를 통한 바코드 감지, TextDetector 인터페이스를 통한 텍스트 감지 (광학 문자 인식)입니다.
얼굴 인식
Shape Detection API의 흥미로운 기능은 얼굴 인식입니다. 테스트하려면 얼굴이 포함된 페이지가 필요합니다. 이 페이지에서 작성자를 찾는 것부터 시작하는 것이 좋습니다. 아래 스크린샷과 같이 표시됩니다. 지원되는 브라우저에서는 얼굴과 얼굴 랜드마크의 경계 상자가 인식됩니다.
Glitch 프로젝트, 특히 script.js 파일을 리믹스하거나 수정하여 이 작업을 실행하는 데 필요한 코드가 거의 얼마인지 확인할 수 있습니다.
작성자의 얼굴만으로 움직이지 않고 동적으로 움직이려면 비공개 탭 또는 게스트 모드에서 얼굴의 전체 Google 검색결과 페이지로 이동하세요. 이제 페이지에서 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음 검사를 클릭하여 Chrome 개발자 도구를 엽니다. 그런 다음 Console 탭에서 아래 스니펫을 붙여넣습니다. 코드에서는 감지된 얼굴을 반투명한 빨간색 상자로 강조표시합니다.
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 메시지가 표시되며 일부 이미지는 처리되지 않습니다. 스크롤 없이 볼 수 있는 부분 이미지는 데이터 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);
}
});바코드 감지
Shape Detection API의 두 번째 기능은 바코드 감지입니다. 이전과 마찬가지로 이 페이지와 같이 바코드가 있는 페이지가 필요합니다. 브라우저에서 열면 다양한 QR 코드가 해독되어 표시됩니다. Glitch 프로젝트, 특히 script.js 파일을 리믹스하거나 수정하여 작동 방식을 확인하세요.
더 동적인 이미지가 필요한 경우 Google 이미지 검색을 다시 사용할 수 있습니다. 이번에는 브라우저의 비공개 탭 또는 게스트 모드에서 Google 검색결과 페이지로 이동합니다. 이제 Chrome DevTools Console 탭에 아래 스니펫을 붙여넣습니다. 잠시 후 인식된 바코드는 원시 값 및 바코드 유형으로 주석이 달립니다.
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);
}
});텍스트 인식
Shape Detection API의 마지막 기능은 텍스트 감지입니다. 이제까지 알아봤습니다. 이제 Google 도서 스캔 결과가 포함된 이 페이지와 같이 텍스트가 포함된 이미지가 있는 페이지가 필요합니다. 지원되는 브라우저에서는 인식된 텍스트와 텍스트 문구 주위에 경계 상자가 표시됩니다. Glitch 프로젝트, 특히 script.js 파일을 리믹스하거나 수정하여 작동 방식을 확인하세요.
동적으로 테스트하려면 비공개 탭 또는 게스트 모드에서 검색결과 페이지로 이동하세요. 이제 Chrome DevTools Console 탭에 아래 스니펫을 붙여넣습니다. 조금만 기다리면 일부 텍스트가 인식됩니다.
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가 직관적이었나요?
실행할 예시가 있으신가요?
의견이 더 있으신가요? 누락된 기능이 있었나요? 이 설문조사에서 간단한 의견을 보내주세요. 감사합니다
Web Share Target API를 사용하면 설치된 웹 앱이 공유 운영체제로 기본 운영체제에 등록하여 Web Share API 또는 시스템 이벤트(예: 운영체제 수준의 공유 버튼)에서 공유 콘텐츠를 수신할 수 있습니다.
공유할 PWA 설치하기
첫 번째 단계로 공유할 수 있는 PWA가 필요합니다. 이번에는 AirHoer (다행히도)에 승리하지 못했지만 웹 공유 타겟 데모 앱이 있습니다. 기기의 홈 화면에 앱을 설치합니다.
PWA에 항목 공유
다음으로 Google 포토의 사진과 같이 공유할 항목이 필요합니다. 공유 버튼을 사용하여 스크랩북 PWA를 공유 대상으로 선택합니다.
그런 다음 앱 아이콘을 탭하면 스크랩북 PWA로 바로 이동하고 해당 사진을 볼 수 있습니다.
작동 원리는 무엇인가요? 자세히 알아보려면 스크랩북 PWA 및 웹 앱 매니페스트를 살펴보세요. Web Share Target API가 작동하도록 하는 구성은 "action" 필드의 "params"의 목록에 있는 매개변수로 장식된 URL을 가리키는 매니페스트의 "share_target" 속성에 있습니다.
공유 측은 그에 따라 이 URL 템플릿을 채우며 (공유 작업을 용이하게 하거나 Web Share API를 사용하여 개발자가 프로그래밍 방식으로 수신함). 그러면 수신 측이 매개변수를 추출하고 표시와 같은 작업을 수행할 수 있습니다.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}의견
이 API에 대해 어떻게 생각하시나요? 설문조사에 참여해 주세요.
이 API가 직관적이었나요?
실행할 예시가 있으신가요?
의견이 더 있으신가요? 누락된 기능이 있었나요? 이 설문조사에서 간단한 의견을 보내주세요. 감사합니다
배터리가 소진되지 않도록 대부분의 기기는 유휴 상태로 있으면 빠르게 절전 모드로 전환됩니다. 대부분의 경우 문제가 없지만 일부 애플리케이션의 경우 작업을 완료하려면 화면이나 기기를 켜진 상태로 유지해야 합니다. Wake Lock API는 기기가 화면을 어둡게 하거나 잠그지 못하도록 하거나 기기가 절전 모드로 전환되는 것을 방지하는 방법을 제공합니다. 이 기능을 통해 지금까지 네이티브 앱이 필요한 새로운 환경을 구현할 수 있었습니다.
화면 보호기 설정
Wake Lock API를 테스트하려면 먼저 기기가 절전 모드로 전환되는지 확인해야 합니다. 따라서 운영체제의 환경설정 창에서 원하는 화면 보호기를 활성화하고 1분 후에 시작되도록 합니다. 이 시간 동안 기기를 그대로 두면 문제가 해결되도록 합니다. 아래 스크린샷에 macOS가 표시되어 있지만, 휴대기기 Android 기기 또는 지원되는 모든 데스크톱 플랫폼에서 사용해 볼 수 있습니다.
화면 wake lock 설정
이제 화면 보호기가 작동하는 것을 알았으니 화면 보호기가 작업을 실행하지 못하도록 "screen" 유형의 wake lock을 사용합니다. Wake Lock 데모 앱으로 이동하여 활성화 screen Wake Lock 체크박스를 클릭합니다.
이때부터 wake lock이 활성화됩니다. 잠시 동안 기기를 만지지 않을 때까지 인내심을 갖고 기다리면 실제로 화면 보호기가 시작되지 않았음을 알 수 있습니다.
작동 원리는 무엇인가요? 자세히 알아보려면 Wake Lock 데모 앱의 Glitch 프로젝트로 이동하여 script.js를 확인하세요. 코드의 핵심은 아래의 스니펫에 있습니다. 새 탭을 열거나 열려 있는 탭을 사용하여 아래 코드를 Chrome 개발자 도구 콘솔에 붙여넣습니다. 창을 클릭하면 정확히 10초 동안 활성 상태로 유지되는 wake lock (콘솔 로그 참조)이 표시되고 화면 보호기가 시작되지 않아야 합니다.
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가 직관적이었나요?
실행할 예시가 있으신가요?
의견이 더 있으신가요? 누락된 기능이 있었나요? 이 설문조사에서 간단한 의견을 보내주세요. 감사합니다
매우 기대되는 API는 Contact Picker API입니다. 웹 앱에서 기기의 기본 연락처 관리자에 있는 연락처에 액세스할 수 있도록 하므로 웹 앱은 연락처, 이름, 이메일 주소, 전화번호에 액세스할 수 있습니다. 연락처를 하나만 지정할지, 모든 입력란을 사용할지 또는 이름, 이메일 주소, 전화번호의 하위 집합만 지정할지 지정할 수 있습니다.
개인정보 보호 고려사항
선택 도구가 열리면 공유할 연락처를 선택할 수 있습니다. 공유가 의식적으로 이루어지길 바라는 마음대로 '모두 선택' 옵션은 없을 것입니다. 마찬가지로 액세스는 계속되는 것이 아니라 일회성 결정입니다.
연락처에 액세스
연락처에 액세스하는 것은 간단한 작업입니다. 선택 도구가 열리기 전에 원하는 필드 (name, email, telephone 옵션) 및 여러 연락처에 액세스하고 있는지 또는 하나의 연락처에만 액세스하도록 할지 지정할 수 있습니다. 데모 애플리케이션을 열어 Android 기기에서 이 API를 테스트할 수 있습니다. 소스 코드의 관련 섹션은 기본적으로 아래의 스니펫입니다.
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);
});
텍스트 복사 및 붙여넣기
현재까지 시스템 클립보드에 프로그래매틱 방식으로 이미지를 복사하여 붙여넣을 수 있는 방법이 없었습니다. 최근에 Async Clipboard API에 이미지 지원을 추가했습니다.
이제 이미지를 복사하여 붙여넣을 수 있습니다. 새로운 기능은 클립보드에도 이미지를 작성할 수 있다는 점입니다. 비동기 클립보드 API는 한동안 텍스트를 복사하여 붙여넣을 수 있도록 지원했습니다. avigator.clipboard.writeText()를 호출하여 텍스트를 클립보드에 복사한 후 Navigatorgator.clipboard.readText()를 호출하여 나중에 텍스트를 붙여넣을 수 있습니다.
이미지 복사 및 붙여넣기
이제 이미지를 클립보드에도 작성할 수 있습니다. 이 작업을 수행하려면 이미지 데이터를 blob으로 클립보드 항목 생성자에 전달해야 합니다. 마지막으로 Navigatorgator.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);
}클립보드에서 이미지를 다시 붙여넣는 것은 상당히 복잡한 작업이지만 실제로는 클립보드 항목에서 blob을 가져오는 것으로 구성됩니다. 여러 유형이 있을 수 있으므로 관심 있는 뉴스가 나올 때까지 반복해야 합니다. 보안상의 이유로 현재 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의 작동 방식을 확인할 수 있습니다. 소스 코드의 관련 스니펫은 위에 삽입되어 있습니다. 허가 없이 이미지를 클립보드에 복사할 수는 있지만 클립보드에서 붙여넣을 액세스 권한을 부여해야 합니다.
액세스 권한을 부여한 후에는 클립보드에서 이미지를 읽고 애플리케이션에 붙여넣을 수 있습니다.
축하합니다. 이제 Codelab을 마쳤습니다. 다시 한번 말씀드리지만, 대부분의 API가 여전히 유동적이며 적극적으로 작업하고 있습니다. 따라서 의견을 보내주시기 바랍니다. 고객과 소통을 해야 API를 찾을 수 있기 때문입니다.
또한 기능 방문 페이지를 자주 확인하시기 바랍니다. 최신 상태로 유지되고 작업 중인 모든 API에 대한 심층적인 도움말로 연결됩니다. 계속 참여해 주세요!
톰과 전체 기능팀 🐡