갑자기 현재 운영중인 사이트에 바로가기 생성하기 버튼을 만들고 모바일 웹에서 클릭시 메인 화면에 어플처럼 바로가기를 만들어 줘라 라는 지시를 받게 되었고,
관련하여 구글링 하던중 PWA라는 기술을 발견하게되었습니다.
간략히 PWA의 정의를 보면 다음과 같습니다.
Progressive Web App란 , HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술로 만드는 앱입니다. 그 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋습니다.
세상의 그 어떤 웹사이트라도 PWA로 바꿀 수 있으며 네이티브 앱을 개발하는 것은 상당히 어렵지만, PWA는 훨씬 더 빠르게 개발할 수 있습니다.
또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있습니다.
처음 접하는 기술이었으나, 구글링 및 레퍼런스를 확인해보니 대략 감이 잡혔고,
내가 해야할 적용해야할 내용은 Add to Home Screen라고 불리우고 있었다.
사용자가 홈 화면에 바로가기를 추가해서 한 번의 탭으로 웹 앱에 접근하도록 합니다.
세 가지의 주요 구성요소가 존재한다.
보안 연결(HTTPS):
PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 합니다.
- https나 localhost에서만 동작한다.
서비스 워커 등록(service worker):
서비스 작업자는 백그라운드에서 실행되는 스크립트입니다.
- 서비스 워커가 필요하다.
웹 앱 매니페스트 파일 제공(manifest file, 설정 파일):
manifest.json 파일이며, 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있다.
name,discription,icon,display,start-url등을 지정할 수 있다.
====================================================================================================================================================
====================================================================================================================================================
1. 매니페스트 파일 생성
ex)
{
"name": "앱이름",
"icons": [
{
"src": "/images/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
], // 메인 이미지(앱 아이콘)
"display": "fullscreen", // 앱이 어떻게 디스플레이 될 지 정의
"start_url": "/index.html", // 앱 실행 시 로딩되는 첫 페이지의 경로
// 부가
"description": "앱 설명",
"background_color": "white", // 앱 화면, 화면 배경색
"short_name": "short name", // 전체 이름을 표시할 공간이 없을 때 사용되는 값, 15자 미만으로 작성 권장
"theme_color": "#FFBC00", // OS 디스플레이(모바일 상태 바 등)에 나타나는 색
"orientation": "portrait" // 화면 방향
}
pwa의 스플래시 이미지는 background_color/ theme_color / 512x512 icon / short_name을 이용하여 자동으로 만들어지며, IOS에는 기본방식으로는 적용되지않는다
2. main.html에 매니페스트 파일을 등록합니다.
<!-- index.html -->
<html>
<head>
<!-- safari의 경우 webmanifest의 icon 컬렉션을 무시하므로 html에 별도로 명시해줘야 함 -->
<link rel="apple-touch-icon" href="/images/icon-192.png" />
<link rel="apple-touch-icon" href="/images/icon-512.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<!-- 생략 -->
</head>
</html>
3. service Worker 등록
// sw.js 파일
self.addEventListener("fetch", e => {});
이 정도만 작성해도 동작합니다
/////////////////////////////////////////////////////////
<html>
<head>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<script>
(function () {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
})();
</script>
</body>
</html>
====================================================================================================================================================
세가지 구성요소를 생성한 후 사이트의 메인페이지에 load service worker의 reg 등록을 성공하고,
window.addEventListener('beforeinstallprompt',function(e){} 을 이용하여 바로가기가 없다면 바로가기 생성아이콘을 화면에 나타나게하고 클릭시 온클릭 이벤트를 걸어
메인화면에 바로가기를 추가할 수 있도록 진행하였다.
아래 내용은 금일 기술 적용시에 참고한 출처 입니다.
카카오 기술 블로그 [https://fe-developers.kakaoent.com/2023/230202-a2hs/]
====================================================================================================================================================
디자인된 모달 내의 버튼을 눌렀을 때 홈 화면에 추가되도록 하려면 어떻게 해야 할까요?
커스텀 UI에 A2HS 기능 추가하기
브라우저는 사이트가 A2HS 기능을 제공하기에 적합한 경우 beforeinstallprompt 이벤트를 트리거 합니다.
이벤트 핸들러에 전달되는 이벤트 객체에는 설치 메서드가 포함되어 있어서 커스텀 UI를 통해 웹 앱을 설치하는 것이 가능합니다.
기본 html, js만 사용하는 예제는 MDN에 잘 나와 있어서 react를 기준으로 작성해보겠습니다.
const useA2HS = () => {
/**
* prompt가 실행될 수 있는 환경인 경우에만 모달창을 나타내기 위해
* 변경 시 리렌더링을 발생시키기 위해서 useRef가 아닌 useState를 사용하였습니다.
*/
const [deferredPrompt, setDeferredPrompt] = useState(null);
useEffect(() => {
const handler = (e) => {
e.preventDefault();
setDeferredPrompt(e);
};
// beforeinstallprompt에 이벤트 핸들러를 등록합니다.
window.addEventListener('beforeinstallprompt', handler);
return () => {
window.removeEventListener('beforeinstallprompt', handler);
};
}, []);
const installApp = () => {
// 설치 메서드 실행
deferredPrompt?.prompt();
deferredPrompt?.userChoice.then(choiceResult => {
clearPrompt();
});
};
const clearPrompt = () => {
setDeferredPrompt(null);
};
return { deferredPrompt, install, clearPrompt };
}
export default function A2HS() {
const { deferredPrompt, install, clearPrompt } = useA2HS();
return deferredPrompt ? (
<div>
<button onClick={clearPrompt}>취소</button>
<button onClick={install}>홈 화면에 추가</button>
</div>
) : null
}
beforeinstallprompt 이벤트 핸들러에 전달되는 이벤트 객체를 변수에 할당해두고,
이벤트 객체 속성 중 prompt 메서드를 버튼 이벤트에 등록해 두면 홈 화면에 웹 앱 바로가기 추가가 가능합니다.
====================================================================================================================================================
'관련_배경_지식' 카테고리의 다른 글
| 도커(Docker)란 (0) | 2023.11.10 |
|---|---|
| 데스옵스란 (0) | 2023.11.10 |
| 네이티브앱_모바일웹_하이브리드_PWA 차이 (0) | 2023.11.10 |
| UUID는 절대 겹치지 않을까? (0) | 2023.11.09 |
| Jira 와 Confluence (1) | 2023.11.08 |
