Workshop 섹션때문인지, 재택환경 때문인지 작년보다 내용이 없었다.

Building a more private web​

• New privacy-Preserving Technologies
• FLoC 관련 이라 앞부분 스킵
• UA-CH (User Agent Client Hints API): 유저 브라우저 핑거프린팅 방지
  • 기존 UA 에는 버전, 플랫폼 정보들이 담김.
  • UA String Reduction 2022-04부터 시작
  • User Agent Client Hints 로 마이그레이션 해야함.
    • https 만 가능
    • https://web.dev/migrate-to-ua-ch/

How leading developers build innovative web experiences​

최신 기술 쓴 회사 소개

https://www.youtube.com/watch?v=1vGVrC03_jo

• KAPWING: 온라인 비디오 에디터
  • Indexed DB
  • Web Socket API
  • Web Audio API
  • Media Recorder API
  • Web Workers
  • PWA
  • (+) Web Codecs
  • (+) WebGL
  • (+) Media Source Extensions
• Zoom
  • PWA Desktop Web Codes API 로 Chrome OS 지원
  • 런칭 후 16.9M 유저 증가 (전년대비 7M 증가)
• Google Meet
  • PWA: Custom background using WASM SIMD and WebGL.
• Youtube Primium.
  • PWA: SW, CacheStorage, IndexedDB, Web Share API, Navigation Preload.
• Tiktok: creating a multi-form-factor, frictionless experience.
  • Workbox to Prefetch videos.
  • expand PWA desktop.
  • 트래픽 10배 상승
• Adobe Photoshop Web
  • Chrome 과 웹플랫폼팀과 코웤
  • wasm 을 사용해서 퍼포먼스 패널티 기능 구현.
  • Storage Foundation API.
  • 피드백 환영

Understanding performance with Core Web Vitals​

https://www.youtube.com/watch?v=F0NYT7DIlDQ

• 구글과 자바스크립트 프레임워크 간의 퍼포먼스 협업 Aurora
• PageSpeed Insights 리뉴얼
• 라이트하우스에서 유저 플로우 측정 가능
  • Warm load 나 스크롤 등을 시뮬레이션하고 테스트 가능
• 개발자모드 Recorder 탭에서 puppteer 테스트를 만들어서 export 할 수 있다.

The new responsive design​

https://www.youtube.com/watch?v=dhrX_biPH8c

• @container: parent 영역에 따른 반응형
• Nesting css
• @media (pefers-colors-scheme: dark)
  • 개발자도구 > Rendering > Emulate auto dark mode 가능
• https://web.dev/patterns/layout/
• https://web.dev/learn/css/
• https://web.dev/learn/layout

• 한동안 이 타이틀의 문서가 유행했다.
• 프론트엔드를 알고있는지에 대해 지표로 확인되는 것 같고, 네트워크와 브라우저의 렌더링 기법까지 알아야하기 때문에 확산되는 듯한데 정작 가장 중요한 캐시레이어에 대한 정보가 없었다.

플로우

• 모바일 크롬에서 URL을 입력했다고 가정하자.

예외단계​

Wifi​

• AP 와 802.11 프로토콜로 연결을 마치면 DHCP 프로토콜을 통해 IP를 할당받는다.

모바일 네트워크​

• 핸드폰이 RRC 유휴상태에 있으므로 폰의 무선 전파가 근처의 중계탑과 동기화를 마친 다음 요청을 보내 무선 전파 컨텍스트를 성립시킨다.
• 핸드폰이 중계탑에서 리소스를 할당받고 정해진 데이터율과 전력으로 데이터를 전송할 준비를 마친다.
• 요청시 패킷
  • 코어 네트워크 -> 서빙게이트웨이 -> 패킷게이트웨이 -> 외부 네트워크로 연동된다.
• 응답시 패킷
  • 외부 네트워크 -> 패킷게이트웨이 -> 서빙게이트웨이 -> 이동성관리엔티티 (MME) -> 핸드폰이 유휴상태일 경우 중계탑에 브로드캐스팅 -> 무선 전파 컨텍스트 재수립 -> 사용자 위치를 서빙게이트웨이로 전송 -> 중게탑과 서빙게이트웨이 간에 터널링 -> 핸드폰으로 응답 전송
