1. 환영합니다
이 실습에서는 기존 웹 애플리케이션을 설치 가능하게 만듭니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 네 번째입니다. 이전 Codelab은 IndexedDB였습니다. 이 시리즈에는 Codelab이 4개 더 있습니다.
학습할 내용
- 직접 서비스 워커 작성
- 기존 웹 애플리케이션에 서비스 워커 추가
- 서비스 워커와 캐시 스토리지 API를 사용하여 리소스를 오프라인에서 사용할 수 있도록 만들기
유의해야 할 사항
- 기본 HTML 및 JavaScript
필요한 항목
- PWA 설치를 지원하는 브라우저
2. 설정하기
이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.
저장소를 클론하는 경우 pwa04--tab-to-taskbar 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.
이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.
소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.
키 파일
index.html- 기본 애플리케이션 HTML
3. 웹 앱 매니페스트 만들기
웹 앱 매니페스트 파일은 PWA를 설명하므로 작동하는 서비스 워커와 함께 브라우저가 웹 앱을 설치할 수 있는지, 그리고 설치될 기기에 어떻게 표시할지 알 수 있습니다. 하지만 먼저 만들어야 합니다. 웹 앱의 public 폴더에 manifest.json이라는 파일을 추가하고 다음을 추가합니다.
{
"name": "PWA Edit",
"short_name": "PWA Edit",
"start_url": "/?source=pwa",
"display": "standalone",
"icons": [
{
"type": "image/png",
"sizes": "192x192",
"src": "/images/icons/logo-192.png"
},
{
"type": "image/png",
"sizes": "48x48",
"src": "/images/icons/logo-48.png"
},
{
"type": "image/png",
"sizes": "72x72",
"src": "/images/icons/logo-72.png"
},
{
"type": "image/png",
"sizes": "128x128",
"src": "/images/icons/logo-128.png"
},
{
"type": "image/png",
"sizes": "384x384",
"src": "/images/icons/logo-384.png"
},
{
"type": "image/png",
"sizes": "512x512",
"src": "/images/icons/logo-512.png"
},
{
"type": "image/png",
"sizes": "96x96",
"src": "/images/icons/logo-96.png"
},
{
"type": "image/png",
"sizes": "1024x1024",
"src": "/images/icons/maskable-1024.png",
"purpose": "maskable"
}
],
"theme_color": "#282c34",
"background_color": "#282c34",
"description": "A PWA markdown editor",
"categories": ["productivity", "utilities"]
}
iOS 기기의 Apple 터치 아이콘을 포함해야 합니다. index.html의 <head>에 있는 <title> 태그 바로 뒤에 다음 코드 줄을 추가합니다.
<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />
설명
이 매니페스트에는 필수, 권장, 프로모션 필드가 포함되어 있어 복잡합니다. 먼저 PWA의 이름, 시작 URL, 표시 모드, 아이콘이 정의된 필수 필드입니다. 마지막 아이콘은 마스크 가능 아이콘으로, 기기의 UI에 따라 여러 아이콘을 표시할 수 있습니다. 다음은 권장 테마 및 배경색 필드입니다. 마지막으로 프로모션 필드, 설명, 이 PWA가 속하는 카테고리가 있습니다. 이 매니페스트가 PWA에 연결되면 이러한 필드는 PWA의 설치된 앱이 표시되고 관리되는 방식을 제어합니다.
4. PWA에 매니페스트 연결
매니페스트 파일을 만들었으면 PWA와 연결하기 위해 첨부해야 합니다. 이렇게 하려면 index.html을 열고 <head>의 <title> 태그 바로 아래에 다음을 추가합니다.
<link rel="manifest" href="/manifest.json" />
설명
매니페스트 링크는 이를 지원하는 브라우저에 연결된 웹 앱 매니페스트가 현재 웹사이트를 설명한다고 알려줍니다. 유효하고 사용 가능하며 서비스 워커가 작동하고 웹 앱이 추가 브라우저별 설치 기준을 통과하면 앱을 사용자 기기에 직접 설치할 수 있습니다.
5. 바로가기 추가
PWA가 기기와 더 깊이 통합된 것처럼 보이게 하는 좋은 방법 중 하나는 앱의 특정 기능으로 연결되는 컨텍스트 메뉴 바로가기를 제공하는 것입니다. PWA의 야간 모드 전환을 사용하면 mode 쿼리 매개변수를 night 또는 day로 설정하여 모드를 선택할 수 있습니다. 다음을 실행하는 두 개의 단축키를 manifest.json에 설정합니다.
night또는day모드에서 PWA를 시작합니다.- 아이콘에
150x150크기의/images/logo.svg사용
6. 축하합니다.
웹 앱 매니페스트 파일을 만들고, 웹페이지에 연결하고, 설치 시 앱 바로가기를 추가하는 방법을 알아봤습니다.
이 시리즈의 다음 Codelab은 설치 프롬프트 및 측정입니다.