PWA로 출퇴근 기록 시스템 개발하기 (2019 HTML5 Conf Seoul)
•
1 like•791 views
HTML5 Conference Seoul 2019에서 발표한 내용입니다.
More Related Content
What's hot
What's hot (20)
Similar to PWA로 출퇴근 기록 시스템 개발하기 (2019 HTML5 Conf Seoul)
Similar to PWA로 출퇴근 기록 시스템 개발하기 (2019 HTML5 Conf Seoul) (20)
PWA로 출퇴근 기록 시스템 개발하기 (2019 HTML5 Conf Seoul)
- 1. 출퇴근 기록 시스템 PWA로 개발하기 HTML5 Conf 신권철 @FINDA kwoncheol@finda.co.kr 출퇴근 기록 시스템 PWA로 개발하기 HTML5 Conf 신권철 @FINDA kwoncheol@finda.co.kr
- 2. • 어쩌다 PWA • PWA, 이것만은 알고 개발하자 • Offline Mode , Cache, Notification 💡 아래 내용들을 다룰 거예요
- 3. 어쩌다 PWA 3 / 72
- 7. “법적으로 유효한 형태의 기록을 남겨야 합니다”
- 8. 슬랙봇을 이용해서 요렇게 만들어 보는건 어때요? CPO 1차 후보 - Slack 사진출처: 핀다 채용페이지
- 9. 매일 아침 6시, 오후 12시 클릭~ Broadcasting~
- 10. 노무사: 어뷰징은 안돼요~ 원격근무 아닐 때는 회사 내부에서만 등록할 수 있어야 합니다~
- 11. Click! Slack server API Server Slack Server IP…사용자 IP 지구 어딘가에 있을… 🌏 Wifi IP 체크로 해결하려 했는데…
- 12. 권철님이 프론트엔드 엔지니어니까 웹앱으로 요렇게 만들어 봐도 좋겠네요~ CPO 2차 후보 : 웹앱
- 13. “그럼 매번 브라우저로 접속해야 하는건가여? 흐으음…” 우려의 목소리 1
- 14. “이거 깜빡하는 사람 많을 듯 ㅎㅎ” 우려의 목소리 2
- 15. PWA로 할게요 3차 후보 PWA 1분소개 : PWA
- 16. PWA (Progressive Web App) • 진보된 웹 애플리케이션 • 유저와의 관계를 점진적으로 발전시킬 수 있는 웹 애플리케이션
- 17. • Multi platforms (안드로이드 / IOS + 데스크탑) • Offline 지원 ⚡ • Install (홈화면에 추가) 🏠 • Cache 💵 • Push Notification 💡 PWA가 제공하는 기능
- 18. “그럼 매번 브라우저로 접속해야 하는건가여? 흐으음…” 우려의 목소리 1 • Multi platforms (안드로이드 / IOS + 데스크탑) • Install (홈화면에 추가) 🏠 해결 ! “이거 깜빡하는 사람 많을 듯 ㅎㅎ” 우려의 목소리 2 • Push Notification 💡 해결 !
- 19. PWA 개발시작 19 / 72
- 20. Install -> Offline ->Cache -> Notification
- 22. 2019.8.19 PWA 출퇴근 기록 시스템 Earlybird 🕊 베타런칭 PWA라 하기 부끄럽다…
- 24. 여기서 잠깐! PWA 개발을 시작하기 전에 꼭 이해해야 할 것☝
- 25. PWA 입문자 10명 중 9명이 맞닥뜨릴 문제
- 26. 배포를 했는데 업데이트 적용이 안돼요 🤔
- 27. 왜?... “배포가 제대로 안된거 아냐?” “강력새로고침 해봐!”
- 28. PWA는 새로운 버전을 배포해도 변경사항이 곧바로 적용되지 않음
- 29. Q. 그럼 언제 적용돼요?
- 30. 1. 브라우저 내에 해당 PWA를 실행중인 모든 탭이 종료됐을 때 2. 특정시간이 흐른 뒤 (기본값: 24시간) 둘 중 하나를 만족해야한다
- 33. Browser Server Service Worker 요청 요청 응답응답 (Proxy server 역할)
- 34. Service Worker 1. Cache 관리 2. Notification 관리
- 35. 브라우저 X_ Notification Token: NEKOT_YM 캐쉬전략: Network First Tab 1 Tab 2 mypwa.co.kr mypwa.co.kr Service worker
- 36. 브라우저 X_ Tab 1 Tab 2 새로고침! mypwa.co.kr mypwa.co.kr Notification Token: NEKOT_YM 캐쉬전략: Network First Service worker
- 37. 브라우저 X_ Tab 1 Tab 2 Notification Token: MY_NEW_TOKEN 캐쉬전략: Lady First mypwa.co.kr mypwa.co.kr Notification Token: NEKOT_YM 캐쉬전략: Network First Service workerNew Service worker
- 43. Service Worker 이제 일 시작하려는데 먼저 캐쉬해둘만한 거 없소? aka. precache
- 46. API 응답도 캐쉬해보자 🎥 45 / 72
- 47. 캐쉬된 요청들 응답 상세정보
- 48. 요청을 가로챌 경로 Regex로 등록 캐쉬에 넣는다 어떤 Method의 요청을 가로챌지
- 49. GET 요청만 Cache할 수 있다! https://w3c.github.io/ServiceWorker/#cache-put
- 50. 💡 Notification 49 / 72
- 51. iOS는 푸쉬알림 미지원 참고1 (단점1)
- 52. 브라우저가 실행되고 있는 상태에서만 수신 가능 참고2 (단점2)
- 54. 권한 승인권한 요청 토큰 저장 토큰발급 Firebase (Firestore) 53 / 72
- 55. 🕊 알림수신 및 OS로 전달 알림발송 알림발송 (Optional) 추가 동작 Firebase (messaging)
- 56. 와! 알림이 온다! 2개나 오네?...
- 58. Chrome Opera Samsung Firefox Token : EMO… Token : ARE… Token : GNU… Token : XOF…
- 59. User의 Notification token는 Unique하도록 관리 1. 마지막으로 접속한 브라우저로 알림이 온다. 2. 토큰 저장시 브라우저 정보를 저장하고 유저에게 물어본다. “어느 브라우저로 받으실래여?”
- 60. 유사한 문제 하나 소개 얘기 나온김에…
- 63. 브라우저마다 사용자 경험이 다르다. PWA의 가장 큰 한계 하고싶은 말
- 65. 정리
- 66. • 페이지 로딩에 필요한 파일을 사전에 Cache • API 요청도 Cache PWA는 빠르다
- 67. • Push Notification 💡 • 홈화면에 Install PWA는 친절하다 iOS는 아직 덜 친절
- 68. • 브라우저마다 지원 범위가 다르다 • 브라우저가 종료되면 아무것도 할 수 없다. PWA는 완벽하지 않다
- 70. 발표는 여기까지
- 72. 감사합니다