• IP 는 패킷게이트웨이에서 관리한다.
• RRC 협상 -> DNS 룩업 -> TCP 핸드쉐이크 -> TLS 핸드쉐이크 -> HTTP 요청 순이다.

오프라인​

• 캐시스토리지 내에 캐싱된 페이지 또는 Fallback이 있는지 확인하고 반환한다.
• 메모리 캐시에 있는지 확인한다.
• ETag, Must-Revalidate 캐시 컨트롤 헤더를 가지고 있지 않다면 HTTP 브라우저 캐시에 있는지 확인하고 반환한다.

크로미움​

• 크로미움 기반 브라우저는 NXDomain 하이재킹을 방지하기 위해 굉장히 재미있는 일을 한다.
• 이 코드는 fake 도메인으로 질의를 3회 진행하는 코드이다.

캐싱​

• 메모리 캐시에 있는지 확인하고 반환한다.
• 캐시스토리지에 있는지 확인하고 반환한다.
• HTTP 브라우저 캐시에 있는지 확인하고 검증 단계를 거치고 반환한다.
• HTTP/2 푸쉬 캐시에 있는지 확인하고 반환한다

요청​

• 쿠키가 있으면 요청과 함께 전송할지 결정한다.
• 요청에 재사용 가능한 커넥션이 있는지 확인한다.
• 새 커넥션을 열 수 있는지 확인한다. (HTTP/1.1 의 도메인별 커넥션 상한에 제한되는지 확인)
• 서버의 IP를 알고 있는지 확인한다.
  • 모르는 경우 브라우저 내부 캐시 -> OS 캐시 -> OS 호스트파일을 확인하여 없는 경우 DNS 질의를 시작한다.
  • DNS 질의는 네트워크 설정에서 설정된 IP 또는 DHCP 로 지정된 IP 를 확인한다.
  • ARP 캐싱이 없는 경우 ARP 요청 프레임을 브로드캐스팅하고 자신의 IP 주소가 요청 프레임과 일치하는 단 하나의 기기는 ARP 응답을 보내면서 캐싱한다.
  • IP 데이터그램을 캡슐화하여 네임서버에 질의를 한다.
  • DNS 질의는 기본 UDP, 512Bytes 이상일 경우 TCP 를 이용하며 rfc7766 에 정의되어있다.
  • 네임서버 -> DNS 리커서 (리졸버) 서버 -> 루트 네임서버 -> 최상위 도메인(TLD) 을 통해 IP 로 반환된다.
• IP 주소를 알았으므로 ARP 로 주소를 확인한다.
• 스위치 -> 라우터 -> 방화벽을 거친다.
• 소켓을 열고 핸드쉐이크를 시작한다. (1RTT)
• 대부분의 사이트가 HTTPS 로 서빙되므로 첫 연결에서는 TLS 핸드쉐이크를 시작한다. (1~2RTT)
  • TLS 버전, 알고리즘, 압축 방식 협상
  • 공개 인증서 반환
  • 암호화

응답​

• 요청된 주소가 엣지서버이면 캐시 만료여부를 확인한 뒤 응답을 반환한다.
• 요청된 주소에 대해 서버가 응답한다.
• 응답 스트림의 처음 몇 바이트를 확인하여 악성페이지일 경우 경고 페이지를 표시하고 종료한다.
• 렌더러 프로세스가 다룰 수 있는 응답일 경우 렌더링을 시작한다.

렌더링​

• HTML, CSS를 파싱한다.
  • 하위 리소스를 로드한다.
  • 파싱 중 script 태그를 만날 경우 로드하고, 파싱하고, 실행하여 HTML 파싱을 일시적으로 차단한다.
• defer JS를 파싱한다.
• 렌더 트리를 생성한다.
• 레이아웃을 계산한다.
• 레이아웃 트리를 순회하며 페인트 레코드 (순서)를 생성한다.
• 컴포지터 스레드에서 각 레이어를 레스터라이즈한다.
• 픽셀을 렌더링한다.

참조

