프로그레시브 웹 앱에 Apple 터치 아이콘 추가
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
참고: 이 Codelab에서는 Chrome DevTools를 사용합니다. 아직 Chrome이 없다면 Chrome을 다운로드 합니다.
iOS용 Safari 사용자는 프로그레시브 웹 앱 (PWA) 을
홈 화면에 표시됩니다. PWA가 추가될 때 iOS 홈 화면에 표시되는 아이콘
Apple Touch 아이콘 을 탭하세요. 이 Codelab에서는 PWA에 Apple 터치 아이콘을 추가하는 방법을 보여줍니다. 또한
iOS 기기에 액세스할 수 있어야 합니다.
참고: iOS Safari 사용자는 홈 화면에 웹페이지를 추가할 수 있습니다. PWA일 필요는 없습니다. 실제로 이 Codelab에 사용된 예시 앱은 PWA가 아닙니다. 하지만 대부분의 경우 PWA는 사용자가 홈 화면에 추가하고 싶어 할 만한 종류의 앱입니다.
측정
새 탭에서 예시 앱을 엽니다.
수정할 리믹스 를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
사이트를 미리 보려면 앱 보기 를 누릅니다. 그런 다음
전체 화면
입니다.
예시 앱의 URL을 기록해 둡니다. https://example.glitch.me
와 같이 표시됩니다.
Chrome DevTools의 예제 앱에서 Lighthouse PWA 감사 를 실행합니다.
`Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
Lighthouse 탭을 클릭합니다.
카테고리 목록에서 프로그레시브 웹 앱 체크박스가 선택되어 있는지 확인합니다.
보고서 생성 버튼을 클릭합니다.
Lighthouse는 PWA 최적화 섹션에서 예시 앱이 유효한
Apple Touch 아이콘
<ph type="x-smartling-placeholder">
</ph>
<ph type="x-smartling-placeholder"></ph>
유효한 apple-touch-icon을 제공하지 않음 감사
iOS 홈 화면에 예시 앱 추가
Apple 터치 아이콘이 어떻게 더 세련된 사용자 환경을 제공하는지 보여주려면 먼저
Apple 터치 아이콘이 지정되지 않은 경우 예시 앱을 iOS 기기의 홈 화면에 추가할 수 있습니다.
iOS용 Safari를 엽니다.
예시 앱의 URL을 엽니다. 이는 https://example.glitch.me
와 같은 URL입니다.
설명하겠습니다
공유 >를 탭합니다.
홈 화면에 추가 이 옵션을 보려면 왼쪽으로 스와이프해야 할 수 있습니다.
추가 를 탭합니다.
사이트에서 Apple Touch 아이콘을 지정하지 않았으므로 iOS에서 사이트의 아이콘만 생성합니다.
추출해야 합니다.
<ph type="x-smartling-placeholder">
</ph>
<ph type="x-smartling-placeholder"></ph>
자동 생성된 홈 화면 아이콘입니다.
예시 앱에 Apple 터치 아이콘 추가
index.html
의 <head>
하단에서 <link rel="apple-touch-icon">
태그의 주석 처리를 삭제합니다.
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
iOS 홈 화면에 예시 앱 다시 추가
iOS 홈 화면에 예시 앱을 다시 추가해 봅니다. 이번에는 각 포드에 올바른 아이콘이
확인할 수 있습니다. Lighthouse로 페이지를 다시 감사하면
이제 유효한 apple-touch-icon
감사를 제공하지 않아 통과합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
<ph type="x-smartling-placeholder">
</ph>
<ph type="x-smartling-placeholder"> </ph>
<ph type="x-smartling-placeholder"></ph>
Apple 터치 아이콘입니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2019-08-26(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2019-08-26(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2019-08-26(UTC)"],[],[]]