2.6 적용하기

1. 프로젝트 폴더로 가져오기 2. HTML에 manifest 추가하기 2.1 manifest 파일 확인하기 2.2 index.html에 manifest 추가하기 3. HTML에 Service worker 등록 Snippet 추가하기 4. 오프라인 페이지 설정하기

1. 프로젝트 폴더로 가져오기

패키지를 다운로드하면 your_pwa.zip 파일이 다운로드된 것을 확인할 수 있는데 그 파일의 압축을 풀어줍니다. 압축을 풀면 아래와 같이 아이콘 이미지 파일이 담겨있는 폴더와 manifest.json 등의 파일들을 확인할 수 있습니다.

images 폴더와 manifest.json, pwabuilder-sw.js 파일을 프로젝트 폴더로 가져옵니다.

2. HTML에 manifest 추가하기

2.1 manifest 파일 확인하기

생성된 manifest.json 파일을 확인해 보니 name 이 null로 설정되어 있고, manifest options에서 작성했던 start_url 과 Orientation 이 없는 것을 확인할 수 있습니다.


{
  "dir": "auto",
  "display": "standalone",
  "name": "null",
  "short_name": "시간의 법칙",
  "lang": "ko",
  "theme_color": "none",
  "background_color": "none",
  "icons": [
    ...생략...
   ]
}

아래와 같이 수정하고 저장합니다.


{
  "dir": "auto",
  "display": "standalone",
  "name": "1만 시간의 법칙",
  "short_name": "시간의 법칙",
  "lang": "ko",
  "theme_color": "none",
  "background_color": "none",
  "start_url": "자신의 URL 또는 /index.html",
  "orientation": "portrait",
  "icons": [
    {
      ...생략...
    }
  ]
}

2.2 index.html에 manifest 추가하기

이제 html 페이지에서 manifest를 로드할 수 있도록 link 태그를 추가해 봅시다. 아래 코드를 <head></head> 안에 추가해 주세요.


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

3. HTML에 Service worker 등록 Snippet 추가하기

HTML 페이지에서 서비스 워커를 등록하기 위해 아래 코드를 <head> 태그 내 제일 하단에 추가해 주세요.


<script type="module">
   import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
   const el = document.createElement('pwa-update');
   document.body.appendChild(el);
</script>

💡

Snippet(스니펫)? 스니펫은 사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어입니다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있도록 도와줍니다. (출처 : 위키백과)

2, 3번 코드가 추가된 이후의 index.html 파일의 <head> 부분

4. 오프라인 페이지 설정하기

추가한 pwabuilder-sw.js 파일을 살펴보면 아래와 같은 코드가 있습니다.


// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "ToDo-replace-this-name.html";

오프라인 환경에서 어떤 페이지를 표시할지 설정하는 코드로, 아래와 같이 코드를 수정해 주세요.


const offlineFallbackPage = "offline.html";

코드를 수정했으니 이제 오프라인 상태에서 나타낼 페이지를 만들어야겠죠? offline.html 파일을 새로 생성한 후 아래와 같이 오프라인 경우에는 인터넷 연결이 되지 않았다고 알려주는 간단한 페이지를 만들어 봅시다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>internet disconnected</title>
</head>
<body>
    <P>인터넷 연결 없음</P>
</body>
</html>