* 뷰(Vue.js) : 실글페이지 애플리케이션 (SPA), 리액티브프로그래밍, 데이터바인딩 지원
* 뷰티파이(Vuetify.js) : 구글 머티리얼 디자인 스펙에 맞는 컴포넌트 단
03-1 ‘안녕하세요! PWA by JS’ 구경하기
- 3장에서 작성할 실습 프로젝트 실행
* 010301 [DoIt!실습] ‘안녕하세요! PWA byJS’ 예제 실행하기
- 0103/ex03_01-sample : index.html > <GO Live> 실행
* 매니페스트 등록 확인
- 크롬 개발자도구 > Application > Manifest
> Identity
> Presentation
> Icons
* 서비스워크 동작
- 크롬 개발자도구 > Application > Service Worker
> Status : 녹색 상태 아이콘 - 동작
* PWA 이벤트 처리 : console 확인
* Offline 상태 동작확인
- 크롬 개발자도구 > Network > No throttling > Offline : 인터넷 차단
> 새로고침하여 동작여부 확인
- Network에서 Offline 설정 시
> 정상 처리된 거래는 캐시에서 조회된 파일
> 연결 실패한 거래는 빨간 항목으로 표시
* 서비스워커 삭제 : 캐시에 남아있는 결과화면 방지를 위해 실습 후의 기존 서비스워커 삭제 필요
- 크롬 개발자도구 > Application > Storage > Clear site data (Usage 그래프 아래)
* 프로그램 종료
- vsCode <Go Live> 서버 종료 : IDE 하단 상태바에 표시된 [Port:5500] 클릭으로 서비스 정지
03-2 매니페스트 작성하기
* 010302 [DoIt!실습] 프로젝트 준비하기
- 0103/ex03_practice > 프로젝트 폴더 설정 : 파일 > 폴더 열기
* 다양한 아이콘 준비 : 멀티플랫폼 지원 대응 - 셈플프로젝트 이미지 리소스 복사
- 홈화면 아이콘
- 웨브라우저 파비콘(favicon)
- 스플래시스크린(splash screen)
* 010303 [DoIt!실습] 웹앱 매니페스트 작성하기
- 0103/ex03_practice/manifest.json 파일을 생성
* 파일작성
- 유효성 검사 : https://manifest-validator.appspot.com/ 막힘
{
"name":"안녕하세요! PWA by JS",
"short_name":"PWA by JS",
"description":"PWA start program",
"scope":".",
"start_url":"./",
"display":"fullscreen",
"orientation":"protrait",
"theme_color":"#ffffff",
"background_color":"#ffffff",
"icons":[
{
"src":"images/icons/android-chrome-512x512.png",
"sizes":"512x512",
"type":"image/png"
}
]
}- name : 바로가기아이콘설치 퀀장 팝업 배너 및 스크린에 표시되는 제목
- short_name : 바탕화면 바로가기 아이콘 아래 표시되는 제목
- description : 애플리케이션의 간단한 소개 (PWA 수집 웹크롤러에 수집되는 정보)
- scope : 매니페스트에 정의된 내용이 적용될 파일들의 범위 지정
- start_url : 프로그램 실행으로 시작될 URL을 루트경로로 지정
('.' : 현재위치 / './' : 현재위치를 중심으로 시작하는 하위폴더)
- display : PWA를 실행하면 나타나는 화면의 형태
> fullscreen : 최대화면 - 지원하지않는 OS인 경우 standalone 적용
> standalone : 화면만 표시(주소, 상태표시줄등 제거)
> minimal-ui : standalone에 주소만 추가 - 지원하지 않는 OS인 경우 standalone 적용
> browser : 브라우저와 같은 구성
(모바일기기가 PWA를 앱으로 인식하는 옵션 : fullscreen, standalone, minimal-ui / 웹으로 인식하는 옵션 : browser)
- orientation : 화면의 방향
> portrait : 세로(초상화)
> landscape : 가로(풍경화)
- theme_color : 상태표시줄의 색상 설정
- background_color : 스플래시스크린 배경색 설정
- icons : 스플래시스크린에 표시할 아이콘 이미지 - 128dpi에 가까운 이미지를 화면에 표시
> src : 이미지 경로(절대/상대)
> sizes : 이미지 픽셀 크기
> type : 이미지 파일 유형
03-3 메인 화면 작성하기
* 010303 [DoIt!실습] index.html 파일 작성하기
- 0103/ex03_practice > index.html 파일 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- PWA 매니페스트 파일 연결, 상태 표시줄 색상을 흰색으로 변경 -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#ffffff">
<!-- 모바일 기기 뷰포트, 브라우저 주소 표시줄의 파비콘 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="width=device-width, user-scalabe=no"> -->
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<title>안녕하세요! PWA by JS</title>
<style>
html, body{
/* html, body 모두 높이를 100%로 고정시켜야 플렉스 박스 동작 */
heigth: 100%;
background-color: #F3A530;
color: #ffffff;
}
/* 화면에 출력될 div엘리먼트를 화면 가운데 배치하도록 설정 */
.container{
height: 100%; /* 높이를 100%로 고정 ㅇ*/
display: flex; /* 플렉스 박스로 배치 */
align-items: center; /* 상하 가운데 정렬 */
justify-content: center; /* 좌우 가운데 정렬 */
}
</style>
</head>
<body>
<div class="container">
<h1>안녕하세요!</h1>
<img src="/images/hello-pwa.png" alt=""/>
<p>by JK</p>
</div>
<!-- 서비스워커 등록 -->
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker
.register('/service_worker.js')
.then(function () {
console.log("서비스워크가 등록됨!");
})
}
</script>
</body>
</html>
* 언어설정 : 설정하지 않으면 실행할 때마다 ‘디른 언어로 번역하시 겠습니 까?’라고 질문
- <html lang="ko">
* 뷰포트설정 - 모바일 브라우저로 PC 사이트 접속시 작게 보이는 현상 방지
- content의 어트리뷰트 값 설정
> width-=device-width : 몹바일 기기의 해상도로 너비값 자동 설정
> initial-scale=1 : 모바일 기기에서 확대하거나 축소 기능 허용
> user-scalable=no : 모바일 기기에서 확대하거나 축소 기능 제한
* 플렉스 박스 설정 : 화면에 표시할 글자와 이미지를 배치할 레이아웃 - 플렉스 박스(flex box)
- 모바일 기기의 크기를 자동으로 고려한 최적의 레이아웃 표현
> html, body 높이를 100%로 고정 필요
* 화면 요소 배치
- 화면에 실제 출력되는 내용 : container 클래스를 선택자로 지정한 div 엘리먼
> div 엘리먼트를 화면 가운데 배치하도록 지정
* 서비스워커 등록 : if('serviceWorker' in navigator)...
- navigator.serviceworker에는 ServiceWorkerContainer라는 읽기 전용의 객체가 반환
> 이 객체 안에 있는 register() 메서드를 이용해
모바일 브라우저가 서비스 워커를 지원하는지 확인한 후
> 서비스 워커를 등록
- then() 메서드는 register() 메서드의 실행이 성공하면 실행
> register() 메서드가 실행되면 콘솔에 성공 메시지를 줄력
03-4 서비스 워커 만들고 실행하기
* 010304 [DoIt!실습] 캐시를 관리하는 서비스 워커 만들기
- 0103/ex03_practice > 캐시를 관리하는 서비스 워커 만들기
* 서비스워커
- 브라우저와분리되어 독립해서 실행 가능
- 캐시, 푸시 알림 , 웹 API와 연동 등 다양한 기능을 별도로 수행
> 실습대상 : 필요한 파일을 캐시하여 메모리에 저장
* service_worker.Js 파일 생성
// 캐시 제목과 캐시할 파일 선언
const sCacheName = 'hello-pwa'; // 캐시 제목 선언
const aFilesToCache = [ // 캐시할 파일 선언
'./', './index.html', './manifest.json', './images/hello-pwa.png'
];
// 서비스 워커 설치하고 캐시파일 저장
self.addEventListener('install', pEvent => {
console.log("서비스 워커 설치함!");
pEvent.waitUntil(
caches.open(sCacheName)
.then(pCache => {
console.log("파일을 캐시에 저장함!");
return pCache.addAll(aFilesToCache);
})
);
});
//고유 번호를 할당받은 서비스 워커 작동
self.addEventListener('activate', pEvent => {
console.log("서비스워커 동작 시작됨!");
});
// 데이터 요청을 받으면 네트워크 또는 캐시에서 찾아 반환
self.addEventListener('fetch', pEvent => {
pEvent.respondWith(
caches.match(pEvent.request)
.then(response => {
if(!response){
console.log("네트워크에서 데이터 요청!", pEvent.request);
return fetch(pEvent.request);
}
console.log("캐시에서 데이터 요청!", pEvent.request);
return response;
}).catch(err => console.log(err))
);
});- 오프라인 동작을 위해 서비스워커가 캐시에 저장하
> 캐시 제목과 캐시할 파일 선언 : 캐시 제목은 서비스워커와 구분되도록 고유이름 사용
* 서비스 워커 설치 및 캐시 파일 저장 - install 이벤트
- 서비스 워커의 생애 주기
> [install - activate - fetch] 순서로 이벤트 발생
* install : PWA를 설치 - 서비스워커의 첫번째 생애주기
> 설치전 : installing
> 설치 후 대기 :installed
* 서비스 워커가 제대로 설치되면 pEvent에 포함된 waitUntil() 함수를이용해 비로소 캐시에 필요한 파일 저장
* 서비스 워커가준비될 때 캐시를 저장하는 것 : ‘프리 캐시(pre-cache)’
- waitUntil() 함수는 installing 상태에서 프리 캐시가 완료될 때까지 대기
- activate : 설치후 상태
* activate 이벤트 : 서비스 워커의 두 번째 생애 주기
- 서비스 워커 업데이트 : 서비스 워커가 고유한ID를 발급받아 브라우저에 성공적으로 등록되면 동작
> 웹 브라우저 의 개발자 도구에서 확인
* 서비스 워커 설치 후 - 업데이트 등의 이유로 캐시 제목 변경 : install 이벤트 처음부터 다시 발생
- 테스트할 때는 'Update on reload’ 체크 박스를 선텍 : 매번 캐시제목 변경 서비스워커등록 생략
> 새로 고침 : 기존 서비스 워커 ID 제거 -> 새로운 ID를 부여 : install 이벤트부터 새로 시작
* 앱 업데이트 시 서비스 워커 새로운 내용으로 교체 : activate 이벤트
- 활성중 : activating
- 활성후 : activated
* 서비스 워커의 내용 업데이트 :
- 먼저 캐시 제목과 프리 캐시 파일 변경 : 새로운 서비스 워커 ID로 새로운 캐시 내용이 설치 목적
- activating 상태에서 waitUntil() 함수를 사용해서 기존 캐시 제거 : 코드작성
* 오프라인 전환할 때 동작 - fetch 이벤트
- 서비스 워커의 마지막 생애 주기는 fetch 이벤트로부터 시작
> 이벤트가 발생 사례 : 브라우지 〈새로 고침〉
* 동작
- 온라인 상태 : 서버에서 조회
- 오프라인 상태 : 캐시에서 조
* 서비스 워커의 유무에 따른 fetch 이벤트 처리
- 1 : 온라인 - 서비스워커 없음
- 2 : 오프라인 - 서비스워커 있
* PWA 오프라인 동작 구조 : fetch 이 벤트 발생 후 (pEvent에 있는) respondWidth() 함수 활용
- respondWidth() 함수 : 결과값 준비 까지 네트워크 요청 일시 정지
> 캐시, 모바일 기기에 임시로 저장한 데이터로 처리
* service_worker.js
- 오프라인 처리 : PWA가 실행되면 캐시에서 가져올 데이터를 caches.match() 함수로 캐시 저장소에서 검색
> 발견된 캐시(response)를 반환하도록 코드를 작성
- 캐시를 발견하지 못하면 fetch(pEvent.request)를 통해 네트워크에 요청
* 실행 실습 후 서비스워커 삭제 : 다음실습 준
* 서비스 워커의 주요 이벤트 복습하기
- install : 서비스워커가 설치될 때 실행(앱설치) - 캐시파일 저장
- activate : 서비스워커 설치 후, 업데이트 역할 - 기존캐시 제거
- fetch : 서비스워커 설치 후 다음 실행 때 실제 작업할 내용 작성 - 브라우저 서버요청시 오프라인 상태면 캐시파일 조회
* 사용하는 브라우저 서비스워커 지원 확인
- https://mobilehtml5.org/tests/sw 접속 후 새로고
서비스워커 지원하지 않을때 표시되는 메시지라고?
Service Worker NOT serving files on first loads
Couldn't ask for Service Worker ID.
두번째 하니 아래와 같이 표시된다. 뭐지?
미션 코딩! 캐시 변경하고 서비스 워커 다시 등록하기
* 03장 실습 결과물을 복사한 후 캐시 제목을 바꾸고 캐시 이미지를 추가해 서비스 워커를 다시 등록
- 크롬 개발자 도구의 캐시 저장소(Cache Storage)에서 캐시 제목과 추가한 이미지 확인
> 실습할 때마다 기존의 서비스 워커는 반드시 미리 제거
- 캐시 제목 뒤에 -v1, -v2..처럼 버전의 번호를 올리면서 테스트
// 캐시 제목과 캐시할 파일 선언
// const sCacheName = 'hello-pwa'; // 캐시 제목 선언
// const aFilesToCache = [ // 캐시할 파일 선언
// './', './index.html', './manifest.json', './images/hello-pwa.png'
// ];
// // 미션코딩 - 캐시변경하고 서비스워커 다시 등록하기
const sCacheName = 'hello-pwa-v1'; // 캐시 제목 변경 *
const aFilesToCache = [ // 캐시할 파일 선언
'./', './index.html', './manifest.json', './images/hello-pwa.png',
'./images/icons/favicon.ico', //파비콘 이미지 캐시 추가 *
'./images/icons/android-chrome-192x192.png' //아이콘 이미지 캐시 추가 *
];
* 이전 서비스 워커를 제거한 후 테스트
- 라이브 서버로 웹 브라우저에서 실행
- Update on reload' 체크 박스 선택 해제
> 웹 브라우저 새로 고침에도 서비스 워커 : 신규 ID로 등록되지 않고 그대로 있음
* Status 항목에서 skipWaiting을 선택
- 캐시 저장소에서 변경된 캐시 제목과 캐시에 추가로 등록된 이미지 확인
- 앱 재실행 후에도 Status 항목에 skipWaiting 표시가 안되네.. 뭘 놓쳤지..
'book > PWA만들기' 카테고리의 다른 글
| [2nd].05 뷰 고급 기능 익히기 (작성중) (1) | 2023.06.07 |
|---|---|
| [2nd].04 뷰 기초 쌓기 (0) | 2023.05.09 |
| [1st].02장 모던 자바스크립트 꼭 필요한 것만 배우기 (1) | 2023.03.28 |
| [1st].01장 헬로! 프로그레시브 웹앱 (4) | 2023.01.25 |
| 프로그레시브웹앱만들기 - intro (0) | 2023.01.25 |
