Pwa 프로그레시브 웹앱

공지고 프로젝트는 데스크탑 화면에 최적화 되어있는 학과 홈페이지의 공지사항을 모바일 화면에 맞게 보여주는 것이다 모바일에서 사용할것으로 생각해서 만드는것이라 앱으로 만들면 좋을 것 같다라고 생각했고 접근성을 더 좋게 하기위해 pwa로 만들었다

 

 

PWA의 핵심 기술

다른 웹들과 달리 PWA는 웹의 장점을 갖추면서 네이티브 앱과 같은 경험을 제공할 수 있는데 이는 기존의 웹에서 볼 수 없었던 최신 웹 기술 덕분이다

 

서비스 워커

서비스 워커(service worker)는 웹 브라우저 안에 있지만 웹 페이지와 분리되어 항상 실행된느 백그라운드 프로그램을 말한다 서비스 워커는 브라우저와 서버사이에서 상태값 변경을 감지하고 푸쉬 알림음 사용자에게 알림을 보낸다 (서비스 워커는 프로시 서버처럼 작동하는데 프런트에서 서버로 보내는 request나 response를 가로챈다)

 

매니페스트

웹앱 매니페스트(manifest)란 앱 소개 정보와 기본 설정을 담은 JSON파일을 말한다 이 파일 안에는 웹앱의 고유한 제목과 소개글, 화면 방향, 홈 화면 아이콘, 브라우저에서 사용할 아이콘 배경색 정보가 담겨져 있다 앱에서만 쓸수 있었던 매니페스트를 웹앱에서도 쓸수 있게 된것이다 PWA는 반드시 manifest.json이란 파일이름으로 웹앱 매니페스트를 포함해야한다 브라우저는 이 파일을 통해 일반 웹이 아니라 PWA인걸 파악한다

// manifest.json
{
	"name":"안녕하세요!",
	"short_name":"PWA by js",
	"description": "PWA start program",
	"scope":".",
	"start_url":"./",
	"display": "fullscreen",
	"orientation":"portrait",
	"theme_color":"#ffffff",
	"background_color":"#ffffff",
	"icons": [{
		"src":"images/icons/512x512.png",
		"sizes":"512x512",
		"type":"image/png"
	}]
}

 

HTTPS

HTTP에 비해서 암호화와 인증을 거쳐 보안을 강화한 웹 통신 규약이다 서비스 워커를 이용해서 PWA를 배포할때는 반드시 HTTPS프로토콜을 이용해야한다 HTTPS는 PWA성능 평가 프로그램에서 인증받기 위한 의무사항인 데다가 ‘홈화면 추가’기능은 HTTPS에서만 지원한다

 

푸쉬 알림

PWA에서 푸쉬 알림을 동의한다면 한번 웹 사이트에 방문하고 떠난 사용자에게도 알림을 보낼수 있다 심지어는 pwa가 실행되지 않은 백그라운드 상태에서도 알림 메세지를 보낼 수 있다

 

홈화면 추가 기능

PWA로 개발된 웹에 접속한다면 웹 브라우저는 사용자에게 PWA를 설치하라고 스스로 제안합니다 이를 홈화면에 추가 기능이라고 하고 데스크톱에서는 옵니박스라고 한다 즐겨찾기나 바로가기 아이콘으로 오해할 수 있으나 운영체제에 설치되는 기능입니다 웹 브라우저가 앱설치를 제안하는 경우는 4가지 조건을 모두 충족해야 한다

• HTTPS 접속
• 매니페스트 등록
• 서비스 워커 설치
• PWA 설치 여부

 

웹 API

자바스크립트로 웹을 개발할 때 사용할 수 있는 API는 매우 많다 이러한 API는 PWA를 개발할 때도 사용할 수 있다 네이티브 앱처럼 위치 정보를 받거나 스마트폰의 카메라도 작동할 수 있다