Chrome 96의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

저는 피트 르페이지입니다. 마침내 스튜디오에서 촬영하는 개발자를 위한 Chrome 96의 새로운 기능을 살펴보겠습니다.

PWA용 매니페스트 id

사용자가 PWA를 설치할 때 브라우저는 PWA를 고유하게 식별할 방법이 필요합니다. 하지만 최근까지는 웹 앱 매니페스트 사양에서 PWA를 식별하는 방법을 지정하지 않아 브라우저가 결정하게 되었으며 서로 다른 구현으로 이어졌습니다. 일부 브라우저에서는 start_url가 사용되고 다른 브라우저에서는 매니페스트 파일의 경로가 사용됩니다.

따라서 설치 환경을 저해하지 않고는 이러한 필드 중 하나를 변경할 수 없습니다. 이제 PWA에 사용되는 식별자를 명시적으로 정의할 수 있는 새로운 선택적 id 속성이 있습니다.

매니페스트에 id 속성을 추가하면 start_url 또는 매니페스트 위치의 종속 항목이 삭제되고 이러한 필드를 업데이트할 수 있습니다.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Chrome 96부터 id 속성 지원이 데스크톱 Chromium 기반 브라우저에서 제공됩니다. 현재 매니페스트 URL을 고유 ID로 사용하는 모바일 지원은 2022년 상반기에 도입될 예정입니다.

계산된 앱 ID를 보여주는 DevTools

프로덕션 환경에 이미 PWA가 있고 매니페스트에 id를 추가하려면 브라우저에서 할당한 ID를 사용해야 합니다. id는 개발자 도구의 Application 패널에 있는 Manifest 창에서 찾을 수 있습니다.

새로운 PWA의 경우 id를 원하는 문자열 값으로 설정할 수 있지만 향후 변경할 수 없으므로 현명하게 선택하세요.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

자세한 내용은 웹 앱 매니페스트 ID 속성으로 PWA 고유 식별을 참고하세요.

PWA용 URL 프로토콜 핸들러

웹 앱은 navigator.registerProtocolHandler()를 사용하여 프로토콜 핸들러로 등록할 수 있습니다. 예를 들어 Gmail은 mailto 프로토콜을 등록할 수 있습니다. 그런 다음 사용자가 mailto: 프리픽스가 있는 링크를 클릭하면 Gmail이 열려 이메일을 쉽게 보낼 수 있습니다.

Chrome 96부터 PWA를 설치 과정에서 프로토콜 핸들러로 등록할 수 있습니다. PWA에 관해 이렇게 하려면 웹 앱 매니페스트에 protocol_handlers 속성을 추가하고, 처리할 protocol 및 클릭 시 열리는 url를 지정합니다.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

여기에는 일부 제한사항이 있고 프로토콜만 등록할 수 없으므로 PWA의 URL 프로토콜 핸들러 등록에서 자세한 내용과 web+ 문법을 사용하여 자체 프로토콜을 만드는 방법을 확인하세요.

우선순위 힌트 (오리진 트라이얼)

브라우저가 웹페이지를 파싱하고 이미지, 스크립트, CSS와 같은 리소스를 발견하고 다운로드하기 시작하면 페이지 로드를 최적화하기 위해 가져오기 우선순위를 할당합니다. 브라우저는 우선순위를 꽤 잘 할당하지만, 모든 경우에 최적화되어 있지는 않습니다.

우선순위 힌트는 Chrome 96부터 오리진 트라이얼로 제공되는 실험용 기능이며 코어 웹 바이탈을 최적화하는 데 도움이 될 수 있습니다. importance 속성을 사용하면 CSS, 글꼴, 스크립트, 이미지, iframe과 같은 리소스 유형의 우선순위를 지정할 수 있습니다.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

예를 들어 Google 항공편 검색 페이지는 다음과 같습니다. 이 배경 이미지는 최대 콘텐츠 페인트 (LCP)입니다.

큰 배경 이미지가 표시된 Google 항공편 검색 스크린샷

우선순위 힌트가 포함된 상태와 없는 상태로 로드되었는지 확인해 보겠습니다. 백그라운드 이미지에서 우선순위를 high로 설정하면 LCP가 2.6초에서 1.9초로 떨어집니다.

Fetch Priority API로 리소스 로드 최적화에서 모든 세부정보, 오리진 트라이얼 등록 방법, 렌더링 성능 개선에 도움이 되는 몇 가지 좋은 사례를 확인하세요.

UA 문자열에서 Chrome 100 에뮬레이션

내년 초에는 3자리 버전 번호인 Chrome 100이 출시됩니다. 버전 번호를 확인하거나 UA 문자열을 파싱하는 모든 코드는 3자리 숫자를 처리하는지 확인해야 합니다.

Chrome 96부터 새로운 플래그 #force-major-version-to-100가 도입되어 현재 버전 번호가 100으로 변경되므로 모든 것이 예상대로 작동하는지 확인할 수 있습니다.

새로운 #force-major-version-to-100 옵션이 강조 표시된 Chrome 플래그 페이지

자세한 내용은 사용자 에이전트 문자열에서 Chrome 메이저 버전을 100으로 강제 설정하기를 참고하세요.

Chrome 개발자 서밋

Chrome Dev Summit이 종료되었습니다. 모든 동영상과 콘텐츠는 온라인으로 제공됩니다. Chrome Dev Summit 사이트를 확인하거나, 기조연설이나 라이브 스트림을 놓쳤다면 Chrome 개발자 YouTube 채널의 CDS 재생목록을 확인하세요.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

  • 이제 뒤로, 앞으로 캐시(bfcache)가 안정화 버전으로 제공되며 Chrome을 Firefox 및 Safari와 동일하게 제공합니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 96의 추가 변경사항을 확인하세요.

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 97이 출시되면 곧 Chrome의 새로운 기능을 소개해 드리겠습니다.