• Google - 모던 웹 브라우저 들여다보기 (파트 2)
• Google - 모던 웹 브라우저 들여다보기 (파트 3)
• JavaScript engine fundamentals: Shapes and Inline Caches
• High Performance Browser Networking

Performance (특히 CLS)와 Privacy 가 행사 전반에 녹아있었다. 가장 중요했던 건 이제 Web Vitals 수치가 SEO 에 반영이 된다는 것이다.

State of speed tooling​

• Lighthouse 지표가 올해 리뉴얼 되었는데 FCP, TBT, CLS 지표를 주로 보면 된다.
• 이 값이 Core Web Vitals 지표로 사용된다.
• 실험실 데이터와 필드 데이터가 있는데, 실험실 데이터로 향상을 시킨 뒤 필드 데이터로 확인하면 된다.
• Third party 에 대한 측정도 추가되었다.
• Thrid party facades 를 통해 iframe 등도 lazy load 해야한다.

Fixing common Web Vitals issues​

• CLS를 측정하고 개선하는 방안에 대해 설명하였다.
• GoogleChrome/web-vitals 로 측정해라.
• LayoutShiftAttribution API

const connection = navigator.connection.effectiveType;
const { width, height } = window.screen;
const debugInfo = { connection, widght, height };
sendToAnalytics({ cls, debugInfo });

// Ohter sources of info:
// window.scrollY
// LayoutShiftAttribution (part of the Layout Instability API)
// Debugging info specific to your app (e.g. tokens)

UX patterns optimized for Core Web Vitals​

• Placeholder 를 놓아 CLS 를 막아야한다는 내용이였다.
• Click 해서 내용이 추가되는 경우도 마찬가지이다.

Exploring the future of Core Web Vitals​

• Web Vitals Changelogs 확인하고 피드백 주면 좋겠다.

Core Web Vitals and SEO​

• 첫째 날의 가장 중요한 섹션이지 않을까 싶다. 21년 5월부터 랭킹에 적용된다.
• Loading, Interactivity, Stability 가 중요하다.
• SEO 에는 필드 데이터를 사용한다.
  • Field data: RUM, CrUX 랑 비슷하고, last ~month 사이의 기간동안 측정된 결과이다.
  • Lab test data: 테스트 데이터

• Ranking factor 는 위와 같다. Google 검색결과의 페이지 환경 이해를 참조하자.
• Search Console 에서 Core Web Vitals report 데이터를 확인 가능하다.
• 회사명 같은 특정한 경우는 속도가 Ranking factor 에 주는 영향력이 낮지만, best editor 처럼 여러 검색 결과가 나오는 경우에는 page experience 가 표시에 더 많은 영향을 준다.
• Great relevant content > Page experience
• Page experience 가 좋으면 유저의 이탈율이 24% 감소한다. (The Science Behind Web Vitals)

Beyond fast​

• 동적으로 로드되는 영역에 대해 content-visibility을 줘서 placeholder 를 구현할 수 있다.

.content {
  content-visibility: auto;
  content-intrinsic-size: 0 500px;
}

• 운영체제와 브라우저에 따라 폰트가 다르게 보이는 것과 swap 폰트 로드로 인해 레이아웃이 변경되는 구조를 막을 수 있다.
• ascent-override, descent-override, line-gap-override Chrome87 부터 가능하다.
• Back Forward Cache 가 Chrome87 에서 Same Origin 에 대해서도 적용되었다. (November 17, 2020)
• chrome은 strict multi-process architecture 라 적용하는데 좀 걸렸다.
• portal 을 18년 소개 후부터 미는데.. 브라우저 지원이 없어서 아직까진 잘 모르겠다.
• 포탈을 쓰면 스토리지 제한이 없어서 두 사이트 간 content 공유가 쉽다.
• quicklink 도 짧게 소개했다. newegg 사는 50% 컨버젼 상승과 4x faster navigation 을 달성했다고 한다.

Enable and debug cross-origin isolated​

• 헤더가 추가된다.
  • Cross-Origin-Opener-Policy: same-origin 코옵
  • Cross-Origin-Embedder-Policy: required-corp 코엡
