PWA의 설치

PWA는 처음 웹에서 설치를 하게 된다.

PWA가 기기에 설치되면 다른 앱처럼 운영체제에서 직접 실행할 수 있는
플랫폼 앱으로 사용자에게 표시된다.

이는 모바일 기기에 앱 아이콘이 표시되며, 브라우저 웹 사이트에서 동작하는 것이 아니라

독립형 앱으로 실행할 수 있다는 뜻이다.

웹 사이트의 ‘북마크(즐겨찾기)’와 ‘홈 화면에 추가’와 ‘앱 설치’는 각각 다르다.

‘홈 화면에 추가’기능은 북마크와 유사하지만,
페이지의 파비콘이 OS의 홈 화면의 아이콘으로 추가된다.

하지만 PWA를 설치하게 되면 홈 화면에 URL을 추가하는 것 이상의 기능을 얻을 수 있다.

PWA를 설치하려면 manifest.json파일과 service_worker.js를 통해 설정을 해 주어야 한다.

그래야 PWA는 브라우저( Chrome )의 설정파일에서 ‘앱 설치’ 메뉴가 생성되어 설치할 수 있다.

PWA가 설치되면 Icon이 생성되며 다른 애플리케이션과 동일하게 동작한다.

Chrome브라우저에 의해 설치된 PWA는 Chrome에서만 적용되고,

Edge에 의해 설치된 PWA는 Edge에서만 적용되어 두 브라우저 사이의 데이터를 공유하지 않는다.

플랫폼(IOS, android)별로 앱을 설치/관리하고, 실행 환경을 제공하듯이

PWA도 자신을 설치한 웹 브라우저를 기반으로 동작한다.

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

manifest.json

manifest.json은 웹브라우저에게 PWA의 정보 ( 앱의 이름, 아이콘 등 )를 제공하는 JSON 파일이다.

web app이 PWA가 되려면 manifest.json파일이 있어야 모바일 기기에 설치가 가능하다.

SPA로 구현할 것이기 때문에

프로젝트에 하나뿐인 index.html의 head에 manifest.json파일을 포함해줘야 한다.

PWA에 두 개 이상의 페이지가 있는 경우 모든 페이지에 manifest.json을 연결해야 한다.

// index.html
<!doctype html>
<html lang="en">
    <head>
    	<link rel="manifest" href="manifest.json" />
    </head>
    <body></body>
</html>

manifest.json에는 아래의 내용이 기본으로 포함되어 있어야 한다.

https://developer.mozilla.org/en-US/docs/Web/Manifest

Web app manifests | MDN

A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.

developer.mozilla.org

name 또는 short_name
icons
start_url
display 또는 diaplay_override

PWA가 시작될 때,
웹 브라우저에서는 manifest.json의 정보를 기반으로 하여 시작화면을 자동으로 생성한다.
웹에서는 이를 스플래시 화면이라고 한다 ( 스플래시 화면 )

// manifest.json 설정파일
{
    "short_name": "logDiary",
    "icons": [{
        "src": "/contents/images/_icon.png", 
        "sizes": "512x512", 
        "type": "image/png"
    }],
    "display": "standalone",
    "start_url": "/",
    "theme_color": "white"
}

service_worker.js

PWA는 표준 웹 플랫폼 기술을 사용해 개발하였지만 앱처럼 동작할 수 있게 만든 앱이다.

쉽게 말해서, 웹 기술을 사용해서 앱처럼 동작할 수 있게 만들었따는 뜼
( 표준 웹기술 : HTML, CSS, Javascript, Service Worker, Web App Manifest 등 )
아래와 같은 기능을 사용할 수 있게 만들기 위해 PWA에서는 service_worker가 있어야 한다.

음악앱을 사용할 때 온라인 상태에서 스트리밍 하지만,
백그라운드에서 트랙을 다운로드 하면 오프라인 상태에서도 계속 음악을 재생할 수 있다.
앱을 열어놓지 않았음에도 상대방의 수신 메세지 알림을 앱 아이콘으로 표시 할 수 있다.

사용자들은 PWA와 native app을 딱히 구분하지는 않겠지만
PWA가 앱이기 때문에 위와 같은 작업이 가능하다고 생각할 것이다.
PWA에서는 service_worker를 사용하여 앱처럼 백그라운드 작업, 알림 등의 기능을 구현한다.

service_worker를 통해 오프라인 작업이 가능하다.

service_worker는 PWA를 구현하는 데 사용되는 web worker중 하나로,
앱이 실행되지 않았을 때의 상태 업데이트, 이벤트 알림, 네트워크 연결이 불안정 할 때에도
사용자에게 좋은 경험을 제공하는 등의 기능을 구현할 수 있게 하는 API다.

일반적인 웹사이트는 단일 스레드에서 실행된다.
하지만 service worker는 Javascript의 코드와는 별도의 스레드에서 실행된다.

그렇기 때문에 Javascript에서 장기간 작업이 진행되면 service_worker에서 다른 작업을 진행할 수 도 있다.

service_worker와 메인 Javascript 코드는 서로에게 직접 영향을 줄 수는 없지만

메세지를 보내 통신이 가능하다. 이를 통해서 PWA의 메인 작업과 오프라인 작업을 나눠서 관리할 수 있다.

메인작업 - 웹앱의 UI구현 ( HTML, CSS ) / Javascript ( 이벤트 등 ) 처리
오프라인 / 백그라운드 작업 - 네트워크 요청, 푸시 알림, 데이터 캐싱 등의 처리

service_worker의 특징

service_worker는 브라우저와 웹앱 사이의 중계자 역할을 하는 프록시 서버와 같다.
웹앱의 리소스를 캐싱하여 앱이 동작하는 방식을 제어하는 JS파일 형태이다.
service_worker는 JS와는 다른 스레드에서 실행하므로 작업이 차단되지 않는다.
그래서 오프라인 작업, 네트워크 요청, push알림 및 백그라운드 동기화 등의 작업이 가능하다.
보안상의 이유로 https에서만 실행된다.

reference

저작자표시 비영리 변경금지

'개발공부_Blog > Web' 카테고리의 다른 글

Web-app과 PWA (0)	2024.12.10
HTTP란 (0)	2023.11.28
web browser의 구조와 rendering engine (2)	2023.11.26
web은 프론트엔드 개발자에게는 기본이다. (4)	2023.11.26

성장이 디폴트인 개발자, 정소영입니다

PWA설치 및 기본 설정

PWA의 설치

manifest.json