PWA 사용해서 미니프로젝트 만들기

✅ PWA의 세가지 요건

1. manifest.json
2. service-worker.js
3. HTTPS 도메인에서 제공

• PWA를 하기 전에 간단하게 동작하는 미니쇼핑몰 앱을 만들어 보았다(드림코딩 참고함)

• https://ngrok.com/
  ngrok 에서 임시 도메인을 만든다.
  NTLIFY 나 깃허브를 사용해도 된다. 임시 도메인을 만드는 이유는 내 로컬이 아닌 외부에서 사용시에도 이 페이지가 보일 수 있도록 하기 위함이다. 심지어 vscode 가 Live Server로 수정되기 때문에 협업할때 좋은 도구가 될 수 있다. 다만 무료버전이기때문에 시간의 제약이 있긴하다.

• 가장 중요한것은 ngrok을 통해 HTTP가 아닌 보안이 강화된 HTTPS 도메인을 사용한다는 점이다.

• https://www.pwabuilder.com/
  PWABuilder에서 본격적으로 PWA를 만든다.
  ngrok에서 만든 임시 도메인을 처음에 기입하면, 평가를 해주는데, 사용해보니 매끄럽진않다. 아마 리뉴얼 되면서 편의성이 조금 떨어진 것 같다.
• 그래도 여기서, 위의 PWA세가지 요건을 모두 간편하게 만들어주기 때문에 내 파일에 추가 하기만 하면 된다.
• 추가 할 것 : 이미지파일, manifest.json, service-worker.js

출처: 드림코딩