웹 앱을 설계하고 코드와 서비스 워커를 작성한 후 웹 앱 매니페스트에서 웹 앱 매니페스트가 어떻게 작동해야 하는지를 설명합니다. '설치됨' 설정될 수 있습니다. 여기에는 다음과 같이 사용할 수 있는 고해상도 아이콘 등이 포함됩니다. 가 또는 휴대전화에서 웹 앱을 열 때 웹 앱이 시작되는 방식을 이동할 수 있습니다.
많은 브라우저가 웹 앱 매니페스트를 준수하지만, 모든 브라우저가 웹 앱 매니페스트를 로드하거나 준수하는 것은 아닙니다.
지정할 수 있습니다. 웹 앱 매니페스트를 가져와 다양한 크기의 아이콘, favicon, 시작 모드, 색상 등에 관한 관련 meta 또는 link 태그를 자동으로 삽입하는 라이브러리인 PWACompat을 입력합니다.
즉, 더 이상 페이지에 수많은 표준 및 비표준 태그(예: <link rel="icon" ... /> 또는 <meta name="orientation" ... />)를 추가할 필요가 없습니다. iOS 홈 화면 애플리케이션의 경우 PWACompat이 스플래시 화면을 동적으로 만들기 때문에 다양한 화면 크기마다 스플래시 화면을 생성할 필요가 없습니다.
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은 웹 앱 매니페스트를 로드하고 다음을 실행합니다.
- 매니페스트의 모든 아이콘에 대한 메타 아이콘 태그를 만듭니다(예: favicon, 이전 브라우저).
- 웹 앱이 열리는 방식을 설명하는 다양한 브라우저(예: iOS, WebKit/Chromium 포크 등)의 대체 메타 태그를 만듭니다.
- 매니페스트에 따라 테마 색상을 설정합니다.
Safari의 경우 PWACompat도 다음을 충족해야 합니다.
- 디스플레이 모드
standalone,fullscreen또는minimal-ui에apple-mobile-web-app-capable(브라우저 크롬 없이 열림)를 설정합니다. - 투명한 아이콘에 매니페스트 배경을 추가하여
apple-touch-icon이미지를 만듭니다. 그러지 않으면 iOS에서 투명성을 검은색으로 렌더링합니다. - Chromium 기반용으로 생성된 스플래시 이미지와 거의 일치하는 동적 스플래시 이미지를 생성합니다. 브라우저
더 많은 도움을 주거나 추가로 브라우저 지원을 받으려는 경우 PWACompat은 GitHub에 있습니다.
사용해 보기
PWACompat은 Airhorner, v8.dev 및 Emojityper: 사이트의 헤더 HTML은 간단할 수 있습니다. 매니페스트를 지정하고 나머지는 PWACompat에서 처리하도록 하면 됩니다.
📢🤣🎉