게시글

강좌22 - HTML&DOM - 2년 전 등록 / 일 년 전 수정

PWA 시작하기

manifest.json과 serviceworker
조회수:
0

안녕하세요. 이번 시간에는 구글과 모질라가 강력하게 미는 기술인 PWA에 대해 알아보겠습니다. PWA는 Progressive Web App의 두문자어입니다. 뭔가 이름은 거창한데요. 실제로도 매우 놀라운 기술입니다. 여러분의 웹사이트가 모바일에서 앱처럼 동작합니다. 심지어 오프라인에서도 돌아가고요. Push 알림을 보낼 수도 있습니다. 네이티브 앱처럼 동작하는 것이죠. 물론 아직은 네이티브 앱보다 기능적인 제약이 있습니다. PWA 소개 

제 블로그도 PWA 기술을 도입하여 오프라인에서도 돌아가고 Push 알림도 보내고 모바일에서 설치할 수도 있습니다. 이를 가능케 하는 것은 ServiceWorker라는 워커입니다. 지난 시간에 웹 워커를 배웠었죠. 서비스워커도 워커의 일종입니다. 브라우저 쓰레드와는 별도로 돌아갑니다.

undefined

제 블로그 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/ 에서 다양한 서비스 워커 예제 코드들을 확인하실 수 있습니다. 캐싱에 관한 것은 이 슬라이드 쉐어 를 보시면 좋습니다. 푸쉬 알람에 대해서는 캡틴판교님이 잘 정리하신 글이 있습니다. 푸쉬 알람 추가로 푸쉬 알람에 필요한 키를 발급받는 방법 입니다.

undefined

이렇게 푸쉬 알람을 적용해 모바일과 데스크탑에서 사용가능합니다. 아이폰은 안 되는것 같습니다 ㅠㅠ

구글이 PWA 실습 에 관한 글을 잘 정리해두었습니다. 한글로도 번역이 되어있네요.

애플도 곧 PWA를 도입한다는 소식이 들리네요. 하지만 확인해보니 역시나 폐쇄적인 애플답게 반쪽짜리 PWA라서 그렇게 유용하지는 않을 것 같습니다. 마이크로소프트 Edge도 곧 도입할거 같네요. PWA가 하이브리드 앱처럼 모바일 패러다임에 영향을 줄 수 있을지 궁금해집니다.

블로그에서 자세하게 소개하지는 못하겠지만 PWA 외에도 AMP (Accelerated Mobile Page)라는 기술이 있습니다. 모바일에서 웹을 매우 빠르게 띄워주는 기술입니다. 찾아보시길 바랍니다. 저는 react랑 AMP 연동에 실패해서 블로그에 적용하지는 못했습니다.(적용했다면 제 블로그가 이렇게 느리진 않았을텐데...)

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

6개의 댓글이 있습니다.
5달 전
PWA를 사용하고 싶어서 웹앱 프로젝트를 기획하고 있는데요, PWA가 데스크톱과 모바일 모두 적용되는 반응형앱으로 알고있습니다. 개인적으로 VueJS와 Spring을 사용하여 프로젝트를 구상하고 싶은데 데스크톱 브라우저를 기반으로 개발을 하고 PWA를 적용하면 모바일에서는 모바일 크기로 자동으로 변경되어 적용되는 건가요? ZeroCho님 블로그를 모바일에서 봤을때 적절하게 UI가 나오는건 PWA를 적용해서 나오는건지, 아니면 따로 모바일에 맞게 UI를 수정을 하셨는지 궁금합니다. 만약 PWA가 아닌 모바일UI작업을 따로 하셨다면 VueJS를 사용한 데스크톱 브라우저 웹에서 모바일UI를 적용하려면 어떻게 처리하는게 좋을까요?
5달 전
PWA는 UI랑 아무런 관련이 없습니다. CSS로 수정하세요.
6달 전
코드랩을 따라하고 있는데 lighthouse에서 Does not redirect HTTP traffic to HTTPS 부분에서 통과를 못하고 있네요.
웹 개발자라 아니라 코드랩따라하기도 버거운 상황인데 힌트좀 주실 수 있을까요?
코드랩은 https환경의 서버에서 따라 하긴 했습니다.
6달 전
아, http로 사이트에 접속했을 때 자동으로 https로 바꿔줘야 합니다. 서버쪽에서 작업이 필요합니다.(아파치, 엔진엑스, 톰캣, 노드 등)
6달 전
아래 댓글이 수정/삭제가 되지 않아 다시 질문글 올립니다!
안녕하세요. PWA에 관심갖는 초보 직장인 입니다. 개발방법에 몇가지 여쭤보고 싶은게 있어서 연락드립니다.
1. PWA를 사용하여 개발할 경우, 서버쪽 코딩은 보통 어떻게 진행되나요? eclips+java로 진행하게 되나요? 아니면 어떻게 진행되는지 궁금합니다.
2. PWA 개발 진행시 개발툴은 보통 어떠 어떠한 것들이 사용되는지 궁금합니다.
3. DB는 서버쪽 코딩과 연결하여 mysql같은걸 그대로 사용하면 되는지요..?
4. pwa예제 사이트를 보면 모두 보여주기만 하는 사이트라서 그런데, 해당 사이트에서 crud가 가능한지 궁금합니다..
예제라던지 책이 많이 없어서 전반적인 이해가 부족한것 같아가지구요..
6달 전
1. PWA는 오로지 프론트에서만 하는 기술입니다. 서버는 자유입니다.
2. 프론트엔드 개발툴 그대로 쓰시면 됩니다.
3. 역시 기존과 동일합니다.
4. PWA는 서버가 아니라 프론트라서 CRUD는 서버에서 하시는 겁니다.
6달 전
안녕하세요. PWA에 관심갖는 초보 직장인 입니다. 개발방법에 몇가지 여쭤보고 싶은게 있어서 연락드립니다. PWA를 사용하여 개발할 경우, 서버쪽 코딩은 보통 어떻게 진행되나요? eclips+java로 진행하게 되나요? 아니면 어떻게 진행되는지 궁금합니다. 그리고 PWA 개발 진행시 개발툴은 보통 어떠 어떠한 것들이 사용되는지 궁금합니다. 예제라던지 책이 많이 없어서 전반적인 이해가 부족한것 같아가지구요..
일 년 전
"브라우저 쓰레드와는 별로도 돌아갑니다."에서 '별도로'가 '별로도'로 오타나있네요.
일 년 전
감사합니다!
2년 전
"기본적으로 가로모드로 실행되게 하고 싶다면 orientation: lanscape ..."에서 lanscape 오타인가요?
2년 전
귀신같이 찾아주셨네요 ㅎㅎ landscape 오타입니다 ㅠㅠ
2년 전
아싸! 포인트~