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",
  ...
}

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

계산된 앱 ID를 보여주는 DevTools

프로덕션에 이미 PWA가 있고 매니페스트에 id를 추가하려면 브라우저에서 할당한 ID를 사용해야 합니다. Dev Tools의 애플리케이션 패널에 있는 매니페스트 창에서 id를 찾을 수 있습니다.

새 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부터 오리진 트라이얼로 제공되는 실험용 기능으로, Core Web Vitals를 최적화하는 데 도움이 될 수 있습니다. 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부터 현재 버전 번호를 100으로 변경하는 새로운 플래그 #force-major-version-to-100가 도입되어 모든 것이 예상대로 작동하는지 확인할 수 있습니다.

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

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

Chrome Dev Summit

Chrome Dev Summit이 종료되었습니다. 모든 동영상과 콘텐츠는 온라인에서 이용할 수 있습니다. Chrome 개발자 서밋 사이트를 확인하거나 기조연설 또는 라이브 스트림을 놓친 경우 Chrome 개발자 YouTube 채널의 CDS 재생목록을 확인하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

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

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 96의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 Pete LePage입니다. Chrome 97이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.