Progressive Web App을 사용해서 네이티브 앱과 같은 사용 경험

  • 기존의 스펙들을 이용해서 네이티브앱과 웹앱을 합침
  • 어느 브라우저를 선택하든 상관 없이 점진적 기능 개선을 통해 모든 사용자에게 적합
  • 반응형을 지원해서 PC, Tablet, Mobile 지원 가능
  • Push알람을 지원
  • 업데이트 버튼을 누를 필요없이 항상 최신버전 지원

    방법

  • 시작하기
    • Step 1
      • App Shell 캐시하기(더 좋은 경험)
      • 캐시는 Service Worker!
        • 서버에 main.js 요청
        • Service Worker가 가로챈다
          • 캐시에 main.js 없다
            • 다시 요청
          • 있다.
            • 캐시본 사용
            • 새로운 버전 자원 있다는걸 Service Worker가 알아차림
            • main.js를 캐시해 보내줌
        • Cache-First Stragey
        • Service-worker.js 파일에 캐시하고 싶은 자원을 리스트로 넣는다.
        • create-react-app이 빌드해시값을 웹팩에서 알아서 달아줌
      • sw-precache
        • 빌드기반의 리소스 프리캐싱 노드 모듈
        • npm run build를 할 때마다 리소스에 해쉬값을 더해서 자동으로 버저닝 해준다.
          • 새로운 자원이 나왓을 때 최신 상태로 캐싱할 수 있도록
      • 브라우저 기본 캐시 vs 서비스 워크
        • First visit 첫 방문. 당연히 캐시 X
        • Cleared 캐시되었더라도, 비우거나 백신으로 제거됨
      • Step 2
        • 홈 화면에서 추가해서 앱처럼 쓰기
      • 지원 브라우저
        • Chrome 40+
        • Firefox 44+
        • Opera 27+
        • Samsung WebBrowser 4+
        • Apple Safari X
        • macOS 푸시 알람 세부 지원
        • Edge 16+
    • 2단계
      • Web Push
        • FCM을 사용
        • 만든 프로그램과 웹앱을
        • 포어그라운드 푸시
          • 앱이 실행 중일때
        • 백그라운드 푸시
    • 후기
      • 삽질 1 해결
        • 최신 자원이 감지되면 location.realod()로 강제 새로고침
      • 삽질 2 해결
        • sw-precache-webpack-plugin은 2MB가 넘는 파일은 제외하고 캐시한다.
      • 삽질 3
        • 서비스워크는 url을 통해 자원ㅇ르 캐시한다. 필요한 자원이 URL접근이 가능하도록 서버를 세팅해야한다.
    • PWA를 사용하려는 당신에게
      • PWA를 택하는 이유를 고민해보세요.
      • 서비스워커의 라이프사이클을 이해
      • 토이프로젝트/사내 서비스에 선 적용해보세요.