• Why you need "cross-origin isolated" for powerful features 문서와 Demo 참조하는 게 좋다.
• COOP 는 no-openner 속성과 비슷하며 제어하는 위치의 차이이다.
• COEP 는 CORP 와 함께 사용하여 리소스 로드를 제어할 수 있다. 서비스워커보다 상위에서 실행된다.
• 요약하면 아래와 같다.

# 타 도메인 리소스
Cross-Origin-Resource-Policy: cross-origin
# 또는 CORS 열고 img[crossorigin] 추가

# 타 도메인 아이프레인
Cross-Origin-Resource-Policy: cross-origin

# 내 사이트
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
# 또는 a[no-openner] 추가

Introducing the Privacy Budget​

• 브라우저 fingerprint 를 방지하기 위한 proposal
• Privacy Sandbox
• Less entropy, User-Agent Client Hints 로 개선하여 특정하지 못 하게 할 것이다.

A more private way to measure ad conversions​

• 쿠키를 심어서 arbitrary information까지 추적이 가능한 걸 개선하려한다.
• conversiondestination, impressiondata, reportingorigin 가 추가된다.
• 브라우저 자체에 고유값이 저장되며 chrome://conversion-internals 에서 디버깅 가능하다.
• A more private way to measure ad conversions, the Event Conversion Measurement API와 Demo 를 보는 게 이해가 쉬웠다.

Sign-up form best practices​

• 한 판을 정리해놓아서 이 것만 보면 된다.
• 이름 검사에 정규식을 사용할 때 유니코드 기반을 사용해야한다. /[\p{L} ]+/u
• 개인적으로 듣기 제일 좋았다.

SMS OTP form best practices​

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  pattern="\d{6}"
  required
/>

• 한 판을 정리해놓아 이 것만 보면 된다.
• type="number" 가 아닌 type="text", inputmode="numeric" 을 사용해야한다.
• OTP 문자 마지막 라인에는 @${bound-domain} #${OTP} 처럼 넣어주면 브라우저에서 파싱이 가능하다. (e.g. @gracefullight.dev #123456)
• Web OTP API를 사용하여 서버에서 바로 받아서 사용할 수도 있다.

What's new in DevTools​

• Gird 지원 추가
• Location 변경 기능 추가, Timezone, Language
• Idle Detection API 추가, Kiosk 에서 비활성화시 사용 가능
• Font-face 에서 fallback 을 확인 가능, Disable Local font 추가
• animation 수정 가능
• element screenshot
• element hover 시 accessibility 확인 필드 추가
• warning 등이 Issues 탭으로 나와서 가이드까지 추가 됨
• WebAuthn 탭으로 디버깅 가능
• CSS Overview 탭 추가
• Media 디버깅 패널 추가

Extending CSS with Houdini​

• Houdini.how에 Worklet 확인 가능
• CSS.paintWorklet.addModule 로 바로 가져와서 쓸 수 있다고 강조했다.
• Static gradient worklet 가 예뻐보였다.

Debugging WebAssembly with modern tools​

• emcc 로 c++ 디버깅 옵션을 주면 c++ 소스를 바로 디버깅도 가능하다.
• 추후 memory inspection, custom formatters, profiling, code coverage 기능을 추가할 예정이다.
• google map 에 어떤 wasm 기술이 적용되었는지 알려주면 좋을텐데 아쉬웠다.

Transitioning to modern JavaScript​

• 모던 자바스크립트는 최신 버전을 말하는 게 아니라, All modern browsers 가 사용할 수 있는 스크립트를 말한다.
• ES2017 은 유저 중 94% 가 다 사용할 수 있으므로 더 높은 버전 사용시에는 이 버전을 타켓으로 해야한다. (ES2021은 70%)
• 더 낮은 브라우저에 대한 지원이 필요할 경우 ESnext > ES2017 > ES2015 처럼 ES2017 을 한번 더 말아서 따로 제공해야한다. 필요 없는 코드가 너무 많이 들어가기 때문이다.
• 달마다 80PB 가 필요없는 레거시 자바스크립트 로드에 사용된다고 한다.
• EStimator 를 사용하여 어떤 코드를 변경해야할지 확인할 수 있다.
• Publish, ship, and install modern JavaScript for faster applications

