웹 사이트 / 웹 페이지를 설치 가능한 프로그레시브 웹 앱으로 변환하는 방법을 생각하고 계십니까? 

이 튜토리얼에서는 HTML5 기반 게임을 Android 또는 iOS 장치에 설치할 수 있는 설치 가능한 웹 애플리케이션으로 변환합니다.

이 고전적인 사이먼 게임을 만들었습니다. 정말 간단하지만 중독성이 뛰어납니다. 이 저장소를 포크하여 자신의 것으로 만들거나 추가 개선 사항을 제안 할 수 있습니다.

PWA는 무엇입니까? 

프로그레시브 웹 앱 (PWA)은 기본 앱처럼 느껴지고 보이는 앱을 빌드하는 데 필요한 모바일 웹 애플리케이션 개발 기술 세트입니다. 웹 스택 (JS, HTML 및 CSS)을 사용하는 프로그레시브 웹 앱은 네이티브 앱과 관련된 풍부한 기능과 부드러운 사용자 경험을 결합합니다. 간단히 말해서 PWA는 네이티브 앱 풍미가 있는 웹 앱입니다. 설치 후 사용자가 장치의 홈 화면에서 아이콘을 클릭하면 웹 사이트로 바로 이동합니다. 

PWA의 가장 좋은 기능 중 하나는 기본 앱과 같은 사용자 장치에 설치할 수 있으며 오프라인 모드에서도 작동한다는 것입니다.

취해야 할 단계-

• 서비스 워커 파일을 만듭니다.
• 기능이 지원되는지 확인하려면 기본 문서를 업데이트하십시오.
• 앱 메타 데이터에 대한 manifest.json을 만듭니다.
• Chrome 개발 도구를 사용하여 앱을 디버그합니다.

1. Service worker 

프로젝트의 루트 디렉터리에 service-worker.js 파일을 만듭니다. 캐시 저장소에 정적 콘텐츠를 저장하는 데 도움이 되도록 루트 디렉터리에 저장하는 것이 중요합니다. mp3, mp4, 비디오와 같은 캐시 저장소에 거의 모든 종류의 미디어를 저장할 수 있습니까? 그리고 분명히 정적 파일 HTML, CSS 및 JS.

// Installing service worker
const CACHE_NAME  = 'Simon-game';

/* Add relative URL of all the static content you want to store in
 * cache storage (this will help us use our app offline)*/
let resourcesToCache = ["./", "./img/game.png", "./game.js", "./styles.css"];

self.addEventListener("install", e=>{
    e.waitUntil(
        caches.open(CACHE_NAME).then(cache =>{
            return cache.addAll(resourcesToCache);
        })
    );
});

참고 : CACHE_NAME const를 자신의 앱 이름으로 변경하십시오. 

이벤트 리스너 두 개 더 추가-

// Cache and return requests
self.addEventListener("fetch", e=>{
    e.respondWith(
        caches.match(e.request).then(response=>{
            return response || fetch(e.request);
        })
    );
});

// Update a service worker
const cacheWhitelist = ['Simon-game'];
self.addEventListener('activate', event => {
    event.waitUntil(
      caches.keys().then(cacheNames => {
        return Promise.all(
          cacheNames.map(cacheName => {
            if (cacheWhitelist.indexOf(cacheName) === -1) {
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });

참고 : cacheWhiteList 변수를 자신의 앱 이름으로 바꿉니다. 

2. 가용성 확인 (index.html 업데이트) 

정적 웹 사이트의 경우 기본 HTML 문서를 업데이트하여 서비스 워커의 가용성을 확인하고 service-worker.js 파일을 사용하여 앱을 등록합니다.

  <script>
    if('serviceWorker' in navigator){
      navigator.serviceWorker.register('/service-worker.js');
    } else {
      console.log("Service worker is not supported");
    }
  </script>

3. manifest.json 파일 생성 

manifest.json 파일을 생성합니다.이 파일을 기본 HTML 문서에 연결해야 합니다.

<link rel="manifest" href="manifest.json">

이제 이 파일에는 앱 이름, 아이콘 참조, 앱을 열 때 열리는 URL 등 앱에 대한 메타 데이터가 포함됩니다.

{
    "name": "Simon Game",
    "short_name": "Simon Game",
    "start_url": "/",
    "background_color": "#FFDCB5",
    "theme_color": "#1E003D",
    "icons": [
        {
            "src": "img/512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "img/192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ],
    "display": "standalone",
    "orientation":"portrait"
}

매니페스트에 위 코드를 복사 / 붙여 넣기하고 앱 세부 정보를 변경합니다. 장치 화면 크기가 다르기 때문에 단일 아이콘을 참조하거나 여러 크기의 아이콘을 사용할 수 있습니다.

4. 개발 도구를 사용하여 디버그 

이제 크롬 개발 도구 (ctrl + shirt + i)를 열고 애플리케이션 탭을 클릭하여 서비스 워커와 매니페스트 파일이 브라우저에서 감지되는지 확인합니다.

아래에서 볼 수 있듯이 앱의 로고와 이름이 표시됩니다.

background_color 속성은 스플래시 화면 색상을 설정하고 theme_color는 알림 표시 줄을 설정합니다.

Lighthouse 탭에서 앱이 PWA 표준을 충족하는지 확인하고 보고서 생성을 클릭 할 수도 있습니다.

이것은 또한 iPhone / Apple 사용자를 위해 이 라인을 추가하는 것과 같이 잊을 수 있는 것들을 추가하는 데 도움이 될 것입니다.

<link rel="apple-touch-icon" href="img/game.png"/>

BOOM, 우리는 끝났습니다! 웹 사이트 / 게임을 PWA로 성공적으로 변환했습니다.

장치에 설치하는 방법? 

크롬에서는 URL 표시 줄에 이 작은 추가 아이콘이 있어 기기에 앱을 설치하라는 메시지가 표시됩니다.

휴대 기기에서는 메시지가 표시됩니다 (Chrome).

그렇지 않은 경우 오른쪽 상단의 점 3 개를 클릭하면 "앱 설치"옵션이 나타납니다.

Android에 완벽하게 설치되었습니다.

https://dev.to/zippytyro/how-to-convert-any-website-webpage-into-an-installable-progressive-web-app-pwa-59ai