Chrome 89가 현재 안정화 버전으로 출시되기 시작했습니다.
다음 사항에 유의하시기 바랍니다.
- WebHID, WebNFC, Web Serial이 오리진 트라이얼을 졸업하고 이제 안정화 버전에서 사용할 수 있습니다.
- 일부 개발자가 PWA 설치 가능 여부 확인을 회피하는 데 사용한 허점을 해결합니다.
- Web Share 및 Web Share Target이 데스크톱에 제공됩니다.
- 더 많은 기능이 제공됩니다.
저는 피트 르페이지입니다. 집에서 일하고 촬영하고 있습니다. Chrome 89에서 개발자를 위한 새로운 기능을 살펴보겠습니다.
WebHID, WebNFC, Web Serial
WebHID, WebNFC, Web Serial이 정말 기대됩니다. 이러한 API는 실제 하드웨어와 상호작용하여 이전에는 불가능했던 새로운 사용자 시나리오를 지원합니다.
이를 통해 제작자는 재미있고 특이한 하드웨어, 화상 회의 앱에 연결하여 특수 스피커의 전용 전화 통신 버튼을 사용할 수 있습니다. 또는 기타 여러 사용 사례
@AndreBan은 Web Serial과 약 60줄의 코드를 사용하여 Raspberry Pi Pico의 MicroPython REPL과 상호작용할 수 있는 페이지를 만들었습니다. 웹 직렬은 Espruino의 웹 기반 IDE에서도 사용됩니다.
CDS 2019에서 프랑수아는 Web 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에서 지원됩니다.
Web Share를 사용하면 사용자가 기기에 설치된 다른 앱에 파일이나 데이터를 보낼 수 있습니다(예: Google 포토에서 Twitter로 사진 공유).
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를 사용할 수 있도록 한 경우 디지털 상품 API 오리진 트라이얼에 가입할 수 있습니다.
추가 자료
여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 89의 추가 변경사항은 아래 링크를 확인하세요.
- Chrome DevTools의 새로운 기능 (89)
- Chrome 89 지원 중단 및 삭제
- Chrome 88의 ChromeStatus.com 업데이트
- Chrome 88의 JavaScript 새로운 기능
- Chromium 소스 저장소 변경 목록
구독
동영상에 대한 최신 소식을 받아보려면 Chrome Developers YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받으실 수 있습니다.
저는 Pete LePage입니다. Chrome 90이 출시되면 바로 여기에서 Chrome의 새로운 기능을 알려드리겠습니다.
크레딧
Raspberry Pi 및 Arduino 사진은 해리슨 브로드벤트(Unsplash)가 촬영했습니다.