PWA 설치가능한 상태로 만들기
웹 앱의 품질을 측정해 시각화하여 보여주는 크롬 익스텐션. 그리고 추가적으로 pwa로 동작 가능한지, 불가능하다면 무엇이 부족한지까지 알려줍니다. lighthouse 설치하기
- 사용방법은 설치 후에 개발자도구에서 Lighthouse 항목을 찾아 generate reports를 누르면 됨
report를 보면 중간 pwa항목에 installable항목 3개가 있습니다. 이 3개 항목을 만족시키면 설치가능한 앱으로 동작하게 됩니다.
근데 우리 서비스에는 처음에 프로젝트를 생성할때부터 pwa항목을 체크했기 때문에 서비스워커가 등록되어있음
front > src > main.js, registerServiceWorker.js 파일 참고하고
아래 글은 그냥 이런거구나하고 한번 쓱 보면 좋을듯
PWA는 서비스 워커 기술을 기반으로 하고 있고, PWA의 기능은 서비스 워커가 있음으로써 가능하다고 봐도 무방합니다.
Service Worker에 대해서 요약 소개하자면 다음과 같다.
-
캐싱 기능 제공 -> 오프라인 상태에서도 애플리케이션 사용을 가능하게 해 준다.(웹 페이지에 접속할 수 있게 해 준다.)
-
백그라운드 동기화 처리를 해준다.(오프라인으로 인해 완료하지 못한 처리를 온라인이 되면 마저 처리한다.)
-
대신, https 환경(혹은 local)에서만 실행 가능하다.
생성된 프로젝트의 index.html에 다음과 같이 입력해줍니다.
public > index.html
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('sw.js')
.then(reg => {
console.log('Service worker registered! 😎', reg);
})
.catch(err => {
console.log('😥 Service worker registration failed: ', err);
});
});
}
</script>public > sw.js 생성
const cacheName = "cache";
const precacheResources = ["/", "index.html", "favicon.ico"];
self.addEventListener("install", event => {
console.log("Service worker install event!");
event.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(precacheResources);
})
);
});
self.addEventListener("activate", () => {
console.log("Service worker activate event!");
});
self.addEventListener("fetch", event => {
console.log("Fetch intercepted for:", event.request.url);
event.respondWith(
caches.match(event.request).then(cachedResponse => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
})
);
});-
register -> install -> activate-> fetch
-
register : 서비스워커를 설치 하려면 서비스워커를 등록해야 된다.
-
install : 해당페이지를 처음 방문할 때 install 이벤트 발생, 페이지 자산을 캐시하는 곳
-
activate : 설치된 서비스 워커가 제어권을 갖은 상태, push 및 sync와 같은 함수가 처리할 준비가 됨.
-
fetch : 서비스워커를 설치 완료 후 캐시된 응답을 반환받음.
그리고 웹페이지에 접속하면 console창에 다음과 같은 메시지가 뜨는 것을 확인할 수 있습니다.
pwa에서 manifest는 앱 설정 파일의 역할을 합니다.(properties와 비슷하다고 보시면 될 것 같네요) 여기서 아이콘을 무엇을 사용할지, 로딩시 배경화면은 어떤색을 할지, 풀스크린으로 앱을 띄울지 웹페이지처럼 띄울지, 앱의 이름 등등을 다 설정하도록 되어있습니다.
public > manifest.json
{
"name": "pwa tutorial",
"short_name": "pwa tutorial",
"start_url": ".",
"display": "fullscreen",
"theme_color": "#FF9800",
"background_color": "#FF9800",
"icons": [
{
"src": "themiso-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "themiso-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
그리고 index.html 파일에 아래 내용 추가 index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="manifest" href="./manifest.json">
<link rel="icon" sizes="192x192" href="./themiso-icon-192x192.png">
<link rel="icon" sizes="512x512" href="./themiso-icon-512x512.png">
<meta name="mobile-web-app-capable" content="yes">
...
</head>
<body>
...위의 내용 말도고 다른 meta정보도 추가할 수 있습니다. 우리 프로젝트의 build된 index.html파일을 참고하면 좋은 예시가 될듯합니다.
이 상태에서 https환경만 만들어주면 설치가능한 상태로 동작함
나머지 캐싱이나 푸시알림기능 등은 조금 더 회의후에 다시 공유하는 것으로!