Next-level web apps on desktop​

• PWA 로 추가될 내용들이였다. 기능 설명 위주였다.
• navigator.runOnOsLogin
• Window placement window.getScreens(), internal/external
• Tabbed application mode & Display override manifest.display_override: "tabbed"
• Notification triggers TimestampTrigger
• Link capturing manifest.capture_links, manifest.url_handlers
• File type handling manifest.file_handlers, launchQueue
• Badging (이게 드디어 나온다.)
• Digital goods API

New logic to detect PWA offline support​

• 현재는 오프라인 체크시 서비스워커에 fetch event 가 정의되어있는지만 확인하는데 이제는 offine 시에 200 이 반환되어야한다.
• chrome88 에서 check-offline-capability 플래그를 활성화하여 테스트 가능하다.
• chrome89 에서 console.warn 을 발생시킬 것이다.
• offline.html 파일을 강제시키는 bug fix 느낌이다.

What’s new for web apps in Play​

• bubblewrap/cli 사용하여서 TWA 를 만드는 방법
• PaymentRequest 로 PWA 와 구글 결제 연동 가능

Extending Workbox: custom strategies and plugins​

• Workbox v6 이 되면서 Lifecycle hook 과 기존 strategy 를 확장 가능하게 변경되었다.
• 한 판을 정리해놓아 이 것만 보면 된다.

Structured data for developers​

• Dynamic structred data 가 가능하다.

const s = document.createElement("script");
s.setAttribute("type", "application/ld+json");

fetch(`/api/events/structured-data?id=${id}`)
  .then((r) => r.text())
  .then((data) => {
    s.textContent = data;
    document.head.appendChild(s);
  });

• 테스트는 Rich Results Test 에서 가능하다.
• schema-dts, react-schemaorg 패키지도 있다.

Making the web more visual with Web Stories​

• Web story 를 만드는 방법에 대해 나온다.
• stories.google 나 Google의 웹 스토리 사용 설정하기 참조하자.
• nws.ai, wp.stories.google, makestories.io 에서 만들거나 amp story 로 가능하다.
• 구글 검색에도 표시되어서 언젠가는 만들어야할 것 같다.

The web ahead​

• Wasm: The bridge that helps from lagacy application to that better world.
• Write your code once for all browsers.
• 원반 언제 다 볼 수 있을까 갈수록 기본기가 중요해지는 것 같다.

• 서비스워커는 n:m (사이트:디바이스)로 모든 클라이언트 기기에 설치된다.
• 배포 후 아무 문제 없이 동작하였으나, 190604 이후 웹뷰에서 net::ERR_ABORTED 페이지가 보인다는 버그가 들어오기 시작했다.
• 랜덤하게 발생되고 있어 추적이 어려웠으나 4일에 Chrome의 메이저 버전이 업데이트 되었다라는 것을 확인했고 디버깅을 시작했다.

디버깅

• 서비스워커가 내려오지 않은 경우 페이지가 100% 정상동작을 하였다.
• 서비스워커가 내려온 경우 랜덤하게 페이지가 로드되지 않았다.
• 문제는 서비스워커로 확인되었고, 세부적인 디버깅 내역은 다음과 같다.
  • fetchListener 내부 cacheStorage 접근 예외처리: 재현
  • fetchListener 제거: 재현 안됨
• Chrome 75버전의 웹뷰에서 서비스워커의 fetching 방식이 변경되었다는 걸 확인할 수 있었다.
• 74, 75버전의 Diff를 찾을 수 있어 서비스워커 코어가 어마어마하게 변경되었다는 걸 확인할 수 있었으나 이 코드를 디버깅하는 것보다 퇴사 후 행복하게 사는 게 멋질 것이란 판단이 들었다.
• 다행히 구글러와 연락이 닿아 private 버그리포팅을 했고, Chrome은 오픈소스라 구글에서도 일일히 확인하기 힘들다라는 답변을 들을 수 있었다.

웹뷰와 서비스워커

