Vue.js Lecture Note

# Router, PWA

# Vue Router

npm install vue-router

페이지 전체 정보가 routes 라는 곳에 들어가게 된다.

// src/router/index.js
{
    path: '/home',
    component: HomePage
},

이 정도로 path마다 뿌려지는 component 구현으로 충분하지만, tag를 정의하기 위해서 router view를 정의한다.

  • mode

vue-router의 기본 모드는 hash mode. URL이 변경될 떄 페이지가 다시 로드되지 않음

변경을 위해 history 모드 사용 가능. 페이지를 다시 로드하지 않아도 URL 탐색 가능

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
  • router-link

a href와의 차이 : to, replace 등의 vue-router에서 제공해주는 기능 제공 여부. router-link를 사용함으로써 히스토리 관리를 하지 않는 기능이라든지, to 속성에 parameter 등을 넘길 수 있게 된다.

url을 바꿨는데도 서버로 가지 않고 js파일로 조작이 어떻게 가능한가? -> window history

  • router 구성방법
  1. 기본 방식 : 요구사항이 많이 바뀌는 경우에 사용 (단순하게 구성)
  2. nested router
  3. named view
  • SPA(Single Page Application)

SPA lifecycle

예전에는 화면에 바뀌는 것을 수정하기 위해서 전체 파일을 받아오기 위해 서버까지 접근했는데, 요즘에는 바뀌는 부분만 서버에 가서 요청함. 해당 역할을 vue router가 수행

routes: [
	{
		path: "/home",
		component: Home
		beforeEnter: (to, from, next) => {
			if (localStorage.getItem("key") == null) {
				return next({
					path: "/login",
					query: { redirect: to.fullPath }
				});
			}
			next();
		};
	}
]
  • 로컬 스토리지에 key가 있는지 확인하고 없으면 login 화면으로 넘기는 로직이다.
  • 위 예시와 같이 네비게이션 가드를 통해 특정 라우팅에 대해 가드를 설정할 수 있다.
  • 쉽게 말해, 특정 컴포넌트로 이동하기 전에 조건 처리를 통해 로그인이 되었는지 등 검증 로직을 수행할 수 있는 방법이다.

# PWA

Workbox가 가장 최신의 라이브러리이다.

  • 모바일 앱과 같은 경험을 주는 최신 웹 앱
  • 앱 icon, 앱 설치 banner, 모바일 push(notification), offline 경험 제공
  • html, css, js로 모바일과 같은 웹앱 구현
  • 높은 사용자 경험을 제공하기 위한 웹앱 (페이징 속도를 올리는 등)

https://vuejsdevelopers.com, https://dev.to 와 같은 사이트들이 PWA로 개발이 되었다. 웹 어플리케이션으로 설치가 가능한 것을 확인할 수 있다. https://pwa.rocks/ 여기에서 더 많은 PWA 사이트를 확인 할 수 있다.

# PWA 특징

  • App-like (Mobile App과 동일한 icon based 실행방식과 UX을 제공)
  • Discoverable (url로 사이트 접근 후 banner를 통해 oneclick 설치 가능)
  • Engagable (push 알람이 왔을 때 다시 앱으로 유입)
  • Connectivity (오프라인 웹앱 - 인터넷이 끊겨도 웹사이트가 잘 동작함)
  • https 위에서만 동작한다.
  • 포보스나 익스페디아 등 많은 기업에서 사용한다.
  • 일반 웹사이트와 동작이 다르다. PWA는 앱으로 설치하고 실행했을 때, launching image가 있어 모바일 앱 같아 보이고, 위에 url bar가 존재하지 않는 것을 확인할 수 있다.

# PWA를 구성하는 기술

  1. Web App Manifest (manifest.json)
  2. Service Workers (client-side javascript proxy) - 웹앱과 webserver 사이에 존재 (caching)

# PWA 지원 브라우저

  • 파이어폭스, 오페라, 크롬, 삼성 인터넷, 엣지, 사파리(push 지원X) 등
  • 삼성 인터넷과 크롬은 대부분의 기능을 제공한다.

PWA 지원 브라우저

# PWA는 실제 앱 마켓에 배포가능하다?

  • OS레벨까지 내려왔음
  • application 관리 tab으로 존재함
  • 플레이스토어에 배포하기 위해서는 mapping 하는 작업이 추가로 필요할 뿐이다.
  • Google I/O 2019 웹 세션에서 TWA (Trusted Web Activity) 라는 용어가 등장했는데, 이것은 Google Play에 PWA를 올릴 수 있는 App Frame 이다. App Store는 지원 예정이 없다.

