Chrome 89가 안정화 버전으로 출시되기 시작합니다.
다음 사항에 유의하시기 바랍니다.
- WebHID, WebNFC, Web Serial이 오리진 트라이얼을 마쳤으며 이제 안정화 버전으로 제공됩니다.
- 일부 개발자가 PWA 설치 가능 여부 확인을 우회하는 데 사용한 허점을 닫습니다.
- 웹 공유 및 웹 공유 타겟이 데스크톱에 출시되었습니다.
- 이 외에도 다양한 기능이 있습니다.
저는 집에서 작업하고 촬영하는 피트 르페이지입니다. Chrome 89에서 개발자를 위해 새로 제공되는 기능을 자세히 살펴보겠습니다.
WebHID, WebNFC, Web Serial
WebHID, WebNFC, Web Serial에 대해 매우 기대하고 있습니다. 이를 통해 사용자는 이전에는 불가능했던 새로운 시나리오를 열고 실제 하드웨어와 상호작용할 수 있습니다.
이를 통해 제작자는 재미있고 기발한 하드웨어, 화상 회의 앱에 연결하여 특수 스피커의 전용 전화 버튼을 사용할 수 있습니다. 또는 기타 여러 사용 사례가 있습니다.
@AndreBan은 웹 시리얼과 약 60줄의 코드를 사용하여 Raspberry Pi Pico의 MicroPython REPL과 상호작용할 수 있는 페이지를 만들었습니다. 웹 시리얼은 Espruino의 웹 기반 IDE에서도 사용됩니다.
프랑소와는 CDS 2019에서 웹 NFC를 사용하여 재미있는 기억력 게임을 작성했습니다. 휴대전화를 올바른 순서로 올바른 카드에 탭해야 했습니다.
그리고 제가 가장 좋아하는 @bramus님은 WebHID를 사용하여 StreamDeck에 연결하여 Daft Punk 드럼 패드를 만들었습니다. StreamDeck가 없는 경우 YouTube에서 데모 동영상을 확인하고 GitHub의 코드를 확인하세요.
하드웨어와 상호작용하는 사이트이든 여러 사이트와 상호작용할 수 있는 하드웨어이든 사용자는 특수 드라이버나 소프트웨어를 설치할 필요가 없으므로 이점이 있습니다.
web.dev/devices에서 연결할 수 있는 기기에 대해 자세히 알아보거나 WebHID, WebNFC, Web Serial의 시작 가이드를 확인하세요.
PWA 설치 가능 여부 기준 변경사항
오프라인 지원은 처음부터 설치 가능성에 관한 프로그레시브 웹 앱 기준의 핵심 부분이었습니다. 설치된 다른 앱과 마찬가지로 사용자는 앱이 안정적으로 작동하기를 기대합니다. 빠르게 실행되어야 하며 오프라인 공룡이 표시되어서는 안 됩니다.
올해 말에는 일부 사이트가 오프라인 환경 없이 설치 가능성 기준을 통과할 수 있는 허점을 닫을 계획입니다. PWA에 이미 오프라인 환경이 있는 경우 준비가 완료된 것입니다. 별도의 조치를 취하실 필요는 없지만 아직 계정이 없는 경우 지금 추가해 보세요.
Chrome 89부터 PWA가 오프라인 상태일 때 유효한 응답을 제공하지 않으면 DevTools의 문제 탭에 경고가 표시되고 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에서는 JavaScript 모듈 내에서 최상위 await를 허용합니다.
사용자의 혼란을 줄이기 위해 설치 가능한 PWA의 검색주소창에 표시되는 아이콘이 업데이트되었습니다.
또한 신뢰할 수 있는 웹 활동을 사용하여 ChromeOS용 Play 스토어에서 PWA를 사용할 수 있도록 했다면 Digital Goods API 오리진 체험판에 가입할 수 있습니다.
추가 자료
여기에는 주요 내용 중 일부만 다룹니다. Chrome 89의 추가 변경사항은 아래 링크를 확인하세요.
- Chrome DevTools (89)의 새로운 기능
- Chrome 89 지원 중단 및 삭제
- Chrome 88의 ChromeStatus.com 업데이트
- Chrome 88의 JavaScript 관련 새로운 기능
- Chromium 소스 저장소 변경사항 목록
구독
최신 동영상을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 Pete LePage입니다. Chrome 90이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.
크레딧
Raspberry Pi 및 Arduino 사진은 Unsplash의 해리슨 브로드벤트님이 제공해 주셨습니다.