이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 93의 새로운 기능

Pete LePage

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

이제 JavaScript 모듈과 마찬가지로 import 문으로 CSS 스타일 시트를 로드할 수 있습니다.
설치된 PWA는 URL 핸들러로 등록할 수 있으므로 사용자가 PWA로 바로 이동할 수 있습니다.
여러분의 의견을 바탕으로 Multi-Screen Window Placement API가 업데이트되어 두 번째 오리진 트라이얼이 시작됩니다.
PWA Summit이 10월 6~7일에 개최됩니다.
이 외에도 다양한 기능이 준비되어 있습니다.

저는 피트 레페이지입니다. 집에서 일하며 촬영을 하고 있습니다. 개발자를 위한 Chrome 93의 새로운 기능을 살펴보겠습니다.

CSS 모듈 스크립트

이제 JavaScript 모듈과 마찬가지로 import 문을 사용하여 CSS 스타일 시트를 로드할 수 있습니다. 그런 다음 구성 가능한 스타일시트와 동일한 방식으로 스타일시트를 문서 또는 섀도 루트에 적용할 수 있습니다.

새로운 CSS 모듈 스크립트 기능은 사용자설정 요소에 매우 유용합니다. 또한 자바스크립트에서 CSS를 적용하는 다른 방법과 달리 요소를 생성하거나 CSS 텍스트의 자바스크립트 문자열을 처리할 필요가 없습니다.

이 속성을 사용하려면 assert {type: 'css'}로 스타일 시트를 가져온 다음 adoptedStyleSheets를 호출하여 document 또는 shadowRoot에 적용하세요.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

하지만 assert를 사용하지 않으면 파일이 자바스크립트로 처리되어 작동하지 않습니다.

자세한 내용은 web.dev에서 CSS 모듈 스크립트를 사용하여 스타일시트 가져오기를 참고하세요.

Multi-Screen Window Placement API

일부 앱의 경우 새 창을 열고 특정 위치나 특정 디스플레이에 배치하는 것이 중요한 기능입니다. 예를 들어 Slides를 사용하여 발표할 때 슬라이드는 기본 디스플레이에 전체 화면으로 표시하고 발표자 노트를 다른 디스플레이에 표시하려고 합니다.

Multi-Screen Window Placement API를 사용하면 사용자 머신에 연결된 디스플레이를 열거하고 특정 화면에 창을 배치할 수 있습니다. 이번이 두 번째 오리진 트라이얼이며 여러분의 의견을 바탕으로 많은 부분을 변경했습니다.

기기에 두 개 이상의 화면이 연결되어 있는지 빠르게 확인할 수 있습니다.

const isExtended = window.screen.isExtended;
// returns true/false

그러나 핵심 기능은 연결된 디스플레이에 관한 모든 세부정보를 제공하는 window.getScreens()에 있습니다.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

예를 들어 기본 화면을 결정한 다음 requestFullscreen()를 사용하여 그 화면에 요소를 표시할 수 있습니다.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

또한 새 디스플레이가 연결되거나 삭제된 경우와 같은 변경사항을 수신 대기하는 방법을 제공합니다.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

자세한 내용은 web.dev에서 톰의 멀티스크린 창 배치 API로 여러 디스플레이 관리 문서를 참고하세요.

출시 주기 단축

3월에 Google은 출시 주기를 단축하고 4주마다 새 버전의 Chrome을 출시한다는 계획을 발표했습니다.

Chrome 94는 9월 21일에 출시됩니다. Chrome 캘린더에서 각 버전의 예정된 출시일을 확인할 수 있습니다.

새로운 PWA 기능

프로그레시브 웹 앱을 빌드하고 있다면 새로운 오리진 트라이얼이 두 가지 있습니다.

PWA용 URL 핸들러

PWA가 설치된 상태에서 해당 PWA 링크를 클릭하는 경우 브라우저 탭이 아닌 PWA에서 열려야 할 수 있습니다.

웹 앱 매니페스트에서 url_handlers를 지정하고 .well-known/ 디렉터리에 web-app-origin-association 파일을 추가하면 사용자가 PWA 링크를 클릭하면 설치된 PWA 내에서 열리도록 브라우저에 알릴 수 있습니다.

manifest.json 파일의 url_handlers 예:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association 파일 예:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

약간의 추가 인증으로 PWA가 내가 소유한 다른 출처의 링크를 처리하도록 할 수도 있습니다.

오리진 트라이얼에 관한 모든 세부정보는 web.dev의 URL 핸들러로서의 PWA에 있습니다.

창 컨트롤 오버레이

창 컨트롤 오버레이는 제목 표시줄과 창 컨트롤 버튼(예: 닫기, 최대화, 최소화 버튼)을 포함한 전체 창을 덮도록 클라이언트 영역을 확장합니다.

이 기능을 사용하면 설치된 PWA를 다른 설치된 앱과 비슷하게 보이게 만들 수 있습니다.

오리진 트라이얼에 관한 자세한 내용은 PWA 제목 표시줄의 창 컨트롤 오버레이 맞춤설정을 참고하세요.

PWA 서밋

PWA Summit이 10월에 개최될 예정입니다. 이 콘퍼런스는 모든 사용자가 프로그레시브 웹 앱을 통해 성공할 수 있도록 돕는 데 중점을 둔 무료 온라인 콘퍼런스입니다. PWA Summit은 Google, Intel, Microsoft, 삼성 등 PWA 기술 개발에 관여하는 소수의 회사들 간의 협업으로,

좋은 대담과 콘텐츠가 많이 준비되어 있습니다. PWASummit.org에서 자세한 내용을 알아보고 등록할 수 있습니다.

그 외에도 다양한 기능 제공

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

Flexbox 및 Flexbox 항목은 정렬 키워드(start, end, self-start, self-end, left, right)를 추가로 지원합니다.
이제 비동기 클립보드 API에서 SVG 파일을 지원합니다.
또한 meta theme-color를 설정할 때 media 속성이 적용되므로 밝은 모드와 어두운 모드에 서로 다른 테마 색상을 지정할 수 있습니다.

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

추가 자료

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

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

저는 Pete LePage입니다. Chrome 94가 출시되는 대로 Chrome의 새로운 기능을 소개해 드리겠습니다.