Hands on! PWA + Azure workshop 후기

한국 마이크로소프트 사옥에서 진행한 Hands on! PWA + Azure workshop에 다녀왔다. 마이크로소프트 사옥은 굉장히 전망이 좋다!

첫번째 세션은 조은님의 PWA 세션. 처음에 PWA에 대해 설명을 해주셨는데 예전에 남기신 블로그 글을 토대로 설명해주셨다.(블로그 링크는 아래)

pwa를 구성하는 기술들

내 나름대로 위 블로그 내용을 요약 해보면 PWA는 딱 정해진 규칙이 없으며 공식적으로 “이 기술을 반드시 사용하세요” 라고 하는 것은 현재까지는 존재하지 않는다. PWA는 웹의 사용자의 사용경험을 더 좋게 만들기 위한 기술의 집약체이다.

전통적으로 PWA에서 중요한 기술은 Service Worker와 Web App Manifest가 있다.

먼저 Service Worker는 백그라운드에서 동작하는 Worker이며 특정 도메인을 기준으로 설치된다. Service Woker에 대표적인 기능은 Offline 지원이다. Offline이 지원은 Offline 상태에서만 좋은 것은 아니며 서버가 불안정하거나 유저 네트워가 불안정한 상황에서도 불필요한 서버 리퀘스트를 줄일 수 있기 때문에 사용자에게 더 나은 사용성을 제공할 수 있다.

다음으로 Web App Manifest는 이 웹 앱의 모양이 어떤 것인 지 보여주기 위한 설정 파일이다. Web App Manifest는 PWA 웹기술 집합의 한 부분이며 Add to Homescreen 배너를 노출시키는 것이 가능하여 사용자가 앱스토어 없이 디바이스 홈화면에 웹사이트 설치를 가능하게 해준다.

MDN의 Web App Manifest

PWA를 가장 잘 구현한 대표적인 웹앱인 mobile.twitter.com 을 예시로 살펴보면 PWA에 대해 좀 더 쉽게 접근할 수 있다.

Web App Manifest를 사용하여 Add to Homescreen 배너를 노출시킨 모습이다.

설치를 진행하면 바탕화면에 아래 사진과 같이 아이콘이 생성된다.

Service Worker을 이용하여 Offline을 지원하는 것을 알 수 있다.

Web App Manifest에서 어떠한 설정을 하였는지 알 수 있다.

참고로 Service Worker를 구현할 때 아래와 같은 라이브러리를 사용할 수도 있다.

https://developers.google.com/web/tools/workbox

cli로 설치 가능하다.

Azure는 정확히는 잘 모르겠다… 주어진 시간이 많지 않았던 것도 있고 워크샵의 목적 자체도 GitHub Actions를 통해 Azure로 배포하는 사이클을 한번 돌려보는 것의 의의가 있었기 때문에 Azure와 GitHub Actions 자체에 대한 설명은 거의 없었다. 빠른 시간 안의 사이클을 돌려야 하기 때문에 조금 아쉬운 부분이었다. 실제로 많은 분들이 따라가지 못했고 많은 질문들도 쏟아져 나왔다. 일단 과정 자체를 전부 따라가고 사이클을 한번 돌리는데 성공했다는것에 의의를 두는 것이 맞겠다.

최종 결과물은 아래 사진과 같이 push 또는 pull request에 반응하여 GitHub Actions에서 CI/CD(빌드 및 테스트 자동화 / 배포 자동화)절차가 진행되고 애저 블롭 저장소로 자동 배포된다.

자세한 사항은 아래 깃허브 레퍼지토리에 docs 폴더를 보는 것이 명확하다.

https://github.com/progyu/pwa-workshop