🎉 PWA

• 네이티브 앱처럼 사용할 수 있는 기술
• PWA안에 오프라인지원, A2HS 등등 기능들이 포함

Service Worker

• 오프라인, 푸시, 백그라운드 등등 기능을 지원
• 리소스 캐싱
• PWA의 핵심 파일

https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API

빠른로딩

외부에 있는 service-worker가 캐시역할을 해줘서 빠른로딩이 된다.

오프라인 지원

1. 데이터가 꺼졌을때 접속하면 특정 html 파일을 호출.
2. 라이브페이지기능
   • 데이터가 꺼지기 전에 캐시된 페이지가 호출
   • 구글링을 해보면 일부러 이 기능을 끄는 사람도 많은걸 봐서는 일반사용자는 선호하진 않는것같다.

A2HS (Add to Home Screen)

• 웹앱을 프로그램으로 따로 설치하는 기술
• 안드로이드, 웹 둘다 가능

푸시기능

아래 링크에 푸시기능이 있다.
https://github.com/mdn/serviceworker-cookbook/

아직 해보지는 않았지만 해볼예정

네이티브 앱처럼 사용가능

A2HS로 어플을 만들고 나서 실행시키면 네이티브앱처럼 작동
url에 접속했을때는 네이티브앱처럼 안되는데 따로 설정법이 있는지 확인해봐야함

🔧 설정

설정을 쉽게해주는 툴
https://www.pwabuilder.com/

📝 manifest.json

{
  "short_name": "이름",
  "name": "이름",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon",
      "purpose": "any"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "description": "설명",
  "scope": ".",
  "lang": "ko",
  "categories": ["utilities"]
}

icons.purpose : any maskable 둘중 하나 사용가능

• any : background color가 적용
• maskable : 이미지에 safezone이 생성되서 어플이 알아서 이미지에 배경색을 넣음

theme_color : splash screen에서 상단 표시줄 색상
background_color : splash screen에서 배경화면 (icons.purpose이 any일때만 동작)

적용해본 결과
제대로 만든 이미지라면 any, 대충만든 이미지면 maskable을 넣는게 좋을듯 하다.
스플래시 화면이 1초도 안되서 넘어가서 theme_color가 무슨색이든 신경쓸 시간이 없는것같다.

🚚 link태그 적용

<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

✨ service-worker 적용

---

리액트에서 적용

npx create-react-app my-app --template cra-template-pwa
이미 작성된 프로젝트에 적용하려면 다른 경로에 위 명령어로 프로젝트를 만들어서 아래파일만 가져온다.

• service-worker.js
• serviceWorkerRegistration.js

• index.js 파일에 아래 코드 추가

  import * as serviceWorkerRegistration from './serviceWorkerRegistration';
  serviceWorkerRegistration.register();

html에서 적용

https://velog.io/@sibiwol/PWA-%EB%A7%8C%EB%93%A4%EA%B8%B0

✅ 테스트

1. 개발자도구
2. Lighthouse
3. 페이지로드분석
   
   

🐛 주의사항

A2HS

1. 지원브라우저가 많지 않다.

   • https://caniuse.com/?search=PWA

2. 시크릿탭에서 작동하지 않는다.

   • 무슨이유인지는 모르겠다.

3. localhost, https에서만 작동한다.

   • 보안이슈때문이라고 한다.

4. 서브도메인 이슈

   • a.naver.com에서 설치를 하면 naver.com에서는 설치했는지 인식을 못한다.

참고자료
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
https://velog.io/@sibiwol/PWA-%EB%A7%8C%EB%93%A4%EA%B8%B0