Vanilla JavaScript 만 사용하여 PWA 구축
본문
프로그레시브 웹 앱 (PWA)
“PWA (Progressive Web App)는 최신 웹 기능을 사용하여 기본 앱과 유사한 경험을 사용자에게 제공하는 웹 앱입니다. 이러한 앱은 특정 요구 사항 (아래 참조)을 충족하고 서버에 배포되며 URL을 통해 액세스 할 수 있으며 검색 엔진에서 색인을 생성합니다.”
PWA (Progressive Web App)는 다른 일반 앱과 같이 작동하지만 많은 기능이 추가되고 번거로움이 줄어 듭니다. 빠르고 안정적이며 오프라인 환경에서 완벽하게 작동 할 수 있습니다.
https://levelup.gitconnected.com/build-a-pwa-using-only-vanilla-javascript-bdf1eee6f37a
왜 사용해야 합니까?
PWA (Progressive Web Apps)는 다음과 같은 이유로 사용자에게 매우 풍부한 경험을 제공합니다.
- 반응형
인터넷 연결을 지원하고 브라우저를 지원하는 모든 제품인 데스크톱 브라우저, 휴대폰 또는 TV 화면에 맞게 PWA를 구축 할 수 있습니다.
- 신뢰성
사용자가 자신의 환경에서 PWA를 즉시 로드할 수 있도록 하는 서비스 워커 (Service Worker)라는 기술을 사용합니다. PWA는 응용 프로그램에 대한 오프라인 지원을 제공 할 수 있으며 사용자는 네트워크 관련 문제에 직면하지 않습니다.
- 앱 스토어 / 플레이 스토어 없음
사용자는 이러한 점진적 웹앱을 다운로드하기 위해 앱 스토어를 방문 할 필요가 없습니다. 브라우저에서 바로 직접 설치할 수 있습니다. 매우 빠르기 때문에 대기 시간이 필요하지 않으며 시뮬레이션과 같은 기본 응용 프로그램을 제공합니다.
- 사용자뿐만 아니라 개발자를 위한 참여
개발자는 매니페스트 파일의 수많은 기능을 추가/재생할 수도 있습니다. 가장 잘 알려진 기능 중 하나는 PWA에서 활성화 된 푸시 알림을 사용하여 사용자를 다시 참여 시키는 것입니다.
- 간편한 공유
프로그레시브 웹 앱은 친구나 동료와 공유하기가 매우 쉽습니다. 사용자가 웹 사이트/앱 URL 만 공유하면 됩니다. 사용자는 설치 가능한 APK를 공유하거나 확인 과정을 거친 후 수많은 파일을 다운로드 할 필요가 없습니다. 사용자에게 필요한 것은 간단한 클릭입니다.
Progressive Web Apps에 대한 자세한 내용을 보려면 Google 개발자가 제공하는 이 링크를 방문하십시오.
기본 PWA 생성
이 자습서에서는 바닐라 JavaScript만 사용하여 PWA를 구축하려고 하지만 먼저 일반 웹 앱을 만들어야 합니다.
더 진행하기 전에 최종 UI의 모양과 달성하려는 기능을 살펴 보겠습니다.
최종 프로젝트 UI
최종 프로젝트 UI 개요
UI가 가운데에 색상 상자를 표시하고 상자를 클릭하면 짧은 음악 클립이 재생됩니다.
마찬가지로 각 상자는 다른 음악 클립을 생성합니다. 이 웹 사이트의 개념은 서로 다른 음악을 섞어 연주하면서 자신 만의 음악을 만드는 것입니다.
GitHub 리포지토리
이 프로젝트와 관련된 모든 파일은 여기에 있습니다 : https://github.com/S-ayanide/MixCentro
이 자습서에서는 GitHub 리포지토리에서 사용 가능한 특정 자산을 다운로드해야 합니다. 무언가를 생성, 변경 또는 수정하려면 이 자습서를 완료 한 후에 수행하는 것이 좋습니다.
웹앱 HTML
이 프로젝트의 HTML은 매우 간단합니다. 표시된 대로 다채로운 패드를 개별화하고 각각을 위한 오디오가 필요합니다.
이 코드 스니펫을 살펴 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Style is imported but not created right now-->
<link rel="stylesheet" href="./style.css">
<title>MixCentro</title>
</head>
<body>
<div class="app">
<header>
<h1>MixCentro</h1>
<p>Make music with only one tap</p>
</header>
<div class="pads">
<div class="pad-top">
<div class="pad1">
<audio class="sound" src="./sounds/bubbles.mp3"></audio>
</div>
<div class="pad2">
<audio class="sound" src="./sounds/clay.mp3"></audio>
</div>
<div class="pad3">
<audio class="sound" src="./sounds/confetti.mp3"></audio>
</div>
</div>
<div class="pad-bottom">
<div class="pad4">
<audio class="sound" src="./sounds/glimmer.mp3"></audio>
</div>
<div class="pad5">
<audio class="sound" src="./sounds/moon.mp3"></audio>
</div>
<div class="pad6">
<audio class="sound" src="./sounds/ufo.mp3"></audio>
</div>
</div>
</div>
</div>
<!--Script is imported here but not used right now-->
<script src="./index.js"></script>
</body>
</html>
여기서 우리가 하는 일은 제목과 헤더의 이름을 MixCentro로 지정하는 것입니다.
이 프로젝트가 작동하려면 소리가 필요합니다. 모든 사운드 파일이 포함 된 위에서 언급 한 GitHub 리포지토리에서 다운로드하십시오.
우리는 주요 부서 인 "패드"를 만들었으며 UI에 표시되는 패드를 만들뿐 아니라 각각 3 개의 패드를 포함하는 두 부분으로 구분되는 "패드 상단"과 "패드 하단"이 포함되어 있습니다.
상단 패드는 서로 다른 오디오로 구성된 3 개의 패드가 있는 "패드 상단"이라고 합니다. 마찬가지로, 하단 패드 부분은 "패드 하단"이라고 하며 3 개의 패드로 구성됩니다.
style.css 및 index.js를 가져 왔지만 현재는 사용하지 않습니다.
Web App CSS
이제 디렉토리의 루트에 스타일 시트를 만들 수 있습니다. 나는 그것을 불렀습니다
style.css.
기본적으로 화면 측면에 여백과 패딩이 생깁니다.이 경우에는 원하지 않습니다. 기본적으로 추가 된 padding과 margin을 수동으로 제거하겠습니다.
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } |
HTML 파일에 헤더를 추가했으며 배경도 없기 때문에 웹 사이트를 매력적이고 미묘하게 만들어야 합니다. 이를 위해 글꼴 스타일을 업그레이드하고 테마에 잘 맞는 배경을 추가하여 더보기 좋게 만듭니다.
위에서 언급한 GitHub 리포지토리에서 images/bg/background.jpg 경로에 이미 있는 이미지를 찾을 수 있습니다. 이것은 UI 미리보기에 사용 된 이미지와 동일합니다.
Google 글꼴 가져 오기
더 나아가려면 웹 사이트에 적합한 멋진 글꼴을 선택해야 합니다. 다양한 글꼴 중에서 선택하려면 Google 글꼴을 사용합니다.
모든 사람의 선택과 취향이 다르기 때문에 다소 시간이 걸릴 수 있습니다. 하나의 글꼴을 선택하고 선택한 글꼴의 오른쪽 상단에 있는‘+’버튼을 클릭하십시오.
클릭하면 화면에 "1 Family Selected"라는 검은 막대가 표시되고 해당 막대를 클릭하면 확장되고 이와 비슷한 것을 볼 수 있습니다.
선택한 글꼴에 따라 세부 정보가 약간 다를 수 있지만 나머지는 동일하게 유지됩니다. 여기서는 글꼴을 가져 오는 표준 방식을 사용할 것이므로 회색 상자에 제공된 <link href…> 전체를 복사 해 보겠습니다.
글꼴을 실제로 사용하려면 index.html 파일을 열고 <head> 태그 사이에 이 링크를 붙여 넣으십시오.
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <!--Importing the font here--> | |
| <link href="https://fonts.googleapis.com/css?family=Lexend+Exa&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="./style.css"> | |
| <title>MixCentro</title> | |
| </head> |
More Styling
글꼴을 가져온 후에는 기본 브라우저에서도 글꼴을 반영해야 합니다.
| body { | |
| font-family: 'Lexend Exa', sans-serif; | |
| background: url('./images/bg/background.jpg'); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| color: wheat; | |
| } | |
| .app { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| header h1 { | |
| margin: 50px 0px 20px 0px; | |
| text-align: center; | |
| padding: 2rem; | |
| background: black; | |
| font-size: 40px; | |
| } | |
| header p { | |
| font-size: 25px; | |
| color: black; | |
| } | |
| .pads { | |
| background: lightblue; | |
| width: 60%; | |
| box-shadow: 10px 10px 20px black; | |
| margin-bottom: 150px; | |
| } | |
| .pad-top{ | |
| display: flex; | |
| } | |
| .pad-bottom{ | |
| display: flex; | |
| } | |
| .pad-top > div { | |
| height: 100px; | |
| width: 100px; | |
| flex: 1; | |
| } | |
| .pad-bottom > div { | |
| height: 100px; | |
| width: 100px; | |
| flex: 1; | |
| } | |
| .pad1 { | |
| background: #60d394; | |
| } | |
| .pad2 { | |
| background: #d36060; | |
| } | |
| .pad3 { | |
| background: #c060d3; | |
| } | |
| .pad4 { | |
| background: #d3d160; | |
| } | |
| .pad5 { | |
| background: #606bd3; | |
| } | |
| .pad6 { | |
| background: #60c2d3; | |
| } |
필자의 경우 글꼴 모음인 "Lexend Exa"를 사용했으며 앞에서 언급한 배경 이미지도 추가했습니다. 연속적이고 균등한 간격의 레이아웃을 유지하기 위해 콘텐츠 사이에 공백이 있는 내용이 포함 된 flexbox를 사용합니다.
또한 너비가 60% 인“패드”라는 클래스를 유지하여 화면의 절반 이상을 조금만 차지하면 화면이 너무 넓어지지 않고 단단하고 부드럽게 보입니다.
“pad-top”및“pad-bottom”클래스 내부의 디비전은 잠재적인 너비와 높이로 커지고 flex 속성을 1과 동일하게 유지하여 앞에 돌출되도록 합니다.
마지막으로 모든 패드에 다른 16 진수 색상을 할당합니다.
미디어 쿼리 추가
마지막으로, 애플리케이션의 반응 특성을 제어하기 위해 미디어 쿼리를 추가합니다.
| @media (max-width: 480px){ | |
| header h1{ | |
| font-size: 35px; | |
| } | |
| header p{ | |
| font-size: 16px; | |
| } | |
| .pads{ | |
| margin-bottom: 100px; | |
| } | |
| } |
이 간단한 코드에서는 화면 크기가 480 픽셀 아래로 떨어지면 축소되는 글꼴의 크기 만 제어하고 아래쪽에 약간의 여백을 추가하여 더보기 좋게 만듭니다.
바닐라 JavaScript 기능 추가
이 시점에서 멋진 UI를 설정했지만 클릭해도 패드에서 소리가 나지 않습니다. 왜 그런 겁니까?
이 시점에서 우리 부서에는 이미 오디오가 있지만 사용자가 클릭 할 때 특정 사운드를 재생하려면 play() 함수를 호출합니다. 그것이 JavaScript가 들어오는 곳입니다.
우리의 기본 JavaScript 코드는 매우 간단하며 11 줄로만 구성됩니다.
| window.addEventListener('load', ()=>{ | |
| const sounds=document.querySelectorAll(".sound"); | |
| const pads=document.querySelectorAll(".pads div"); | |
| }); |
처음부터 HTML 클래스 .sounds 및 .pad를 각각 대상으로 하는 전체 쿼리를 저장하고 변수에 저장하여 사운드와 패드를 수집합니다.
그러나 윈도우가 먼저 로드 될 때마다 이 작업을 수행하려고 합니다. 따라서 모든 것을 윈도우 안에 넣습니다.
| pads.forEach((pad,index) => { | |
| pad.addEventListener('click', ()=> { | |
| sounds[index].currentTime = 0; | |
| sounds[index].play(); | |
| }); | |
| }); |
다음으로 모든 패드 분할을 반복하는 forEach를 추가합니다. 두 개의 파라미터가 있습니다. 하나는 루프할 때마다 각 개별 패드로 초기화되는 패드이고 다른 하나는 특정 패드의 사운드를 재생하는 데 필요한 인덱스입니다.
play() 함수의 도움으로 개별 패드와 관련된 파일을 재생하기 위해 위 사운드 변수의 사운드를 사용합니다.
우리는 currentTime = 0과 같은 것을 사용합니다. 우리가 하는 이유는 패드를 재생할 때마다 시간을 0으로 다시 초기화하여 동일한 패드 자체를 여러 번 클릭 할 때 하나의 패드를 여러 번 재생할 수 있기 때문입니다.
축하합니다. 방금 바닐라 JavaScript를 사용하여 웹앱을 만들었습니다. 당신은 그것을 가지고 놀거나 다른 사람들이 사용할 수 있도록 온라인으로 배포 할 수 있습니다. 하지만 기다려요! 우리는 여전히 이 웹앱을 프로그레시브 웹으로 변환 해야 합니다.
웹앱 매니페스트란 무엇입니까?
Web App Manifest는 Progressive Web App의 세부 정보가 포함된 간단한 JSON 파일이며 사용자 장치에 설치 될 때 브라우저가 동작하는 방식을 브라우저에 알려줍니다.
매니페스트에는 애플리케이션 이름 (전체 이름 및 짧은 이름), 앱 아이콘, 앱이 시작되면 열리는 URL, 테마 색상 제어 등과 같은 정보가 포함될 수 있습니다.
매니페스트 파일 작성
프로그레시브 웹 앱 생성 매니페스트 파일은 사용자의 기기에 설치할 때 브라우저의 동작을 제어하기 때문에 필수적입니다.
Manifest File
고유한 Web App Manifest를 작성하려면 새 파일을 작성하고 이름을 manifest.json으로 지정하고 JSON 형식으로 세부 사항을 추가하십시오. 그러나 온라인으로 이미 제공된 도구를 사용하여 더 나은 방법을 사용할 수 있습니다.
매니페스트 온라인 생성
이 시대에 인터넷은 이미 manifest.json 파일을 만들 때 다시 한 번 유용한 많은 시간 절약 옵션을 제공합니다.
전체 키-값 쌍을 JSON 형식으로 입력하는 대신 이 웹 사이트 (https://app-manifest.firebaseapp.com/)로 이동하면 됩니다.
이것은 Web App Manifest Generator이며 특정 입력 필드만 입력하면 자동으로 매니페스트를 생성합니다.
입력 필드를 채우는 동안 고려해야 할 사항 :
- 응용프로그램의 전체 이름과 짧은 이름을 지정하십시오.
- 테마 색상과 배경색은 일반 웹앱의 브라우저 버전을 수정하고 더 많은 수명을 제공 할 수 있으므로 중요합니다.
- 디스플레이 모드를 '독립형'으로 변경하십시오.
- 지금은 "응용 범위"를 제거하십시오.
- 루트 디렉토리 자체에 PWA를 만들고자 하므로 시작 URL의 값을 ‘.’로 설정하십시오.
- 오른쪽에는‘ICON’이라는 버튼이 있습니다. 앱 아이콘으로 사용할 이미지를 선택한 다음 여기로 드래그 앤 드롭 / 업로드하십시오.
참고 : 아이콘 크기가 512x512 해상도를 초과하지 않도록 하여 아이콘 크기가 조정되어 다른 장치에 맞도록 하십시오.
모든 작업이 완료되면‘GENERATE .ZIP’를 클릭하고 zip 파일의 모든 내용을 프로젝트 폴더로 추출하십시오.
이제 프로젝트에 매니페스트 파일을 추가했지만 사용하고 있지 않습니다. 프로젝트에서 매니페스트 파일을 실제로 반영하려면 <head> 태그 사이에 index.html 파일에 해당 링크를 추가하십시오.
<head>
<link rel=”manifest” href=”manifest.json”>
</head>
비올라! 프로젝트에 기성품 매니페스트 파일이 있습니다.
이제 Yarn을 사용하여 새로운 의존성을 추가 할 것입니다.
Yarn는 무엇입니까?
Yarn은 NPM 레지스트리와의 호환성을 유지하면서 NPM 클라이언트 또는 다른 패키지 관리자의 기존 워크 플로를 대체하는 새로운 패키지 관리자입니다. 패키지 관리자는 특정 용도로 사용되는 일부 패키지를 설치할 목적으로 서버를 제공합니다.
yarn 사용의 장점
물론 다른 패키지 관리자도 있지만 이 프로젝트에서는 몇 가지 이유로 Yarn을 사용합니다.
- 패키지 다운로드는 한 번만 발생합니다. 다시 다운로드 할 필요가 없습니다.
- 더 안전합니다.
- 종속성을 잠그는 잠금 형식을 사용하여 두 시스템이 동일한 패키지 / 종속성에서 작동하도록 합니다.
시스템에 Yarn 설치
시스템에 Yarn를 설치하는 것은 매우 간단합니다. https://yarnpkg.com/lang/en/을 방문하여 “Yarn 설치”를 클릭하면 다운로드가 자동으로 시작됩니다.
일반적인 설정 절차를 따르기 만하면 Yarn 설치가 시스템에서 시작되고 경로도 환경 변수에서 자동으로 수정됩니다.
이 방법의 또 다른 대안은 npm을 사용하는 것입니다. 이미 npm을 사용하고 있다면 터미널을 열고 다음을 입력하십시오.
시스템에서 yarn 설치가 성공했는지 확인하려면 터미널을 열고 다음을 입력하십시오.
1.16.0 또는 이와 유사한 응답이 표시되면 Yarn이 성공적으로 설치되었으며 계속 사용하는 것이 좋습니다.
yarn 프로젝트 초기화
새 yarn 프로젝트를 생성하려면 첫 번째 단계는 터미널에서 프로젝트 폴더로 이동하여 다음 명령을 입력하는 것입니다.
터미널에 원사 초기화를 입력하면 많은 질문을 받게 됩니다. 이 질문에 대답하면 응답이 모든 정보를 유지하는 package.json 파일에 저장됩니다.
처음에는 이름이 묻습니다. 거기에 유지하려는 프로젝트의 이름을 입력하십시오. 다른 필드의 경우 비워 두거나 원하는 경우 고유 한 사양을 입력 할 수 있습니다.
건너 뛸 수 없는 매우 중요한 질문은 진입점입니다. 프로젝트의 진입 점을 결정합니다. 앞에서 만든 index.js로 초기화하십시오.
이 단계를 마치면 프로젝트에 채워진 새 폴더와 파일이 많이 있습니다. 이 경우 첫 번째 원사 프로젝트를 성공적으로 초기화했기 때문에 등을 두드리십시오.
참고 : yarn.it은 프로젝트 폴더로 이동 한 후 index.js가 진입점으로 액세스 할 수 있도록 수행해야 합니다
서비스 호출 된 서비스 설치
PWA (Progressive Web App)에는 라이브 서버를 실행해야 하므로 응용 프로그램을 테스트하려면 최소한 로컬 호스트가 필요합니다. 따라서 serve라는 패키지를 설치해야 합니다.
serve는 서버를 사용하여 정적 사이트를 테스트하려는 경우에 가장 효과적입니다. 로컬 호스트에서 어떻게 실행되는지 확인한 다음 나중에 배포로 푸시할 수 있습니다.
프로젝트에 서브를 설치하려면 터미널에 다음을 입력하면 됩니다 (프로젝트 폴더로 이동 한 후).
그러면 프로젝트에 종속성이 추가되고 package.json 파일에서 해당 종속성을 볼 수 있습니다.
로컬 서버에서 정적 페이지를 실행하려면 먼저 이 종속성을 사용하여 서버를 시작해야 합니다. 서버 유형을 시작하기 위해 yarn는 터미널에서 서비스를 제공합니다.
귀하의 경우에 귀하의 로컬 호스트 및 네트워크 주소에 대한 세부 정보를 제공하는 비슷한 것이 나타납니다. 이들 중 하나를 열어 로컬 서버에서 실행 중인 정적 웹 사이트를 볼 수 있습니다.
ServiceWorker 란 무엇입니까?
“서비스 워커는 일종의 웹 워커입니다. 기본 브라우저 스레드와 별도로 실행되어 네트워크 요청을 가로 채고 캐시에서 리소스를 캐싱하거나 검색하며 푸시 메시지를 전달하는 JavaScript 파일입니다.”
기본적으로 서비스 워커는 기본 스레드와 별도로 실행되며 현재 연관된 애플리케이션과 완전히 독립적입니다.
서비스 워커는 네트워크 요청을 제어하고 캐싱을 처리 할 수 있으며 캐시를 통해 오프라인 리소스를 지원할 수도 있습니다.
- Registration
- Installation
- Activation
ServiceWorker를 먼저 등록
서비스 워커를 설치하려면 먼저 기본 JavaScript 파일 (이 경우 index.js)에 등록해야 합니다. 더 진행하기 전에 Service Worker 파일을 만들어 serviceWorker.js라고 하겠습니다.
서비스 워커 수명주기의 첫 단계는 등록입니다.
| if('serviceWorker' in navigator){ | |
| try { | |
| navigator.serviceWorker.register('serviceWorker.js'); | |
| console.log("Service Worker Registered"); | |
| } catch (error) { | |
| console.log("Service Worker Registration Failed"); | |
| } | |
| } |
서비스 워커 등록
먼저 브라우저 지원을 확인하여 window.addEventListener() 안에 추가해야 합니다. 그런 다음 서비스 워커는 navigator.serviceWorker.register에 등록합니다. 그러면 서비스 워커가 성공적으로 등록 될 때 해결되는 약속이 반환됩니다.
서비스 워커의 범위는 서비스 워커가 제어하는 파일을 결정하므로 매우 중요합니다. 즉, 서비스 워커가 요청을 가로 챌 경로입니다.
따라서 우리는 항상 이 디렉토리에 있는 모든 파일의 요청을 제어할 수 있도록 루트 디렉토리에서 서비스 워커를 선호합니다.
Vanilla JS를 사용하여 serviceWorker.js 만들기
serviceWorker.js 파일을 브라우저에서 작성하고 등록 했으므로, inspect element 탭을 열고 Developer Tools에서 Application 메뉴로 이동하여 파일을 확인할 수 있습니다.
서비스 워커 등록이 성공적이며 콘솔의 메시지 로그에도 작성되었음을 알 수 있습니다.
로컬 캐시에서 모든 자산을 사용할 수 있게 하려면 모든 정적 자산의 경로를 동적으로 언급해야 합니다.
| const staticAssets=[ | |
| './', | |
| './style.css', | |
| './index.js', | |
| './sounds/bubbles.mp3', | |
| './sounds/clay.mp3', | |
| './sounds/confetti.mp3', | |
| './sounds/glimmer.mp3', | |
| './sounds/moon.mp3', | |
| './sounds/ufo.mp3' | |
| ]; |
정적 자산
서비스 워커는 완전히 이벤트 중심이므로 브라우저 측에서 이벤트를 수행하려면 install 및 fetch와 같은 이벤트를 추가해야 합니다.
설치
브라우저가 새 서비스 워커를 감지할 때마다 Install 이벤트가 자동으로 호출됩니다. 우리가 목표로 하는 것은 모든 정적 자산을 검색하고 나중에 저장하기 위해 Cache API를 호출하는 것입니다.
| self.addEventListener('install', async event=>{ | |
| const cache = await caches.open('static-cache'); | |
| cache.addAll(staticAssets); | |
| }); |
서비스 워커 설치
이 경우에는 'static-cache'라는 이름으로 캐시를 호출합니다. 원하는 이름을 사용할 수 있지만 편의상 "정적 캐시"가 선호됩니다.
서비스 워커는 저급 API이므로 항상 수행할 작업을 알려 주어야 합니다. 이 시점에서 브라우저의 응용 프로그램 메뉴로 돌아가서 오프라인 환경을 시뮬레이션 해도 아무 일도 일어나지 않습니다.
페치 API의 도움으로 이 문제를 해결해 봅시다.
Fetch
서비스 워커에서 우리는 주어진 이벤트에 어떻게 대응할 것인지 결정할 수 있습니다. 이를 위해 respondWith()라는 메소드를 사용합니다.
우리의 경우 먼저 캐시에 무언가가 있는지 확인하고, 그렇지 않으면 네트워크에서 가져옵니다.
| self.addEventListener('fetch', event => { | |
| const req = event.request; | |
| const url = new URL(req.url); | |
| if(url.origin === location.url){ | |
| event.respondWith(cacheFirst(req)); | |
| } else { | |
| event.respondWith(newtorkFirst(req)); | |
| } | |
| }); |
정적 또는 네트워크 캐시
캐시 우선 접근 방식을 만들기 위해 캐시 자체에 있는 파일과 요청을 일치 시키는 함수를 만듭니다. 따라서 요청은 키 역할을 합니다.
이제 캐시에 아무것도 없으면 캐시 정의 자체도 정의되지 않은 상태로 반환됩니다.
| async function cacheFirst(req){ | |
| const cachedResponse = caches.match(req); | |
| return cachedResponse || fetch(req); | |
| } |
Cache First
네트워크 우선 접근 방식을 만들기 위해 필요한 경우 모든 네트워크 자산을 가져올 동적 캐시를 생성하려고 합니다. 불가능한 경우 정적 캐시로 돌아갑니다.
| async function newtorkFirst(req){ | |
| const cache = await caches.open('dynamic-cache'); | |
| try { | |
| const res = await fetch(req); | |
| cache.put(req, res.clone()); | |
| return res; | |
| } catch (error) { | |
| return await cache.match(req); | |
| } | |
| } |
Network First
브라우저에서 필요한 경우 온라인으로 요청을 가져오고 put() 메소드를 사용하여 동적 캐시에 추가합니다.
이제 애플리케이션 메뉴를 방문하면 방금 생성한 정적 및 다른 하나의 두 개의 캐시 저장소가 있습니다.
이제 "오프라인" 확인란을 클릭하여 서비스 워커로 돌아가서 오프라인 환경을 시뮬레이션 하면 인터넷 문제가 발생하지 않으며 모든 캐시 스토리지로 인해 응용 프로그램이 원활하게 실행됩니다.
여기에서 제작 한 것을 축하합니다. 이제 모든 플랫폼에서 사용/설치할 수 있는 고유한 Progressive Web App이 있습니다.
PWA를 설치하려면 온라인 서버에 프로젝트를 배포하기 만 하면 됩니다 (무료 호스팅도 가능). 웹 사이트가 완전히 로드 되면 주소 표시줄의 오른쪽에 작은 + 표시가 나타납니다.
클릭하면 멋진 PWA 설치 및 로컬 시스템에서 작동하는 것을 볼 수 있습니다.
- 이전글JavaScript 배우기-튜토리얼, 코스 및 책 19.10.22
- 다음글V8이 V8 정규 표현식을 개선하는 방법 19.10.22