PWA 프로그레시브웹앱

PWA 공부 순서

0. 샘플 사이트 테스트해보기

https://www.pokedex.org

1. 잘 정리된 ppt및 블로그를 보면서 감을 잡는다.

프로그레시브 웹앱이란? - Progressive Web Apps

https://www.slideshare.net/GihyoJoshuaJang/the-future-of-web-progressive-web-app

현실적 PWA

https://www.slideshare.net/netil/pwa-65378869

2018년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScript

https://d2.naver.com/helloworld/5644368

서비스 워커(Service Worker) 정체가 뭐니?

https://b.limminho.com/archives/1384

서비스 워커: 소개(google)

https://developers.google.com/web/fundamentals/primers/service-workers/

브라우저별 서비스워커 지원 상황

https://jakearchibald.github.io/isserviceworkerready/

프로그레시브 웹앱(PWA) 푸시 알람 A to Z

https://joshua1988.github.io/web-development/pwa/pwa-push-noti-guide/

푸시에서 사용하는 FCM 과 GCM 차이

https://joshua1988.github.io/web-development/fcm-gcm-difference/

Push Companion

https://web-push-codelab.glitch.me/

2. 주요 골격이 되는 최소한의 소스로 한번 돌려본다.

3번으로 가능.

3. 최소한의 소스 + 주요기능 단위별로 코드를 작성해서 테스트한다.(캐시, 푸시)

웹 앱에 푸시 알림 추가(소스가 단계별로 잘 정리되어 있다.)

https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=ko

node.js, FCM, 웹앱(서비스워커) 으로 푸시 구현하기.

https://medium.com/@sejongdekang/node-js-fcm-%EC%9B%B9%EC%95%B1-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9B%8C%EC%BB%A4-%EC%9C%BC%EB%A1%9C-%ED%91%B8%EC%8B%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-43c49b761dba

캐시 관련된 사이트??

4. 여러 샘플 코드

Vue, 어디까지 설치해봤니? (vue init pwa)

http://labs.brandi.co.kr/2018/05/03/kwakjs.html

pwa-starter-kit

https://github.com/Polymer/pwa-starter-kit

여러분의 첫 Progressive Web App

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko

5. 배포

heroku

express/node.js 를 이용해 서버를 만들어 heroku에 올리는 방법

https://medium.com/@yoobi55/express-node-js-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EC%84%9C%EB%B2%84%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4-heroku%EC%97%90-%EC%98%AC%EB%A6%AC%EB%8A%94-%EB%B0%A9%EB%B2%95-3a5134fc8743

heroku page error log 확인

https://devcenter.heroku.com/articles/error-pages