-
Vue.js 프로젝트 PWA 적용하기 - 매니페스트, 서비스워커 (Manifest, Service Worker)개발 공부/PWA 2023. 10. 5. 13:32반응형SMALL
전 시리즈 : Vue js 프로젝트 생성 방법 vue cli로 시작하기
PWA 적용을 위해 필요한 것
- Manifest
- Service Worker
1. Manifest 적용
* public 폴더에 manifest.json 파일 추가
- manifest.json
{ "short_name": "TestRozy", "name": "RozyPWA", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "/images/logo.png", "sizes": "200x200", "type": "image/png" }, { "src": "/images/img.png", "sizes": "362x352", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#000000", "background_color": "#ffffff" }display : 상단 주소입력부분 보이지 않게 standalone으로 설정
orientation : portrait 로 설정하여 세로로 화면 출력
- index.html 수정
<!DOCTYPE html> <html lang=""> <head> <link rel="manifest" href="manifest.json"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- ios에서 display standalone 사용시 필요--> <!-- 사파리에서 인식하지 않는 경우 사용하기 --> <link rel="apple-touch-icon" sizes="192x192" href="/icons/64.png"> <link rel="apple-touch-icon" sizes="256x256" href="/icons/32.png"> <link rel="apple-touch-icon" sizes="384x384" href="/icons/24.png"> <link rel="apple-touch-icon" sizes="512x512" href="/icons/16.png"> <!-----------------//"64x64 32x32 24x24 16x16",------------------------> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
* 프로젝트 구성
확인
1. 주소 접속 : chrome://flags/
Bypass user engagement checks (사용자 참여 검사 우회) 체크
웹앱 개발 시 필수요소가 설정되어 있지 않아도브라우저에서 앱 아이콘 설치 뜨는지 안뜨는지 확인 가능
2. 크롬 개발자 모드에서 매니페스트 확인
2. Service Worker
1. 서비스워커 npm 모듈 설치
npm i register-service-worker npm i @vue/cli-plugin-pwa2. src 폴더에 registerServiceWorker.js 추가
- registerServiceWorker.js
import { register } from 'register-service-worker' //if (process.env.NODE_ENV === 'production') // 로컬에서 확인할때는 주석, 배포시 주석 제거 { register(`${process.env.BASE_URL}service-worker.js`, { ready () { console.log( 'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB' ) }, registered () { console.log('Service worker has been registered.') }, cached () { console.log('Content has been cached for offline use.') }, updatefound () { console.log('New content is downloading.') }, updated () { console.log('New content is available; please refresh.') }, offline () { console.log('No internet connection found. App is running in offline mode.') }, error (error) { console.error('Error during service worker registration:', error) } }) }3. main.js에 서비스워커 import
- main.js
import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' // Service Worker createApp(App).mount('#app')
서비스워커 적용 전
적용 후
반응형LIST'개발 공부 > PWA' 카테고리의 다른 글
Vue.js PWA 프로젝트 firebase 호스팅 방법 (1) 2023.10.06 Vue js 프로젝트 생성 방법 vue cli로 시작하기 (0) 2023.10.05 Firebase 사용 방법 프로젝트 시작 VSCode 적용 (0) 2023.09.25 PWA 빌드 서비스 워커 동작 확인 방법 (0) 2023.09.20 보안 오류 PSSecurityException UnauthorizedAccess 해결 방법 (0) 2023.09.20