프로그레시브 웹 앱

소개 #

• 프로그레시브 웹 앱이란?
• 프로그레시브 웹 앱이 비즈니스 성공을 주도하는 방법
• 무엇이 좋은 프로그레시브 웹 앱을 만드는가?

설치 가능하게 만들기 #

• 설치가 가능하려면 무엇이 필요합니까?
• 설치 전략을 정의하는 방법

설치 가능한 경험 제공 #

• Add a web app manifest
• 오프라인 대체 페이지 만들기
• 자신만의 인앱 설치 경험을 제공하는 방법
• PWA 설치 촉진 패턴
• Android 앱에서 PWA 사용
• PWAs in app stores

Codelabs #

• 설치 가능하게 만들기

앱과 같은 사용자 경험 만들기 #

• PWA를 앱처럼 느껴지도록 만드십시오.
• Progressively enhance your Progressive Web App

PWA 전용 기능 #

• 앱 바로 가기로 빠르게 작업 완료
• 마스크 가능한 아이콘이 있는 PWA의 적응형 아이콘 지원
• 주기적 백그라운드 동기화 API로 더 풍부한 오프라인 경험
• Customize the window controls overlay of your PWA's title bar

사용자 경험을 개선하는 더 많은 방법 #

• 앱이 설치되어 있습니까? getInstalledRelatedApps()가 알려줄 것입니다!
• Web Share API로 OS 공유 UI와 통합

고급 주제 #

• How Chrome handles updates to the web app manifest
• Progressive Web Apps in multi-origin sites
• Building multiple Progressive Web Apps on the same domain
• Offline UX design guidelines

사례 연구 #

• Deprecating Excalidraw Electron in favor of the web version
• Clipchamp's video editor PWA installs see a 97% monthly growth
• PWA users are 2.5x more likely to purchase Gravit Designer PRO
• JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
• Rakuten 24’s investment in PWA increases user retention by 450%
• How ZDF created a video PWA with offline and dark mode
• How Goibibo's PWA improved conversions by 60%
• Building a PWA at Google, part 1