본문 바로가기

IT/Web

PWA 개발하기 - Progressive Web App 제작

PWA 개발하기 - Progressive Web App 제작

 

PWA (Progressive Progressive Web App) 만들어 보기에 도전해 본다.

아래 codelabs 에서 순서대로 따라하면, 자신의 첫번째 PWA를 만들 수 있도록 자세히 안내하고 있다.

이 이상의 설명은 없으니, 일단 따라해 보자.

 

https://codelabs.developers.google.com/codelabs/your-first-pwapp/

 

Your First Progressive Web App

Take a moment and put your phone into airplane mode, and try running some of your favorite apps. In almost all cases, they provide a fairly robust offline experience. Users expect that robust experience from their apps. And the web should be no different.

codelabs.developers.google.com

날씨를 보여주는 PWA 가 완성이 되는데, 설치된 최종 결과물을 보여주면 아래 그림과 같다.

날씨 PWA 제작 결과

순서대로 따라하면 되는데, 내가 따라한 흔적들을 순서대로 캡쳐해서 아래에 남겨둔다.

나중에라도 다시 할때나, 혹은 다른 분들이 자신의 작업이 맞는지 확인하는데는 도움이 될 듯 하다.

시간나면, 주석정도는 달아 두면 더더 좋을 텐데.

중간에 https://glitch.com/ 사이트를 활용하게 되는데, 간단한 앱을 제작해서 배포하기에 엄청 편리한 플랫폼이다.

 

Glitch: The friendly community where everyone builds the web

Simple, powerful, free tools to create and use millions of apps.

glitch.com

나중에 한번 사이트 내용을 소개하는 글도 만들면 좋겠네. 

PWA 제작하는 작업 결과는 아래에 그림 순서대로 확인하면서 따라하면 된다. 위에 소개한 codelab 내용을 찬찬히 읽어보면서 하면 어렵지 않다. 응용해서 자신가 필요한 실제 응용을 개발하는 것이 어렵겠지 따라하기는 쉽다.