PWA 초기화
■Step1：Index.html을 준비
index.html
<!-- index.html -->
<html>
<head>
<title>Hello PWA.</title>
<link rel="manifest" href="./manifest.json">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
■Step2：매니페스트
PWA에는 매니페스트 "manifest.json"이 필요하므로 준비합니다.
(manifest.json은 index.html에서 읽습니다)
manifest.json
{
"short_name": "PWA HELLO",
"name": "test01のPWA HELLO",
"start_url": "./?utm_source=homescreen",
"display": "standalone",
"icons": [{
"src": "./icon.png",
"type": "image/png",
"sizes": "192x192"
}],
"background_color": "#2196F3",
"orientation": "portrait"
}
■Setp3：아이콘 준비
192X192 크기의 아이콘을 준비합시다 (icon.png)
■Step4：실행(Android)
서버로 가서 HTTPS로 URL에 액세스하십시오.
액세스하면 "홈 화면에 PWA HELLO 추가"가 나오므로 그것을 선택하십시오
(틀림없이 "X"를 선택하면 추가 할 수 없습니다)
확인 대화 상자가 나타나면 "추가"
일반 앱과 마찬가지로 아이콘으로 등록됩니다.
아이콘을 실행하면
■Step4：실행(iOs)
서버로 가서 HTTPS로 URL에 액세스하십시오 (사파리 사용)
액세스가 끝나면 오른쪽 상단의 버튼을 누릅니다.
메뉴가 나타나면 '홈 화면에 추가'를 선택
확인 대화 상자가 나타나면 "추가"를 선택
무사하게 등록할 수 있었으므로, 이 아이콘으로부터 실행할 수 있습니다.
Reference
이 문제에 관하여(PWA 초기화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sanoh/items/430a50035d4dfab0de7d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
