점진적 웹 응용 프로그램(PWA)의 주요 특징 중 하나는 응용 프로그램의 유사성이다.기술적으로 말하자면, 당신의 응용 프로그램은 인터넷 브라우저에서 실행되지만, 그것을 보기 위해 노력해야 한다 — 느낌 — 본 컴퓨터 응용 프로그램과 마찬가지로 좋다.이것은 메인 화면에 설치, 사용자 정의 아이콘 추가, 주소 표시줄 비활성화 등을 포함한다.Android와 달리 Android의 많은 유사한 기능은 웹 응용 프로그램 목록이 자동으로 생성되고 iOS는 추가 HTML과 CSS 기교를 필요로 한다.PWA를 iOS의 원본 버전처럼 만드는 방법에 대한 7가지 조언이 있습니다.

1. 독립시키기

PWA를 iOS에서 별도의 응용 프로그램으로 실행할 수 있는 두 가지 방법이 있습니다(즉, 웹 브라우저 UI 컨트롤이 없는 새 창에서).첫 번째 방법은 HTML 코드의 헤드 요소 중 apple-mobile-web-app-capable 메타태그를 다음 코드와 함께 사용하는 것이다.

<meta name="apple-mobile-web-app-capable" content="yes">

두 번째 방법은 웹 응용 프로그램 목록의 display 속성을 standalone 로 설정하는 것이다.웹 응용 프로그램 목록의 예는 다음과 같다.

{
   "name": "Appscope",
   "display": "standalone",
   "icons": [{
      "src": "icons/icon-192.png",
      "sizes": "192x192"},
   {
      "src": "icons/icon-512.png",
      "sizes": "512x512"}
   ]
}

2. 사용자 정의 아이콘 추가

불행하게도 iOS는 웹 응용 프로그램 목록에 지정된 아이콘을 사용하지 않았습니다.반면 응용 프로그램의 모든 페이지에 사용자 정의 아이콘을 사용하려면 PNG 형식으로 아이콘을 제공하고 PWA의 루트 문서 폴더에 이름apple-touch-icon.png을 제공해야 합니다.
응용 프로그램의 단일 페이지에 특정 아이콘을 추가하려면 HTML 코드의 head 요소에서 다음 줄을 사용하십시오.

<link rel="apple-touch-icon" href="single-page-icon.png">

서로 다른 iOS 장치는 크기가 다른 메인 화면 아이콘을 사용합니다.특정 크기에 대한 아이콘을 지정하려면 링크 요소의 sizes 속성을 사용하십시오.장치의 권장 아이콘 크기에 대한 아이콘이 지정되어 있지 않으면 최소 크기가 권장 크기보다 큰 아이콘을 사용합니다.
다음 예는 애플Safari Web Content Guide에서 가장 흔히 볼 수 있는 iOS 장치의 크기를 지정한 것이다.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

돌이켜보면 iOS는 불투명한 아이콘이 필요합니다.아이콘의 모든 투명한 부분은 검은색으로 칠됩니다.

3. 사용자 정의 시작 화면 추가

다음 단계는 단조롭고 흰색의 시작 화면을 자신의 이미지로 대체하는 점진적인 네트워크 응용 프로그램을 로컬 응용 프로그램과 더욱 비슷하게 합니다.사용자 정의 시작 화면을 추가하려면 다음 링크 요소를 사용하십시오.

<link rel="apple-touch-startup-image" href="launch.png">

이 이미지를 표시하기 위해서는 응용 프로그램을 실행하는 장치의 크기와 같은 크기가 중요합니다.예를 들어 아이폰 X에서 작업하려면 launch.png 크기가 1125×2436픽셀이어야 한다.여기서 발생하는 문제는 해상도가 다른 iOS 장치가 여러 개 있다는 것이다. 불행하게도 우리는 크기가 다른 이미지에 대해 이 코드를 간단하게 여러 번 반복할 수 없다.반대로, 우리는 media 속성을 사용하여 어떤 시작 이미지가 어떤 장치에 사용되는지 지정해야 한다.
다음 코드를 PWA의 헤드 요소에 추가하여 서로 다른 iOS 장치의 사용자 정의 시작 화면을 지원합니다.

<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1125x2436.png">

<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-750x1334.png">

<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple-launch-1242x2208.png">

<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">

<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1668x2224.png">

<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-2048x2732.png">

PWA의 시작 화면을 설정하는 데 도움이 필요하면 AppscopeSplash Screen Generator를 참조하십시오.

시작 화면Appscope

4. 상태 표시줄 변경

검은색 반투명, 검은색 및 기본 상태 표시줄로 설정
PWA의 iOS 상태 표시줄 (스크린의 가장자리를 따라 시간과 배터리 상태를 표시하는 영역) 을 사용자 정의할 수도 있습니다.이를 위해서는 코드의head 요소에 apple-mobile-web-app-status-bar-style원 표시를 사용해야 합니다.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

