지킬 블로그로 간단한 웹앱을 제작할때
첫번째로 필수적인것은 manifest.json이다. 이 파일은 스마틓폰이 이 사이트를 앱으로 인식하게 만든다.
두번째로 필수적인것은 아이콘인데, 웹이 앱처럼 동작하기 위해서
필수적이고 없으면 설치 팝업이 안뜬다.
세번째로 오프라인에서도 글을 볼수 있게 하는 서비스워커 (sw.js)를 등록하면 끝.
나는 깃허브 블로그를 Jekyll Minima를 커스텀해서 사용하고있고 간단하게 위의 방식대로 내 블로그를 웹앱으로 만들었다.
manifest.json과 sw.js 를 루트파일에 두었다.
// manifest.json
{
"name": "Sun's Blog",
"short_name": "GitBlog",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}// sw.js
self.addEventListener('fetch', function(event) {
// 브라우저가 '앱 설치' 버튼을 띄우기 위한 최소 요건입니다.
// 나중에 오프라인 모드를 구현하고 싶다면 여기에 캐싱 로직을 넣으면 됩니다.
event.respondWith(
fetch(event.request).catch(function() {
return new Response('인터넷 연결이 필요합니다.');
})
);
});
헤더에 스크립트를 넣고,
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function() {
console.log('Service Worker Registered');
});
}
</script>
첫 시도했을때 난 에러는 위 추가 파일들을 인식하지못한 부분인데
지킬은 기본적으로 .이나 _로 시작하는 파일, 그리고 특정 파일들을 무시한다. 따라서
_config.yml에 아래 내용을 추가하자.
# _config.yml
include:
- manifest.json
- sw.js
- icon-192.png
- icon-512.png