소개

React의 튜토리얼에서 여러가지 놀고 있었습니다만, iOS(iPhone)의 Safari에서는 「홈 화면에 추가」를 눌러도 Android와 같이 아이콘이라든지 잘 설정해 주지 않는 것 같습니다.
PWACompat 을 사용하면 iOS에서 움직이도록 태그를 여러가지 추가해 줄 것 같아서 해 보았습니다.

주의

2018/10월 시점의 정보입니다. iOS에서의 대응이 진행되면 불필요해질 가능성이 높다고 생각됩니다.

설정 방법

manifest.json은 자습서로 남아 있습니다.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

index.html에 PWACompat를 통합합니다. 추가는 두 가지입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Test</title>
    <link rel="manifest" href="manifest.json">
    <link rel="manifest" href="manifest.webmanifest" />
</head>
<body>
<div id="app"/>
<script type="text/javascript" src="/index.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"
    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
    crossorigin="anonymous"></script>
</body>
</html>

반대로 manifest.webmanifest가 404 오류가 발생하기 때문에이 순서는 중요합니다.

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

결과

오. 추가되었습니다.



그리고는 「홈에 추가」를 누르면 데스크탑에 아이콘이 되어 있을 것입니다.



시작하면 브라우저의 막대가 없어져야합니다.

출처

React의 tutorial에 조금 손을 넣은 것을 둡니다.
npm i → npm run build → npm start 하면 움직이도록 하고 있습니다.

참고

ReactTutorial

PWACompat