이제 Chrome 89가 안정화 버전으로 출시되기 시작합니다.
다음 사항에 유의하시기 바랍니다.
- WebHID, WebNFC, Web Serial은 오리진 트라이얼이 종료되어 이제 안정화 버전으로 제공됩니다.
- PWA 설치 가능 여부 검사를 우회하는 데 사용했던 일부 개발자가 사용했던 허점을 닫습니다.
- 웹 공유 및 웹 공유 타겟이 데스크톱에 도입됩니다.
- 이 외에도 다양한 기능이 제공됩니다.
저는 피트 르페이지입니다. 집에서 일하고 촬영을 맡고 있습니다. 개발자를 위한 Chrome 89의 새로운 기능을 살펴보겠습니다
WebHID, WebNFC 및 웹 일련번호
WebHID, WebNFC, Web Serial이 정말 마음에 듭니다. 이전에는 불가능했던 새로운 시나리오를 실제 하드웨어와 상호작용하면서 사용자에게 제공합니다.
이를 통해 제조업체는 재미있고 기발한 하드웨어, 화상 회의 앱에 연결하여 특수 스피커의 전용 전화 통신 버튼을 사용할 수 있습니다. 또는 여러 다른 사용 사례에서도 가능합니다.
@AndreBan은 웹 일련번호와 약 60줄의 코드를 사용해 Raspberry Pi Pico에서 MicroPython REPL과 상호작용할 수 있는 페이지를 만들었습니다. Web Serial은 Espruino에 의해 웹 기반 IDE에서도 사용됩니다.
CDS 2019에서 프랑수아는 웹 NFC를 사용해 재미있는 기억력 게임을 출간했습니다. 정확한 순서로 휴대전화를 탭하여 알맞은 카드에 탭해야 했습니다.
제가 제일 좋아하는 @bramus는 WebHID를 사용하여 StreamDeck에 연결하여 다프트 펑크 드럼 패드를 만들었습니다. StreamDeck이 없다면 YouTube에서 데모 동영상을 확인하고 GitHub의 코드도 확인해 보세요.
하드웨어와 상호작용하는 사이트가건 하드웨어와 많은 사이트와 상호작용할 수 있는 하드웨어건 사용자는 특수 드라이버나 소프트웨어를 설치할 필요가 없기 때문에 유리합니다.
web.dev/devices에서 연결할 수 있는 일부 기기에 관해 자세히 알아보거나 WebHID, WebNFC, 웹 일련번호를 위한 시작 가이드를 확인하세요.
PWA 설치 가능 여부 기준 변경사항
오프라인 지원은 처음부터 프로그레시브 웹 앱 설치 기준의 핵심 부분이었습니다. 설치된 다른 앱과 마찬가지로 사용자는 앱이 안정적으로 작동할 것으로 기대합니다. 이 과정은 빨라야 하며 오프라인 공룡을 절대 볼 수 없습니다.
올해 말에는 일부 사이트가 오프라인 경험 없이 설치 가능성 기준을 통과할 수 있는 허점을 보완할 계획입니다. PWA에 이미 오프라인 환경이 제공되어 있다면 설정이 완료된 것입니다. 별도의 조치는 필요하지 않지만 필요하지 않다면 추가하세요.
Chrome 89부터 오프라인 상태에서 PWA가 유효한 응답을 제공하지 않으면 DevTools의 Issues 탭에 경고가 표시되고 Lighthouse는 문제가 있음을 나타냅니다. 올해 말 Chrome 93부터 이 정책이 시행됩니다
제공할 오프라인 환경의 유형을 선택할 수 있습니다. 최대한 많은 경험을 제공하는 것이 이상적입니다. 하지만 최소한 오프라인 대체 페이지만큼 간단할 수 있습니다.
이러한 변경사항 및 변경 이유를 자세히 알아보려면 프로그레시브 웹 앱 오프라인 지원 감지 개선을 참고하세요.
어디서부터 시작해야 할지 잘 모르겠다면 Workbox를 확인하세요. 여기에는 PWA의 프로덕션에 즉시 사용 가능한 서비스 워커를 구동할 수 있는 라이브러리 세트가 포함되어 있습니다. 간단한 오프라인 대체 페이지의 경우 오프라인 대체 페이지 만들기 도움말에 필요한 모든 코드가 있으며 복사하여 사이트에 직접 붙여넣을 수 있습니다.
데스크톱용 웹 공유 및 웹 공유 대상
사이트에서 사용자가 파일을 만들고 수정하고 상호작용할 수 있는 경우 Web Share 및 Web Share Target API를 사용해야 합니다. 이 API는 얼마 전 모바일에서 사용할 수 있었지만 이제 ChromeOS와 Windows에서 지원됩니다.
웹 공유를 사용하면 사용자가 Google 포토에서 트위터로 사진을 공유하는 등 기기에 설치된 다른 앱으로 파일이나 데이터를 전송할 수 있습니다.
async function share(title, text, url) {
try {
await navigator.share({title, text, url});
return true;
} catch (ex) {
console.error('Share failed', ex);
return false;
}
}
다른 앱에서 파일이나 데이터를 공유할 수 있도록 대상으로 등록하려면 Web Share Target API를 사용하는 것이 좋습니다.
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"],
},
],
},
},
시작 가이드는 Web Share API를 사용하여 OS 공유 UI와 통합 및 Web Share Target API로 공유 데이터 수신을 참고하세요.
기타
물론 더 많은 기능이 있습니다.
이제 Chrome에서 자바스크립트 모듈 내에서 최상위 await를 허용합니다.
사용자의 혼란을 줄이기 위해 설치 가능한 PWA의 검색주소창 표시 아이콘을 업데이트했습니다.
신뢰할 수 있는 웹 활동을 사용하여 ChromeOS용 Play 스토어에서 PWA를 제공했다면 Digital Goods API 오리진 트라이얼에 가입할 수 있습니다.
추가 자료
여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 89의 추가 변경사항을 확인하세요.
- Chrome DevTools의 새로운 기능 (89)
- Chrome 89 지원 중단 및 삭제
- Chrome 88용 ChromeStatus.com 업데이트
- Chrome 88의 자바스크립트 관련 새로운 기능
- Chromium 소스 저장소 변경사항 목록
구독
최신 동영상을 확인하고 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 90이 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.
크레딧
Raspberry Pis와 Arduino의 사진은 Unsplash의 해리슨 브로드벤트가 제공한 것입니다.