다양한 디스플레이 모드에 대한 PWA를 최적화 – Smashing Magazine
PRWA (Progressive Web Apps)는 웹 애플리케이션을 네이티브와 같은 독립형 경험으로 전환하는 환상적인 방법입니다. 그들은 웹 사이트와 기본 앱 사이의 격차를 해소하지만,이 혁신은 사려 깊은 고려가 필요한 디자인 과제를 도입하기 쉽습니다.
PWA를 매니페스트 파일로 정의합니다. PWA의 매니페스트에서, 우리는 각각 다른 수준의 브라우저 인터페이스 가시성을 제공하는 디스플레이 모드 모드 모드를 선택할 수 있습니다.
fullscreen: 전체 디스플레이를 사용하여 모든 브라우저 UI를 숨 깁니다.standalone: 기본 앱처럼 보이고 브라우저 컨트롤을 숨기지 만 시스템 UI를 유지합니다.minimal-ui: 최소 브라우저 UI 요소를 보여줍니다.browser: 전체 브라우저 인터페이스를 사용한 표준 웹 브라우저 경험.
종종, 우리는 PWA가 브라우저의 웹 사이트 대신 앱처럼 느끼기를 원하므로 디스플레이 매니페스트 멤버를 브라우저의 인터페이스를 숨기는 옵션 중 하나로 설정합니다. fullscreen 또는 standalone. 이것은 응용 프로그램이 집에서 더 많은 느낌을주는 데 도움이되지만 웹을 구축 할 때 일반적으로 고려하지 않은 몇 가지 문제를 소개 할 수 있습니다.
브라우저가 우리에게 제공하는 기능의 양만 잊기 쉽습니다. 포워드/백 버튼, 페이지를 새로 고칠 수있는 기능, 페이지 내 검색 또는 페이지의 URL을 조작, 공유 또는 복사하는 것과 같은 것들은 모두 브라우저의 UI가 숨겨져있을 때 사용자가 액세스 할 수있는 브라우저 제공 기능입니다. 웹 사이트에 반드시 앱 경험으로 번역되지 않는 것들도 있습니다.
사용자가 뒤로 버튼이없는 양식을 깊이 들어가거나 URL을 복사 할 수있는 기능없이 제품 페이지를 공유하거나 새로 고침 버튼이없는 버그를 눌러 구제하십시오!
고맙게도 웹을 사용자 정의 할 수있는 많은 방법이 제공됩니다.
CSS를 작성할 때 항상 미디어 쿼리를 사용합니다. 인쇄용 스타일을 전환하거나 반응 형 디자인을위한 중단 점을 설정하든 웹 개발자의 툴킷에서 일반적입니다. 이전에 논의 된 각 디스플레이 모드는 미디어 쿼리로 사용하여 문서 모양을 변경할 수 있습니다.
다음과 같은 미디어 쿼리 @media (min-width: 1000px) 뷰포트 크기를 기반으로 중단 점을 설정하는 데 가장 많이 사용되는 경향이 있지만 훨씬 더 많은 능력이 있습니다. 인쇄 스타일, 장치 방향, 대비 환경 설정 및 전체 톤을 더 처리 할 수 있습니다. 우리의 경우 우리는 관심이 있습니다 display-mode 미디어 기능.
디스플레이 모드 미디어 쿼리는 현재 디스플레이 모드에 해당합니다.
메모: 매니페스트에서 디스플레이 모드를 설정할 수 있지만 실제 디스플레이 모드는 브라우저 지원에 따라 다를 수 있습니다.
이 미디어 쿼리는 현재 모드를 직접 참조합니다.
@media (display-mode: standalone)독립형 모드로 설정된 페이지에만 적용됩니다.@media (display-mode: fullscreen)전체 화면 모드에 적용됩니다. 이것은 전체 화면 API를 사용할 때도 적용된다는 점에 주목할 가치가 있습니다.@media (display-mode: minimal-ui)최소 UI 모드에 적용됩니다.@media (display-mode: browser)표준 브라우저 모드에 적용됩니다.
또한 주시 할 가치가 있습니다. window-controls-overlay 그리고 tabbed 디스플레이 모드. 글을 쓰는 시점 에서이 두 디스플레이 모드는 실험적이며 display_override. display-override PWA의 매니페스트와 같은 회원입니다 display추가 옵션과 힘을 제공합니다.
display 미리 정해진 폴백 체인이 있습니다 (fullscreen -> standalone -> minimal-ui -> browser) 우리는 바꿀 수 없지만 display-override 다음과 같이 선택의 폴백 순서를 설정할 수 있습니다.
"display_override": ["fullscreen", "minimal-ui"]
window-controls-overlay 데스크탑 운영 체제에서 실행되는 PWA에만 적용 할 수 있습니다. PWA가 전체 창을 가져오고 창 제어 버튼이 오버레이로 나타납니다. 그 동안에, tabbed 단일 창 내에 여러 응용 프로그램이있을 때 관련이 있습니다.
이것들 외에도 picture-in-picture 사진 모드에 적용되는 디스플레이 모드.
우리는 다른 미디어 쿼리와 마찬가지로이 미디어 쿼리를 정확하게 사용합니다. 수업과 함께 요소를 보여줍니다 .pwa-only 디스플레이 모드가 독립형 인 경우 다음을 수행 할 수 있습니다.
.pwa-only {
display: none;
}
@media (display-mode: standalone) {
.pwa-only {
display: block;
}
}
디스플레이 모드가 독립형 일 때 요소를 표시하려면 또는 minimal-ui우리는 이것을 할 수 있습니다 :
@media (display-mode: standalone), (display-mode: minimal-ui) {
.pwa-only {
display: block;
}
}
때로는 CSS로 충분하지 않습니다. 이 경우 디스플레이 모드를 참조하고 JavaScript를 사용하여 필요한 조정을 할 수도 있습니다.
const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
// Listen for display mode changes
window.matchMedia("(display-mode: standalone)").addEventListener("change", (e) => {
if (e.matches) {
// App is now in standalone mode
console.log("Running as PWA");
}
});
실제 응용 프로그램
이제 사용자가 웹 앱을 PWA로 사용하는지 또는 브라우저에서 웹 앱을 사용하고 있는지 여부에 따라 디스플레이 수정 방법을 알았으므로 새로 배운 기술을 어떻게 사용할 수 있는지 살펴볼 수 있습니다.
PWA 사용자를위한 컨텐츠 조정
앱을 PWA로 설치 한 사용자는 이미 변환되었으므로 앱을 조정하여 마케팅을 통해 사용자 경험에 중점을 둘 수 있습니다. 이 사용자는 앱을 설치하여 약속을 보여 주었으므로 홍보 콘텐츠 나 설치 프롬프트가 필요하지 않을 수 있습니다.
더 많은 옵션과 기능을 표시합니다
브라우저 UI가 숨겨져있을 때 사람들이 브라우저 설정에 쉽게 액세스 할 수 없으므로 PWA 모드로 더 많은 것을 직접 노출해야 할 수도 있습니다. 글꼴 크기 변경, 밝은 모드와 어두운 모드 사이의 전환, 북마크, 공유, 탭 등과 같은 기능에는 인앱 대안이 필요할 수 있습니다.
플랫폼에 적합한 기능
웹 앱에는 제자리를 벗어난 느낌이 들기 때문에 원하지 않는 기능이 있지만 PWA에서 원할 수도 있습니다. 좋은 예는 바닥 내비게이션 바가 있습니다.이 내비게이션 막대는 쉽게 도달 할 수 있지만 웹 사이트에서는 드물기 때문에 기본 모바일 앱에서 일반적입니다.
사람들은 때때로 웹 사이트를 인쇄하지만 앱을 거의 인쇄하지 않습니다. PWA 모드에서 인쇄 버튼과 같은 기능이 숨겨져야하는지 고려하십시오.
프롬프트를 설치하십시오
일반적인 성가심은 사용자가 이미 사이트를 설치했을 때 PWA가 나타나는 사이트를 설치하라는 프롬프트입니다. 이상적으로는 브라우저가 PWA가 올바르게 구성되지만 모든 브라우저가 그렇지는 않으면 자체의 설치 프롬프트를 제공합니다. MDN은 PWA 설치를 트리거하기 위해 사용자 정의 버튼을 만드는 환상적인 안내서를 가지고 있지만 우리의 요구에 맞지 않을 수 있습니다.
미디어 쿼리로 설치 프롬프트를 숨기거나 JavaScript로 현재 디스플레이 모드를 감지하고 처음에는 팝업을 포기하여 사물을 향상시킬 수 있습니다.
우리는 이것을 재사용 가능한 유틸리티 클래스로 설정하여 앱을 PWA로 설치할 때 표시하고 싶지 않은 것은 쉽게 숨겨 질 수 있습니다.
/* Utility class to hide elements in PWA mode */
.hide-in-pwa {
display: block;
}
@media (display-mode: standalone), (display-mode: minimal-ui) {
.hide-in-pwa {
display: none !important;
}
}
그런 다음 HTML에서 :
우리는 또한 앞에서 논의한 것처럼 PWA에있을 때만 요소를 보여줄 수 있도록 반대를 수행하고 유틸리티 클래스를 만들 수 있습니다.
범위의 전략적 사용 및 시작 URL
사이트에서 콘텐츠를 숨기는 또 다른 방법은 scope 그리고 start_url 속성. 이것들은 우리가 논의한대로 미디어 쿼리를 사용하지 않지만 사이트가 PWA로 설치되어 있는지 여부에 따라 다른 컨텐츠를 제시하는 방법으로 간주되어야합니다.
다음은 이러한 특성을 사용하는 매니페스트의 예입니다.
{ "name": "Example PWA","scope": "/dashboard/","start_url": "/dashboard/index.html","display": "standalone", "icons": [ { "src": "icon.png", "sizes": "192x192", "type": "image/png" } ] }
scope 여기 PWA의 최상위 레벨을 정의합니다. 사용자가 PWA 범위를 남기면 여전히 앱과 같은 인터페이스가 있지만 브라우저 UI 요소에 액세스 할 수 있습니다. 여전히 PWA의 일부가되고 싶지만 반드시 최적화되거나 필요한 고려 사항을 제시하는 앱의 특정 부분이있는 경우 유용 할 수 있습니다.
start_url 사용자가 응용 프로그램을 열 때 제시된 URL을 정의합니다. 예를 들어, 앱에 마케팅 컨텐츠가있는 경우에 유용합니다. example.com 그리고 대시 보드 example.com/dashboard/index.html. PWA로 앱을 설치 한 사람들은 마케팅 컨텐츠가 필요하지 않으므로 start_url 에게 /dashboard/index.html 따라서 앱은 PWA를 열면 해당 페이지에서 시작됩니다.
향상된 전환
보기 전환은 웹에서 익숙하지 않고 제자리를 벗어나고 약간의 가드를 느낄 수 있지만 기본 애플리케이션의 일반적인 기능입니다. 관련 CSS를 적절하게 래핑하여 PWA 전용 뷰 전환을 설정할 수 있습니다.
@media (display-mode: standalone) {
@view-transition {
navigation: auto;
}
}
당신이 정말 야심 찬 경우, 디스플레이 모드에 대한 검사를 기기의 검사 및/또는 필요에 따라 사용하는 브라우저와 짝을 이루어 PWA로 실행될 때 기본 설계 시스템과 더 밀접하게 맞도록 사이트의 설계를 완전히 조정할 수도 있습니다.
브라우저 지원 및 테스트
디스플레이 모드 미디어 쿼리에 대한 브라우저 지원은 훌륭하고 광범위합니다. 그러나 주목할 가치가 있습니다 Firefox에는 PWA 지원이 없습니다Android 용 Firefox는 PWA 만 표시합니다 browser 모드이므로 필요한 고려 사항을 작성해야합니다. 고맙게도 진보적 인 향상은 우리 편입니다. PWA 또는 이러한 미디어 쿼리에 대한 지원이없는 브라우저를 다루고 있다면 우리는 우아한 열화.
모든 장치와 브라우저가 다르게 처리하기 때문에 PWA 테스트가 어려울 수 있습니다. 각 디스플레이 모드는 모든 브라우저와 OS 조합에서 약간 다르게 작동합니다.
불행히도, 나는 이것과 관련하여 당신에게 제공 할은 총알이 없습니다. 브라우저에는 테스트를위한 디스플레이 모드를 시뮬레이션하는 편리한 방법이 없으므로 다른 장치, 브라우저 및 운영 체제에서 PWA를 테스트하여 모든 것이 어디에서나 작동하는지 확인해야합니다.
요약
PWA를 사용하는 것은 브라우저에서 웹 앱을 사용하는 것과 근본적으로 다른 경험이므로 고려해야합니다. display-mode 미디어 쿼리는 설치 및 디스플레이 컨텍스트에 지능적으로 응답하는 진정으로 적응적인 진보적 인 웹 앱을 만들 수있는 강력한 방법을 제공합니다. 이 쿼리를 활용하면 다음을 수행 할 수 있습니다.
- 중복 설치 프롬프트를 숨기십시오 이미 앱을 설치 한 사용자를 위해
- 적절한 내비게이션 보조제를 제공하십시오 브라우저 컨트롤을 사용할 수없는 경우
- 컨텐츠 및 기능을 조정합니다 다른 상황에서 사용자 기대치를 일치시키기 위해
- 더 많은 원시 느낌의 경험을 만듭니다 플랫폼 컨벤션을 존중합니다
- 경험을 점진적으로 향상시킵니다 헌신적 인 사용자를 위해.
PWA가 계속 성숙함에 따라 웹에서 진정으로 설득력있는 앱 경험을 만드는 데 신중한 구현과 맞춤화가 점점 더 중요해질 것입니다. 더 많은 정보와 PWA 팁과 요령을 원한다면 Ankita Masand의 “진보적 인 웹 응용 프로그램에 대한 광범위한 안내서”를 확인하십시오.
SmashingMag에 대한 추가 독서
(GG, YK)
Post Comment