PWA를 앱처럼 느껴지도록 만드십시오.
귀하의 프로그레시브 웹 앱을 웹사이트가 아닌 "실제" 앱처럼 제작해 보십시오.
Progressive Web App 버즈워드 빙고를 플레이할 때 "PWA는 웹사이트일 뿐입니다"로 설정하는 것이 안전합니다. Microsoft의 PWA 문서는 동의하고, 우리는 바로 이 사이트에서 말하고 있으며, 심지어 PWA 후보인 Frances Berriman과 Alex Russell도 그렇게 씁니다. PWA는 단순한 웹사이트 그 이상을 의미합니다. 제대로 수행되면 PWA는 웹사이트가 아니라 "실제" 앱처럼 느껴질 것입니다. 그렇다면 실제 앱처럼 느껴진다는 것은 무엇을 의미할까요?
이 질문에 답하기 위해 Apple Podcasts 앱을 예로 들어 보겠습니다. 데스크톱의 macOS와 모바일의 iOS(각각 iPadOS)에서 사용할 수 있습니다. Podcasts는 미디어 응용 프로그램이지만 도움말과 함께 설명하는 핵심 아이디어는 다른 범주의 응용 프로그램에도 적용됩니다.
오프라인 실행 가능 #
한 걸음 물러서서 휴대 전화나 데스크톱 컴퓨터에 있을 수 있는 플랫폼별 응용 프로그램을 생각해 보면 한 가지 분명한 사실이 있습니다. 팟캐스트 앱에는 사용자가 오프라인일 때도 항상 무언가가 있습니다. 네트워크 연결이 없을 때 앱은 자연스럽게 계속 열립니다. 상위 차트 섹션에는 콘텐츠가 표시되지 않지만 대신 다시 시도 버튼과 연결된 지금 연결할 수 없음 메시지로 돌아갑니다. 가장 환영할 만한 경험은 아닐지 모르지만 뭔가를 얻었습니다.
웹에서 이 작업을 수행하는 방법
팟캐스트 앱은 소위 앱 셸 모델을 따릅니다. 왼쪽 메뉴 아이콘 및 핵심 플레이어 UI 아이콘과 같은 장식 이미지를 포함하여 핵심 앱을 표시하는 데 필요한 모든 정적 콘텐츠는 로컬로 캐시됩니다. 상위 차트 데이터와 같은 동적 콘텐츠는 요청 시에만 로드되며, 로드에 실패할 경우 로컬에 캐시된 대체 콘텐츠를 사용할 수 있습니다. 앱 셸 모델 문서를 읽고 이 아키텍처 모델을 웹 앱에 적용하는 방법을 알아보세요.
오프라인 콘텐츠 사용 가능 및 미디어 재생 가능 #
오프라인 상태에서도 왼쪽 서랍을 통해 다운로드됨 섹션으로 이동하여 다운로드한 팟캐스트 에피소드를 즐길 수 있습니다. 이 에피소드는 재생 준비가 되어 있고 삽화 및 설명과 같은 모든 메타데이터와 함께 표시됩니다.
웹에서 이 작업을 수행하는 방법
이전에 다운로드한 미디어 콘텐츠는 예를 들어 Workbox 라이브러리에서 캐시된 오디오 및 비디오 제공 레시피를 사용하여 캐시에서 제공할 수 있습니다. 다른 콘텐츠는 항상 캐시나 IndexedDB에 저장할 수 있습니다. 모든 세부 정보와 언제 어떤 스토리지 기술을 사용해야 하는지 알아보려면 웹용 스토리지 기사를 읽으십시오. 사용 가능한 메모리 양이 줄어들 때 제거될 위험 없이 지속적으로 저장해야 하는 데이터가 있는 경우 Persistent Storage API를 사용할 수 있습니다.
사전 백그라운드 다운로드 #
http 203과 같은 쿼리로 콘텐츠를 검색할 수 있으며 검색 결과인 HTTP 203 팟캐스트를 구독하기로 결정하면 시리즈의 최신 에피소드가 질문 없이 즉시 다운로드됩니다.
웹에서 이 작업을 수행하는 방법
팟캐스트 에피소드를 다운로드하는 작업은 시간이 더 오래 걸릴 수 있습니다. Background Fetch API를 사용하면 백그라운드에서 처리하는 브라우저에 다운로드를 위임할 수 있습니다. Android에서는 브라우저가 이러한 다운로드를 운영 체제에 더 위임할 수도 있으므로 브라우저를 계속 실행할 필요가 없습니다. 다운로드가 완료되면 앱의 서비스 워커가 깨어나고 응답으로 무엇을 할지 결정할 수 있습니다.
다른 응용 프로그램과 공유 및 상호 작용 #
팟캐스트 앱은 다른 애플리케이션과 자연스럽게 통합됩니다. 예를 들어 내가 좋아하는 에피소드를 마우스 오른쪽 버튼으로 클릭하면 메시지 앱과 같은 내 기기의 다른 앱과 공유할 수 있습니다. 또한 자연스럽게 시스템 클립보드와 통합됩니다. 에피소드를 마우스 오른쪽 버튼으로 클릭하고 링크를 복사할 수 있습니다.
웹에서 이 작업을 수행하는 방법
Web Share API와 Web Share Target API를 사용하면 앱이 기기의 다른 애플리케이션과 텍스트, 파일 및 링크를 공유하고 받을 수 있습니다. 웹 앱이 운영 체제의 기본 제공 오른쪽 클릭 메뉴에 메뉴 항목을 추가하는 것은 아직 가능하지 않지만 장치의 다른 앱과 연결하거나 연결하는 다른 방법이 많이 있습니다. Async Clipboard API를 사용하면 프로그래밍 방식으로 시스템 클립보드에서 텍스트 및 이미지 데이터(PNG 이미지)를 읽고 쓸 수 있습니다. Android에서는 Contact Picker API를 사용하여 기기의 연락처 관리자에서 항목을 선택할 수 있습니다. 플랫폼별 앱과 PWA를 모두 제공하는 경우 Get Installed Related Apps API를 사용하여 플랫폼별 앱이 설치되어 있는지 확인할 수 있습니다. 설치된 경우, 사용자가 PWA를 설치하도록 권장하거나 웹 푸시 알림을 수락할 필요가 없습니다.
백그라운드 앱 새로고침 #
팟캐스트 앱 설정에서 새 에피소드를 자동으로 다운로드하도록 앱을 구성할 수 있습니다. 그런 식으로 생각하지 않아도 업데이트된 콘텐츠는 항상 거기에 있습니다. 아주 멋진 기능입니다.
웹에서 이 작업을 수행하는 방법
Periodic Background Sync API를 사용하면 앱을 실행할 필요 없이 백그라운드에서 콘텐츠를 정기적으로 새로 고칠 수 있습니다. 즉, 새로운 콘텐츠를 사전에 사용할 수 있으므로 사용자가 결정할 때마다 즉시 탐색을 시작할 수 있습니다.
클라우드를 통해 동기화된 상태 #
동시에 내 구독은 내가 소유한 모든 장치에서 동기화됩니다. 원활한 세상에서는 팟캐스트 구독을 수동으로 동기화하는 것에 대해 걱정할 필요가 없습니다. 마찬가지로, 모바일 장치의 메모리가 데스크탑에서 이미 들은 에피소드에 의해 소모되거나 그 반대의 경우도 마찬가지입니다. 재생 상태는 동기화 상태로 유지되며 청취한 에피소드는 자동으로 삭제됩니다.
웹에서 이 작업을 수행하는 방법
앱 상태 데이터 동기화는 백그라운드 동기화 API에 위임할 수 있는 작업입니다. 동기화 작업 자체는 즉시 발생하지 않아도 되며 결국에는 사용자가 이미 앱을 다시 닫은 경우일 수도 있습니다.
하드웨어 미디어 키 컨트롤 #
Chrome 브라우저에서 뉴스 페이지를 읽는 것과 같이 다른 애플리케이션으로 바쁠 때에도 랩톱의 미디어 키로 Podcast 앱을 제어할 수 있습니다. 앞으로 또는 뒤로 건너뛰기 위해 앱으로 전환할 필요가 없습니다.
웹에서 이 작업을 수행하는 방법
미디어 키는 미디어 세션 API에서 지원됩니다. 이와 같이 사용자는 실제 키보드, 헤드폰의 하드웨어 미디어 키를 사용하거나 스마트워치의 소프트웨어 미디어 키에서 웹 앱을 제어할 수도 있습니다. 탐색 작업을 원활하게 하기 위한 추가 아이디어는 사용자가 콘텐츠의 상당 부분(예: 오프닝 크레딧 또는 챕터 경계 통과)을 탐색할 때 진동 패턴을 보내는 것입니다.
멀티태스킹 및 앱 바로 가기 #
물론 언제 어디서나 팟캐스트 앱으로 멀티태스킹을 할 수 있습니다. 앱에는 명확하게 구별되는 아이콘이 있어 데스크탑이나 애플리케이션 도크에 놓을 수도 있으므로 원할 때 팟캐스트를 즉시 실행할 수 있습니다.
웹에서 이 작업을 수행하는 방법
데스크톱과 모바일 모두에서 Progressive Web Apps를 홈 화면, 시작 메뉴 또는 애플리케이션 독에 설치할 수 있습니다. 사전 프롬프트에 따라 설치하거나 앱 개발자가 완전히 제어할 수 있습니다. 설치하려면 무엇이 필요합니까? 기사는 알아야 할 모든 내용을 다룹니다. 멀티태스킹 시 PWA는 브라우저와 독립적으로 나타납니다.
상황에 맞는 메뉴의 빠른 작업 #
가장 일반적인 앱 작업인 새 콘텐츠 검색 및 새 에피소드 확인은 Dock에 있는 앱의 컨텍스트 메뉴에서 바로 사용할 수 있습니다. 옵션 메뉴를 통해 로그인할 때 앱을 열도록 결정할 수도 있습니다.
웹에서 이 작업을 수행하는 방법
PWA의 웹 앱 매니페스트에서 앱 아이콘 바로 가기를 지정하면 사용자가 앱 아이콘에서 직접 연결할 수 있는 일반적인 작업에 대한 빠른 경로를 등록할 수 있습니다. macOS와 같은 운영 체제에서 사용자는 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하고 로그인 시 앱이 실행되도록 설정할 수도 있습니다. 로그인 시 실행에 대한 제안에 대한 작업이 진행 중입니다.
기본 앱으로 작동 #
다른 iOS 응용 프로그램과 웹 사이트 또는 이메일도 podcasts:// URL 체계를 활용하여 Podcasts 앱과 통합할 수 있습니다. podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903과 같은 링크를 따라가면 Podcast 앱으로 바로 이동하여 Podcast를 구독하거나 들을지 결정할 수 있습니다.
웹에서 이 작업을 수행하는 방법
완전 사용자 지정 URL 체계를 처리하는 것은 아직 가능하지 않지만 PWA에 대한 URL 프로토콜 처리에 대한 제안에 대한 작업이 진행 중입니다. 현재, web+ 구성표 접두사가 있는 registerProtocolHandler()가 최상의 대안입니다.
로컬 파일 시스템 통합 #
당장 생각이 나지 않을 수도 있지만 팟캐스트 앱은 자연스럽게 로컬 파일 시스템과 통합됩니다. 팟캐스트 에피소드를 다운로드하면 내 랩탑에서 ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache에 저장됩니다. ~/Documents와 달리 이 디렉토리는 물론 일반 사용자가 직접 액세스할 수는 없지만 존재합니다. 파일 이외의 다른 저장 메커니즘은 오프라인 콘텐츠 섹션에서 참조됩니다.
웹에서 이 작업을 수행하는 방법
개발자는 파일 시스템 액세스 API를 사용하여 기기의 로컬 파일 시스템에 액세스할 수 있습니다. API를 지원하지 않는 브라우저에 대한 대체를 투명하게 제공하는 browser-fs-access 지원 라이브러리를 통해 또는 직접 사용할 수 있습니다. 보안상의 이유로 시스템 디렉토리는 웹에서 액세스할 수 없습니다.
플랫폼 모양과 느낌 #
Podcast와 같은 iOS 응용 프로그램에 대해 자명한 더 미묘한 것이 있습니다. 텍스트 레이블을 선택할 수 없고 모든 텍스트가 시스템의 시스템 글꼴과 혼합됩니다. 또한 내가 선택한 시스템 색상 테마(다크 모드)도 존중됩니다.
웹에서 이 작업을 수행하는 방법
none user-select CSS 속성을 활용하면 실수로 UI 요소가 선택되는 것을 방지할 수 있습니다. 그러나 앱 콘텐츠를 선택할 수 없도록 만들기 위해 이 속성을 남용하지 않도록 하십시오. 버튼 텍스트 등과 같은 UI 요소에만 사용해야 합니다. font-family CCS 속성에 대한 system-ui 값을 사용하면 앱에 사용할 시스템의 기본 UI 글꼴을 지정할 수 있습니다. 마지막으로, 응용 프로그램은 prefers-color-scheme 옵션을 따라 사용자의 색상표 선호도를 준수할 수 있고, 선택적으로 다크 모드를 사용해 재정의할 수 있습니다. 결정해야 할 또 다른 사항은 스크롤 영역의 경계에 도달할 때 브라우저가 수행해야 하는 작업입니다(예: 새로 고침에 대한 사용자 지정 끌어오기 구현). 이것은 overscroll-behavior CSS 속성으로 가능합니다.맞춤형 제목 표시줄 #
Podcasts 앱 창을 보면 Safari 브라우저 창과 같은 클래식 통합 제목 표시줄 및 도구 모음이 없지만 기본 플레이어 창에 도킹된 사이드바처럼 보이는 사용자 지정 환경이 있다는 것을 알 수 있습니다.
웹에서 이 작업을 수행하는 방법
현재 불가능하지만 제목 표시줄 사용자 정의 작업이 현재 진행 중입니다. 그러나 display 및 theme-color 속성을 지정하여 애플리케이션 창의 모양과 느낌을 결정하고 표시할 기본 브라우저 컨트롤(어느 것도 표시되지 않을 수도 있음)을 결정할 수 있습니다.
날렵한 애니메이션 #
팟캐스트에서 인앱 애니메이션은 빠르고 부드럽습니다. 예를 들어, 오른쪽에 있는 에피소드 노트 서랍을 열면 우아하게 들어옵니다. 다운로드에서 한 에피소드를 제거하면 나머지 에피소드가 뜨고 삭제된 에피소드로 인해 비워진 화면 공간을 소비합니다.
웹에서 이 작업을 수행하는 방법
애니메이션 및 성능 문서에 요약된 여러 모범 사례를 고려하면 웹에서 성능이 뛰어난 애니메이션을 만들 수 있습니다. 페이지가 매겨진 콘텐츠 또는 미디어 캐러셀에서 일반적으로 볼 수 있는 스크롤 애니메이션은 CSS 스크롤 스냅 기능을 사용하여 크게 개선할 수 있습니다. 완전한 제어를 위해 Web Animations API를 사용할 수 있습니다.
앱 외부에 노출된 콘텐츠 #
iOS의 팟캐스트 앱은 실제 애플리케이션이 아닌 다른 위치의 콘텐츠를 표시할 수 있습니다(예: 시스템의 위젯 보기 또는 Siri 제안 형식). 탭하기만 하면 되는 사전 예방적 사용 기반 클릭 유도문안을 사용하면 팟캐스트와 같은 앱의 재참여율을 크게 높일 수 있습니다.
웹에서 이 작업을 수행하는 방법
Content Index API를 사용하면 애플리케이션이 오프라인에서 사용할 수 있는 PWA 콘텐츠를 브라우저에 알릴 수 있습니다. 이를 통해 브라우저는 기본 앱 외부에 이 콘텐츠를 표시할 수 있습니다. 앱에서 흥미로운 콘텐츠를 읽기 가능한 오디오 재생으로 마크업하고 일반적으로 구조화된 마크업을 사용해, 검색 엔진과 Google 어시스턴트와 같은 가상 도우미를 사용해 이상적으로 제공 솔루션을 선보일 수 있습니다.
잠금 화면 미디어 제어 위젯 #
팟캐스트 에피소드가 재생 중일 때 팟캐스트 앱은 에피소드 아트워크, 에피소드 제목 및 팟캐스트 이름과 같은 메타데이터가 포함된 아름다운 제어 위젯을 잠금 화면에 표시합니다.
웹에서 이 작업을 수행하는 방법
미디어 세션 API를 사용하면 아트워크, 트랙 제목 등과 같은 메타데이터를 지정할 수 있으며, 이 메타데이터는 브라우저의 잠금 화면, 스마트워치 또는 기타 미디어 위젯에 표시됩니다.
푸시 알림 #
(알림 프롬프트가 훨씬 조용해졌지만) 푸시 알림은 웹에서 약간의 성가신 일이 되었습니다. 그러나 적절하게 사용하면 많은 가치를 추가할 수 있습니다. 예를 들어 iOS 팟캐스트 앱은 내가 구독 중인 팟캐스트의 새로운 에피소드를 선택적으로 알려주거나 새로운 에피소드를 추천할 수 있을 뿐만 아니라 새로운 앱 기능에 대해 알려줄 수 있습니다.
웹에서 이 작업을 수행하는 방법
푸시 API를 사용하면 앱에서 푸시 알림을 받을 수 있으므로 PWA와 관련된 주목할만한 이벤트에 대해 사용자에게 알릴 수 있습니다. 미래의 알려진 시간에 실행되어야 하고 네트워크 연결이 필요하지 않은 알림의 경우 알림 트리거 API를 사용할 수 있습니다.
앱 아이콘 배지 #
내가 구독하는 팟캐스트 중 하나에 사용할 수 있는 새 에피소드가 있을 때마다 팟캐스트 홈 화면 아이콘에 앱 아이콘 배지가 나타나 방해가 되지 않는 방식으로 앱에 다시 참여하도록 권장합니다.
웹에서 이 작업을 수행하는 방법
Badging API를 사용하여 앱 아이콘 배지를 설정할 수 있습니다. 이것은 PWA에 "읽지 않은" 항목에 대한 개념이 있거나 사용자의 주의를 앱으로 눈에 띄지 않게 되돌릴 수 있는 수단이 필요할 때 특히 유용합니다.
미디어 재생이 에너지 절약 설정보다 우선 #
팟캐스트 미디어가 재생 중일 때 화면이 꺼질 수 있지만 시스템은 대기 모드로 들어가지 않습니다. 앱은 예를 들어 가사나 캡션을 표시하기 위해 선택적으로 화면을 계속 깨울 수도 있습니다.
웹에서 이 작업을 수행하는 방법
Screen Wake Lock API를 사용하면 화면이 꺼지는 것을 방지할 수 있습니다. 웹에서의 미디어 재생은 시스템이 대기 모드로 들어가는 것을 자동으로 방지합니다.
앱 스토어를 통한 앱 검색 #
팟캐스트 앱은 macOS 데스크탑 경험의 일부이지만 iOS에서는 App Store에서 설치해야 합니다. podcast , podcasts 또는 apple podcasts를 빠르게 검색하면 App Store에 즉시 앱이 표시됩니다.
웹에서 이 작업을 수행하는 방법
Apple은 App Store에서 PWA를 허용하지 않지만 Android에서는 신뢰할 수 있는 웹 활동으로 래핑된 PWA를 제출할 수 있습니다. bubblewrap 스크립트를 사용하면 이 작업을 쉽게 수행할 수 있습니다. 이 스크립트는 또한 명령줄을 건드리지 않고도 사용할 수 있는 PWABuilder의 Android 앱 내보내기 기능을 내부적으로 지원합니다.
기능 요약 #
아래 표는 모든 기능에 대한 간략한 개요를 보여주고 웹에서 구현하는 데 유용한 리소스 목록을 제공합니다.
결론 #
PWA는 2015년에 도입된 이후로 먼 길을 왔습니다. Project Fugu 🐡의 맥락에서 회사 간 Chromium 팀이 마지막 남은 공백을 메우기 위해 노력하고 있습니다. 이 기사의 조언 중 일부만 따르면 앱과 같은 느낌에 조금씩 더 다가갈 수 있으며 사용자가 "단지 웹사이트"를 다루고 있다는 사실을 잊게 만들 수 있습니다. 실제 앱처럼 느껴지기만 하면 앱이 어떻게 구축되는지(왜 그래야 하는지?) 신경 쓰지 마세요.
감사의 말 #
이 기사는 Kayce Basques , Joe Medley , Joshua Bell , Dion Almaer , Ade Oshineye , Pete LePage , Sam Thorogood , Reilly Grant 및 Jeffrey Yasskin이 검수하였습니다.