불행하게도 상태 표시줄을 맞춤형으로 만드는 방법은 매우 제한적이지만 애플은 content 속성에 세 가지 다른 설정을 제공했다.

default 검은색 텍스트와 기호가 있는 흰색 상태막대를 생성합니다.

black 검은색 상태막대, 검은색 텍스트 및 기호를 생성하여 완전히 검은색으로 보입니다.상태 표시줄을 사용하지 않으면 상태 표시줄이 이렇게 됩니다.

black-translucent 흰색 텍스트와 기호를 생성하고 상태 표시줄의 배경색은 웹 응용 프로그램의 주체 요소와 같다.

5、간단명료한 이름을 지어주세요

PWA 제목이 주 화면의 시작 아이콘 아래에 표시됩니다.절단을 피하기 위해서, 이 제목은 12자를 초과해서는 안 됩니다. 최종적으로 사용된 문자의 너비(예를 들어 알파벳 w가 알파벳 i보다 넓음)에 따라 달라집니다. PWA의 원래 이름이 아이콘 아래에 맞지 않으면 이름의 짧은 버전을 지정할 수 있습니다.
PWA에 짧은 이름을 지정하는 방법 중 하나는 코드의 헤드 요소에서 apple-mobile-web-app-title 메타 태그와 다음 줄을 사용하는 것입니다.

<meta name="apple-mobile-web-app-title" content="Appscope">

또 다른 방법은 웹 응용 프로그램 목록에서 short_name 속성을 사용하는 것이다.웹 응용 프로그램 목록의 예는 다음과 같다.

{
   "name": "Little Alchemy 2",
   "short_name": "Alchemy 2",
   "icons": [{
      "src": "/public/icons/icon-192x192.png",
      "sizes": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "sizes": "512x512"}
   ]
}

6. 선택, 강조 표시 및 치수 비활성화

기본적으로 iOS 웹 브라우저는 본 프로그램의 텍스트와 링크에 상호작용을 추가합니다.그래서 당신의 PWA는 더욱 토박이처럼 느껴집니다 — 사이트나 파일 같지 않아요. — 이러한 효과를 비활성화할 수 있습니다.다음 소절은 세 가지 가장 흔히 볼 수 있는 영향 유형에 대한 것이다.

6.1. 텍스트 선택 해제

텍스트 선택 열기New York Times
대부분의 원본 iOS 응용 프로그램에서 텍스트 선택을 허용하지 않는 것처럼 PWA에서 이 기능을 비활성화할 수 있습니다.이를 위해 원치 않는 요소의 -webkit-user-select CSS 속성을 none 로 설정하십시오.텍스트 선택을 완전히 닫으려면 바디 요소에 속성을 지정합니다.

body {
   -webkit-user-select: none;
}

6.2. 강조 표시 해제

링크 강조 표시New York Times
iOS 웹 브라우저에서 링크를 클릭하면 요소 주위에 회색 상자가 나타납니다.이 효과를 비활성화하는 간단한 방법은 없지만 강조 표시 색상을 투명하게 변경하여 효과적으로 제거할 수 있습니다.PWA에 대해 이 작업을 수행하려면 필요한 요소의 -webkit-tap-highlight-color 속성을 transparent로 설정하거나 모든 요소의 링크를 강조 표시하지 않도록 바디 요소에 지정합니다.

body {
   -webkit-tap-highlight-color: transparent;
}

6.3. 세부 정보 색인 사용 안 함

링크 마크업 열기New York Times
iOS 브라우저에서 요소를 클릭하고 누르면 표시 메뉴가 열립니다(위 그림 참조).iOS에서 이 효과를 비활성화하려면 원하는 요소의 속성 -webkit-touch-callout 을 none 으로 설정합니다.마찬가지로 모든 요소의 효과를 비활성화하려면 속성을 body 요소에 지정합니다.

body {
   -webkit-touch-callout: none;
}

7, 클릭 효과 활성화

Little Alchemy 2의 클릭 효과(:active)
링크를 클릭하면 기본 회색 강조 표시를 사용하지 않고 클릭 효과를 추가할 수 있습니다.코드의 body 태그에 ontouchstart 속성을 포함하고 그 값을 비워 두면 링크와 다른 요소를 클릭하면 다음과 같이 표시됩니다.다음 코드를 사용하고 다른 것을 사용합니다: 서스펜션 및: 활성 스타일로 PWA에 가장 적합한 효과를 찾습니다.

<html>
   <head>
      ...
   </head>
   <body ontouchstart=””>
      ...
   </body>
</html>

본고는 최초Medium에 발표되었다.본체 응용 프로그램과 거의 비슷한 성능을 가진 진보된 인터넷 응용 프로그램의 좋은 예를 보고 싶다면 Appscope 를 보십시오.