홈 화면에 추가를 PWA에 통합하는 방법
게시 됨: 2021-05-13목차
홈 화면에 추가(줄여서 A2HS)는 사용자의 홈 화면에서 앱 실행을 포함하는 완전한 기본 앱 경험을 허용하므로 Progressive Web Apps 경험의 기본입니다.
추천 자료: PWA 대 네이티브: 어느 것이 더 잘 어울리나요?
PWA의 중요한 기능이므로 통합하지 않을 수 없습니다. 그래서 오늘 SimiCart PWA 튜토리얼에서 A2HS가 필요한 이유, 사용 방법 및 PWA를 만드는 방법을 살펴보겠습니다. 모바일과 데스크탑 모두에서 A2HS 지원.
지원 브라우저
A2HS는 브라우저 간의 보편적인 기능에 매우 가깝습니다. 현재 모바일 Chrome/Android Webview(버전 31 이상), Android용 Opera(버전 32 이상) 및 Android용 Firefox(버전 58 이상)에서 현재 지원됩니다. 자세한 내용은 CanIUse 웹사이트를 확인하세요.
PWA 홈 화면에 추가 작동 중
PWA 홈 화면에 추가가 활성화된(A2HS 활성화) 사이트를 발견하면 사용자 인터페이스 하단에 사이트를 홈 화면에 추가할 수 있음을 알리는 배너를 볼 수 있습니다.
이것은 특정 설치 가능 기준이 충족될 때 발생하는 기본 브라우저 제공 설치 프로모션 입니다. 알림 자체는 사용자가 웹사이트를 처음 방문할 때 표시되고 약 90일 후에 다시 표시됩니다.
모바일에서 웹 앱 A2HS를 활성화하는 방법
설치 가능 기준
웹 앱을 설치할 수 있으려면 다음을 충족해야 합니다.
- 아직 설치되어 있지 않습니다
- 사용자 참여 휴리스틱 충족(사용자는 최소 30초 동안 페이지와 상호 작용해야 함)
- 보안(HTTPS) 연결에서 제공
- 서비스 워커를 등록하다
- 적절하게 구성된 매니페스트 파일이 있어야 합니다.
- 그리고 가장 중요한 것은 사용 중인 브라우저가
beforeinstallprompt이벤트를 지원해야 한다는 것입니다.beforeinstallprompt이벤트를 지원하는 전체 브라우저 목록은 CanIUse를 참조하십시오.
시작하기
데모 목적으로 이 기사에서는 설치 가능한 PWA를 만들기 위한 기반으로 create-react-app 프로젝트를 사용합니다. create-react-app은 단일 페이지 애플리케이션을 생성하는 간단한 React 명령입니다.
참고 : create-react-app 에는 최소 node >= 10.16 및 npm >= 5.6이 필요합니다.
Node.js 명령 프롬프트 를 열고 다음 명령을 실행합니다.
npx 생성 반응 앱 pwa-a2hs cd pwa-a2hs 실 시작
매니페스트 파일 만들기
일반적으로 웹 앱의 루트 폴더 깊숙이 위치한 웹 매니페스트는 앱 제목, 다른 아이콘의 경로, 배경색 등과 같은 웹사이트에 필요한 모든 정보를 JSON 형식으로 포함하는 파일입니다. 웹 매니페스트 파일은 사용자 경험의 다양한 단계에서 웹 앱을 적절하게 표시할 수 있도록 하므로 기능적인 웹 앱에 매우 중요합니다.
매니페스트 생성기를 사용하여 앱의 크기에 최적화된 아이콘과 함께 파일을 자동으로 생성하는 것이 좋습니다.
매니페스트 생성기를 사용하면 다음과 같은 콘텐츠가 포함된 manifest.zip 파일을 만들 수 있습니다.
manifest.webmanifest 는 다음과 같아야 합니다.
{
"theme_color": "#f69435",
"background_color": "#f69435",
"디스플레이": "독립형",
"범위": "/",
"start_url": ".",
"이름": "PWA-A2HS",
"short_name": "PWA",
"설명": "A2HS 기능용 데모 PWA",
"아이콘": [
{
"src": "/icon-192x192.png",
"크기": "192x192",
"유형": "이미지/png"
},
{
"src": "/icon-256x256.png",
"크기": "256x256",
"유형": "이미지/png"
},
{
"src": "/icon-384x384.png",
"크기": "384x384",
"유형": "이미지/png"
},
{
"src": "/icon-512x512.png",
"크기": "512x512",
"유형": "이미지/png"
}
]
} 이제 생성된 매니페스트 파일의 내용을 /public/ 폴더에 복사하고 이 폴더에서 기본 manifest.json 파일을 삭제하고 다음 단계로 이동합니다.
HTML을 매니페스트에 연결
매니페스트 파일 구성이 완료되면 웹사이트의 루트 디렉터리에 저장하여 나중에 상대 경로(예: /manifest.webmanifest )로 호출할 수 있도록 합니다. 매니페스트 파일 설정을 마치려면 HTML 헤더에서 참조하세요. ( \pwa-a2hs\public\index.html ), 다음과 같습니다.
<머리>
<메타 문자 집합="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<메타 이름="viewport" content="width=device-width, initial-scale=1" />
<메타 이름="테마 색상" content="#000000" />
<메타
이름="설명"
content="create-react-app을 사용하여 만든 웹 사이트"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<title>PWA A2HS</title>
</head>설치 흐름 설정
웹 앱 매니페스트가 웹 앱을 설치 가능하게 만드는 데 필요한 전부는 아닙니다. 웹 앱을 설치 가능하게 만들고 PWA에 한 걸음 더 가깝게 만들기 위해 몇 가지 추가 구성이 필요합니다.
서비스 워커 생성
서비스 워커는 네트워크 요청을 가로채고 PWA로 유명한 다양한 앱과 유사한 기능을 활성화합니다. pwa-a2hs\public 에 service-worker.js 파일을 만들고 다음 내용으로 채웁니다.
self.addEventListener('페치', 함수(이벤트) {
event.respondWith(
caches.match(event.request).then(함수(응답) {
응답을 반환 || 가져오기(event.request);
})
);
}); 여기에서 fetch 이벤트를 수신 대기해야 합니다. 홈 화면에 추가 경험에 중요 하기 때문입니다. 그렇지 않으면 React 앱이 설치 가능성 요구 사항을 충족할 수 없습니다.
서비스 워커 등록
그리고 service-worker.js 가 작동하려면 index.html 의 <body> 끝에 이 코드를 삽입하여 등록해야 합니다.
//인덱스.html
<스크립트>
if (네비게이터의 'serviceWorker') {
// 루트에서 호스팅되는 서비스 워커를 등록합니다.
// 기본 범위를 사용하는 사이트.
내비게이터.serviceWorker.register('/service-worker.js').then(함수(등록) {
console.log('서비스 워커 등록 성공:', registration);
}, /*캐치*/ 함수(오류) {
console.log('서비스 워커 등록 실패:', 오류);
});
} 또 다른 {
console.log('서비스 워커는 지원하지 않습니다.');
}
</스크립트>테스트할 시간입니다!
이제 PWA를 설치할 수 있습니다. 프런트엔드를 새로 고치면 작업 표시줄(데스크톱) 또는 작은 알림 배너(모바일)에 설치 버튼이 표시되어야 합니다.
설치 를 클릭하면 바탕 화면/홈 화면에 다음과 같은 PWA 바로 가기가 생성됩니다.
A2HS 경험에 더 많은 것이 있습니다
위의 내용은 브라우저에서 제공하는 설치 프로모션을 사용하여 기본적으로 홈 화면에 추가한 것입니다. 한 단계 더 나아가기 위해 beforeinstallprompt 이벤트를 저장 하여 PWA 설치를 홍보하기 위한 다양한 패턴으로 설치 흐름을 수동으로 트리거할 수도 있습니다.
사용자 지정 설치 버튼을 사용하면 앱 설치의 이점을 얻을 특정 사용자를 대상으로 하여 사용자의 여정을 방해하는 것을 방지할 수 있습니다. 그리고 프로모션 UI를 어디에 어디에 배치할지 신중하게 생각하면 PWA가 경쟁사보다 더 잘할 수 있고 결과적으로 훨씬 더 나은 앱 전환율을 얻을 수 있습니다.