# Web App Manifest

PWA의 설치와 앱 구성정보를 담고 있는 파일 (앱 아이콘, 런쳐 방식, 배경, 시작페이지 등)

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

아래 것들이 설정될 수 있음.

  • start url
  • launch image
  • display type : 웹앱이 모바일 앱의 느낌을 가질 수 있도록 결정짓는 속성 (전체 모양)
    • Standalone (url창 사라짐)
    • Browser
    • Fullscreen (non-app UI 사라짐)
    • Minimal-ui
  • display orientation
  • App icon
  • 배경 색 : background color와 비슷하게 하는 것이 좋다.

# Web App Install Banner

PWA가 모바일적인 특징을 가지는 큰 부분

  • 기존 앱 개발주기 : 구현 -> SDK 빌드 -> 스토어 배포 -> 검색 -> 앱 다운로드 -> 설치 -> 사용
  • PWA 앱 개발주기 : 구현 -> 사이트 배포 -> 검색 -> 사용 (자동설치, 항상 최신상태 유지)

install banner 동작조건

  • short name
  • name
  • icons (including a 192px and a 512px version)
  • https

사용자가 30초만 사이트에 머무르면, install banner가 뜬다. (타이밍은 조절 가능)

# Service Worker

  • 오프라인 서비스, 푸쉬알람 등 Mobile 기능을 웹에서 가능하게 하는 코어 기술
  • PWA에서 가장 중요한 역할을 한다.
  • 약자로 sw.js와 같이 많이 쓰임
  • 서버에 배포할 때 service worker를 사용하려면 https를 사용해야한다. Netlify나 Firebase Hosting을 사용하면 간단히 https로 배포할 수 있다.

chrome://inspect/#service-workers -> 현재 브라우저에서 돌아가고 있는 service worker를 전부 볼 수 있는 개발자도구

주요특징

  • Caching
  • Offline (리소스를 캐싱함으로써 가능)
  • Native features (push 등)

Service worker는 브라우저와 서버 사이의 별도의 js가 돌아가는 것 (미들웨어)

  • 실제적으로는 브라우저 뒤에 별도의 쓰레드 (멀티 쓰레드 개념)가 돌아가고 있다. (scope도 다르다)
  • 같은 동작을 했음에도 기존 js와 결과가 다르게 나온다.

이전에도 Service worker와 비슷한 개념은 존재했다.

  1. AppCache
  • 오프라인경험을 제공하기 위한 캐시 제공, HTML 표준
  • 페이지가 여러 개 일때 오동작, 파일 변화할 때 문제
  1. Shared Workers
  • js와 별도의 쓰레드
  • 페이지에 비종속적 (페이지가 새로고침되더라도, js파일은 새로고침되지 않음)

이런 것들을 보완하기 위해서 등장한 것이 service worker이다.

참고

service-worker.js(sw.js) 파일을 설정하기 이전에,index.html 파일의 body 태그 안에 서비스워커를 등록하는 아래 코드를 추가해야 한다.

<script>
	if ('serviceWorker' in navigator) {
		window.addEventListener('load', () => {
			navigator.serviceWorker
				.register('../service-worker.js')
				.then(reg => {
					console.log('[Service worker registered]', reg);
				})
				.catch(error => {
					console.log(error);
				});
		});
	}
</script>

// #1 - 서비스 워커 설치(캐싱 파일 생성)
self.addEventListener('install', function(event) {
	// self : app.js에서의 window와 동일 - 바로 window 객체에 접근할 수 없기 때문에 사용
	console.log('서비스 워커 설치 완료');
	event.waitUntil(
		caches
			.open(cacheName)
			.then(function(cache) {
				console.log('캐시 생성 완료');
				cache.addAll(cacheFilelist);
			})
			.catch(function(error) {
				console.log(error);
			}),
	);
});

오프라인에서도 돌아가게끔 캐시 작업을 한 것이다.

// #2 - 서비스 워커의 네트워크 요청 가로채기 코드 작성
self.addEventListener('fetch', function(event) {
	event.respondWith(
		caches
			.match(event.request)
			.then(function(response) {
				if (response) {
					return response;
				}
				return fetch(event.request);
			})
			.catch(function() {
				console.log(error);
			}),
	);
});

# PWA 적용하는 방법

  1. Vue create로 만들 때 PWA Support 옵션으로 생성
  2. 이미 만들어진 app에 적용하려면,
    1. public 폴더 밑의 index.html에 link tag로 manifest 연결
    2. manifest.json 생성
    3. main.js에 service worker 등록

← Deployment with Vue CLI, PWA →