PWACompat - 모든 브라우저용 웹 앱 매니페스트

웹 앱을 설계하고 코드와 서비스 워커를 작성하고 마지막으로 웹 앱 매니페스트를 추가하여 사용자 기기에 앱이 '설치'될 때 어떻게 동작해야 하는지 설명했습니다. 여기에는 휴대전화의 런처나 앱 전환기와 같이 사용할 고해상도 아이콘, 사용자의 홈 화면에서 웹 앱을 열 때 사용할 수 있는 웹 앱이 포함됩니다.

대다수의 브라우저가 웹 앱 매니페스트를 준수하지만 모든 브라우저가 지정된 모든 값을 로드하거나 준수하는 것은 아닙니다. 웹 앱 매니페스트를 가져와서 다양한 크기, 파비콘, 시작 모드, 색상 등의 아이콘에 관련된 meta 또는 link 태그를 자동으로 삽입하는 라이브러리인 PWACompat을 입력합니다.

PWACompat은 웹 앱 매니페스트를 가져와 표준 및 비표준 메타, 링크 등의 태그를 추가합니다.
PWACompat은 웹 앱 매니페스트를 가져와 표준 및 비표준 메타, 링크 등의 태그를 추가합니다.

따라서 더 이상 수많은 표준 태그, 비표준 태그 (예: <link rel="icon" ... />, <meta name="orientation" ... />)를 페이지에 추가할 필요가 없습니다. iOS 홈 화면 애플리케이션의 경우 PWACompat이 스플래시 화면을 동적으로 생성하므로 다양한 화면 크기마다 스플래시 화면을 생성할 필요가 없습니다.

PWACompat에서 생성된 Emojityper용 iOS 스플래시 화면

PWACompat 사용

PWACompat을 사용하려면 모든 페이지에서 웹 앱 매니페스트에 연결해야 합니다.

<link rel="manifest" href="manifest.webmanifest" />

그런 다음 이 스크립트를 포함하거나 비동기 로드된 번들에 추가합니다.

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat은 매니페스트 파일을 가져와서 사용자가 휴대기기인지 데스크톱인지에 관계없이 사용자의 브라우저에 필요한 작업을 실행합니다.

검색 색인 생성을 위해 다음과 같이 고화질 바로가기 아이콘을 하나 이상 추가하는 것이 좋습니다.

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

자세한 내용은 권장사항을 참조하세요.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

심층 뉴스

지원되는 브라우저에서 PWACompat은 실제로 어떤 기능을 하나요? PWACompat이 웹 앱 매니페스트를 로드하고 다음을 실행합니다.

  • 매니페스트의 모든 아이콘에 대한 메타 아이콘 태그를 만듭니다 (예: 파비콘의 경우, 이전 브라우저).
  • 다양한 브라우저 (예: iOS, WebKit/Chromium 포크 등)를 위한 대체 메타 태그를 만들어 웹 앱이 열리는 방식을 설명합니다.
  • 매니페스트에 따라 테마 색상 설정

Safari의 경우 PWACompat도 다음을 실행합니다.

  • 표시 모드 standalone, fullscreen 또는 minimal-uiapple-mobile-web-app-capable (Chrome 없이 열 때)를 설정합니다.
  • apple-touch-icon 이미지를 만들어 매니페스트 배경을 투명한 아이콘에 추가합니다. 그렇지 않으면 iOS에서 투명도를 검은색으로 렌더링합니다.
  • Chromium 기반 브라우저에서 생성된 스플래시 이미지와 거의 일치하는 동적 스플래시 이미지를 만듭니다.

브라우저 지원에 더 많이 기여하거나 도움을 받으려면 GitHub에서 PWACompat을 사용하세요.

사용해 보기

PWACompat은 Airhorer, v8.dev, Emojityper에서 제공됩니다. 사이트의 헤더 HTML은 간단할 수 있습니다. 매니페스트를 지정하기만 하면 PWACompat가 나머지를 처리합니다.

📢🤣🎉