• 웹뷰의 서비스워커와 브라우저의 서비스워커는 다른 인스턴스이므로 서로 공유되지 않는다.
• 그렇다면 웹뷰에서 재접속시에 앱 셸을 빠르게 로드하는 이점 뿐이라는 말이다. === 어드벤티지 없음
• WebView UA in Lollipop and Above에 따르면 안드로이드 롤리팝 이후부터 User Agent에 wv란 값을 물고 들어온다.

해결

예외처리​

• Chrome 엔진이 업데이트 된다고 서비스워커가 제거되지 않는다.
• 따라서 UA 에 android, wv 값이 있는 경우 서비스워커를 설치하지 않을 뿐 아니라 설치된 서비스워커를 제거해주는 로직이 있어야한다.
• 아니라면 A way to immediately unregister a service worker 기능을 브라우저 벤더들이 개발해줘야한다.
• 더 특정한 버전을 줘서 예외처리를 한다면 다음과 같을 것이다.

Chrome 75.0.3770.67 ~ 75.0.3770.101 버전의 모든 안드로이드 웹뷰에서 서비스워커 설치를 차단, 이미 설치가 되어있다면 삭제

패치​

• 몇일 뒤에 다른 업체에서 public 하게 버그리포팅을 올렸고 버그를 찾아서 조만간 패치될 예정이다.
• This is affecting tens of thousands of our readers 로 보아 나와 같은 빡침이 느껴져서 아련했다.
• 패치된 코드는 여기서 볼 수 있다.

여담

• 브라우저에 버그 발생시 대처하는 방법은 거의 불가능하다.
• 실수는 여기든 저기든 다 똑같구나

usb 디버깅 승인 후 chrome://inspect#devices 탭에 접근하면 기기가 보이면서 디버깅이 가능해야하는데, 그렇지 못한 경우에 아래처럼 진행해주면 된다.

먼저 usb 디버깅 권한을 모두 초기화하고 다시 연결한다.

# 디버깅 서버를 죽인 후 다시 실행한다.
$ adb kill-server
$ adb usb

개발자도구의 More tools > Remote devices의 목록에서 확인할 수 있다.

여담

• PTP 연결을 하라는데 이건 안드로이드 구버전에 대한거라 필요 없다.
• 웹뷰 디버깅시에는 디버깅 권한이 있는 앱이여야 가능하다.

웹서버를 크롬에서 띄울시 localhost 가 요청되지 않는 경우가 있다. DNS 에 문제가 있어 연결할 수 없다는 에러가 나온다.

Chrome > 설정 > 개인정보 메뉴에서 네트워크 활동을 예측하여 페이지 로드 성능 개선 기능을 해제한다.

github의 예제 프로젝트나 라이브러리를 받을 때, 데모를 실행시키고 싶을 때가 있다. 그럴려면 node나 apache, nginx, iis 등의 웹서버에서 해당 폴더를 설정하고, hosts파일에서 열어줘야하는 번거로움이 있다.

Web Server for Chrome을 사용하면 몇 초 안으로 데모를 띄울 수 있다.

1. 크롬 설치 후 웹스토어 접속
2. 검색란에서 Web Server for Chrome 검색
3. 설치

사용법

Web Server 실행​

chrome://apps/에 접속 후 Web Server 아이콘을 클릭한다.

설정 및 구동​

Automatically show index.html 설정을 체크한 후 CHOOSE FOLDER로 웹서버를 돌릴 폴더를 선택해주자. 그리고 127.0.0.1:8887 (또는 localhost:8887)로 접속하면 끝!

여담

Html과 Javascript로 나만의 UI를 만들고 빠르게 확인하는데 좋을 것 같다. Service Worker 같은 Https가 필요한 기술도 실행이 가능하다.

Chrome을 설치한다.

웹스토어 이동

Chrome 브라우저를 켜서 웹스토어로 접속한다.

Browsec 설치

검색 후 설치하기 버튼을 클릭한다.

Browsec 활성화

주소표시줄 우측의 방패모양 아이콘을 클릭해 기능을 켠다.

감상

새로고침(F5 키)을 한 후 감상한다.

여담

페이지 로딩시에만 국가 체크가 들어가므로 재생을 한 후 속도가 느리다면, Browsec을 꺼주면 된다.