안녕하세요. 이번 시간에는 구글과 모질라가 강력하게 미는 기술인 PWA에 대해 알아보겠습니다. PWA는 Progressive Web App의 두문자어입니다. 뭔가 이름은 거창한데요. 실제로도 매우 놀라운 기술입니다. 여러분의 웹사이트가 모바일에서 앱처럼 동작합니다. 심지어 오프라인에서도 돌아가고요. Push 알림을 보낼 수도 있습니다. 네이티브 앱처럼 동작하는 것이죠. 물론 아직은 네이티브 앱보다 기능적인 제약이 있습니다. PWA 소개
제 블로그도 PWA 기술을 도입하여 오프라인에서도 돌아가고 Push 알림도 보내고 모바일에서 설치할 수도 있습니다. 이를 가능케 하는 것은 ServiceWorker라는 워커입니다. 지난 시간에 웹 워커를 배웠었죠. 서비스워커도 워커의 일종입니다. 브라우저 쓰레드와는 별도로 돌아갑니다.
제 블로그 PWA 앱의 모바일 시작 시 화면(스플래시 스크린)입니다. 아래에 소개하는 manifest.json에 따라서 저렇게 자동으로 만들어줍니다.
이번 PWA 강좌는 실습하기 어렵습니다. PWA 자체가 https를 요구하기도 하고 라이트하우스 와 체크리스트의 조건을 충족시켜야 브라우저를 통해 사이트 방문 시 "모바일 홈 화면에 설치하기" 버튼이 뜹니다. 그냥 이런게 있구나라는 정도만 알아두세요. 대신 최대한 관련 링크를 많이 제공하기 위해 노력했습니다. 최근에 다시 확인해 봤더니 제 블로그가 PWA가 적용이 될 때가 있고 안 될 때가 있더군요. 바로 3G 환경에서도 페이지가 빠르게 떠야한다는 다소 주관적인 조건 때문이었습니다. 이렇게 PWA로 가는 길은 멀고도 험난합니다.
PWA를 하기 위해서는 manifest.json이 필요합니다. 앱 설정 파일이라고 보셔도 됩니다. 앱 아이콘, 상단바 색상, 시작 스플래시 스크린 배경색상, 앱 이름, 전체화면 여부 등을 적습니다.
제 블로그의 manifest.json입니다. https://www.zerocho.com/manifest.json 이 주소에 있습니다.
{
short_name: 'ZeroCho Blog',
name: 'ZeroCho Blog',
icons: [
{
src: 'launcher-icon-1x.png',
type: 'image/png',
sizes: '48x48',
},
{
src: 'launcher-icon-2x.png',
type: 'image/png',
sizes: '96x96',
},
{
src: 'launcher-icon-3x.png',
type: 'image/png',
sizes: '144x144',
},
{
src: 'launcher-icon-4x.png',
type: 'image/png',
sizes: '192x192',
},
{
src: 'favicon.png',
type: 'image/png',
sizes: '1024x1024',
},
],
start_url: '/?launcher=true',
background_color: '#f1f2f7',
theme_color: '#dc143c',
display: 'fullscreen',
};아이콘은 기기 해상도별로 제공하고, start_url로 PWA로 접속한건지 일반 웹으로 접속한건지 구분합니다. background_color가 스플래시 스크린 배경색, theme_color가 상단바 색입니다. display가 fullscreen이라 전체화면으로 뜹니다. fullscreen 외에 standalone, browser이 있습니다. 기본적으로 가로모드로 실행되게 하고 싶다면 orientation: landscape를 넣어주면 됩니다.
manifest.json은 일반 웹에서 넣어줘도 됩니다. 모바일 크롬의 주소창 색이 theme_color로 바뀝니다.
manifest.json이 설정되었다면 <link rel="manifest" href="manifest.json경로" />로 연결해줍니다.
PWA의 조건 중 하나가 오프라인에서 페이지가 열려야한다는 것입니다. 무슨 말도 안 되는 소리냐 하시겠지만 PWA는 첫 방문 시 앱처럼 페이지들을 미리 다운받아 캐싱하기 때문에 두 번째 방문부터는 오프라인에서도 페이지가 열립니다. 하지만 이를 위해서는 서비스워커를 사용해야 합니다. 서비스워커를 사용하면 오프라인 페이지 외에도 푸시 알림, 오프라인 싱크 등의 기술을 사용할 수 있습니다. 캐시를 마음대로 조작할 수 있다는 것도 큰 장점입니다. 어떤 경우에는 네트워크에서 받아오고, 어떤 경우에는 캐시로부터 가져오는 등의 동작을 프로그래밍으로 조작할 수 있습니다. 심지어 네트워크랑 캐시 둘 다 열어서 더 빨리 가져오는 것을 쓰는 것도 가능하고, 캐시로부터 먼저 가져온 후 네트워크 요청과 다른 점이 있으면 업데이트하는 것도 가능합니다.
https://serviceworke.rs/ 에서 다양한 서비스 워커 예제 코드들을 확인하실 수 있습니다. 캐싱에 관한 것은 이 슬라이드 쉐어 를 보시면 좋습니다. 푸쉬 알람에 대해서는 캡틴판교님이 잘 정리하신 글이 있습니다. 푸쉬 알람 추가로 푸쉬 알람에 필요한 키를 발급받는 방법 입니다.
이렇게 푸쉬 알람을 적용해 모바일과 데스크탑에서 사용가능합니다. 아이폰은 안 되는것 같습니다 ㅠㅠ
구글이 PWA 실습 에 관한 글을 잘 정리해두었습니다. 한글로도 번역이 되어있네요.
애플도 곧 PWA를 도입한다는 소식이 들리네요. 하지만 확인해보니 역시나 폐쇄적인 애플답게 반쪽짜리 PWA라서 그렇게 유용하지는 않을 것 같습니다. 마이크로소프트 Edge도 곧 도입할거 같네요. PWA가 하이브리드 앱처럼 모바일 패러다임에 영향을 줄 수 있을지 궁금해집니다.
블로그에서 자세하게 소개하지는 못하겠지만 PWA 외에도 AMP (Accelerated Mobile Page)라는 기술이 있습니다. 모바일에서 웹을 매우 빠르게 띄워주는 기술입니다. 찾아보시길 바랍니다. 저는 react랑 AMP 연동에 실패해서 블로그에 적용하지는 못했습니다.(적용했다면 제 블로그가 이렇게 느리진 않았을텐데...)
익명
ZeroCho
