iOS에서 "홈 화면에 추가"는 PWACompat를 사용하는 것이 좋을 것 같아 (2018/10 시점)
소개
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 하면 움직이도록 하고 있습니다.
참고
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 하면 움직이도록 하고 있습니다.
참고
{
"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"
}
<!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>
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest" />
오. 추가되었습니다.
그리고는 「홈에 추가」를 누르면 데스크탑에 아이콘이 되어 있을 것입니다.
시작하면 브라우저의 막대가 없어져야합니다.
출처
React의 tutorial에 조금 손을 넣은 것을 둡니다.
npm i → npm run build → npm start 하면 움직이도록 하고 있습니다.
참고
Reference
이 문제에 관하여(iOS에서 "홈 화면에 추가"는 PWACompat를 사용하는 것이 좋을 것 같아 (2018/10 시점)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uzresk/items/6e20f846c48738718d40텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
