PWA( feat. iOS에서 PWA기능 활성화?)

이명진·2023년 4월 11일

pwa

web. 웹 공부

목록 보기

7/8

PWA

프로그레시브 웹 어플리케이션
앱처럼 보이고, 느끼고 , 작동하는 웹사이트
홈화면에 저장 가능 , 스플래시 화면 있고, 오프라인 지원 등 네이티브 앱이 할수 있는 거의 모든 작업을 수행할수 있다.

앱과 비교해서 스토어 들이 위협받을수 있다. (앱스토어, 구글스토어)
그래서 애플측에서 PWA 가 지원되도록 하는 것을 늦춰왔었는데 최근 업데이트가 출시 되었으며 가능하게 되었다. (iOS 16.4)

웹 푸시 기능 2015년 부터 구글 크롬이 가능하게 했다.
기존 아이폰은 이 업데이트가 출시되기 이전 앱 푸시를 위해서 ios앱을 만드는 것 외에 다른 방법이 없었다.

하지만 16.4 업데이트가 릴리즈 된 이후 아이폰, 안드로이드 , 크롬, 파이어폭스, 엣지, 오페라 , 사파리 에서 앱 푸시 기능이 작동되도록 되었다.

웹 푸시 기능

먼저 서버에서 공개 키와 개인 키를 생성한다. (알림에 서명하게 된다 )
서명을 사용하여 Apple, google 등 알림 서버와 서비 인증을 한다.

하지만 이를 ‘ web-push ‘ 패키지에서 가능하게 할수 있다.


import web push from ‘web-push’;

const keys = web push.generateVAPIDKeys();
console.log(keys)
//{ publickKey: “” , privateKey: ‘’,}

서비스 워커

서비스 워커를 프론트 측에서 등록한다.
서비스 워커는 유저의 디스크에 저장할수 있고 유저가 웹사이트를 떠난 후에도 백그라운드에서 실행되는 작은 자바스크립트 코드 조각이다.

서비스 워커에서 푸시 알림을 수신하고 표시한다.

서비스 워커가 가능하게 하려면 navigator 가 이를 지원하는지 확인 해야 한다.

if(‘serviceWorker’ in navigator) { navigator.serviceWorker.register(‘my-service-worker.js’);}

//my-service-worker.js
self.addEventListener(‘push’,(e) => {
const title= e.data.text();
e.waitUntil(self.registration.showNotification(title));
} // 서비스 워커에게 ‘푸시’ 이벤트를 수신 하도록 지시 , 데이터의 타이틀을 showNotification를 활용하여 푸시 알림을 표시한다

하지만 이코드는 iOS에서 아직 작동하지 않는다. 왜냐하면 apple에서 아무 웹사이트나 푸시 알림을 보내는 것을 허용하지 않기 때문이다. 역시 보안 성은 좋다.
하지만 사용자가 저장한 PWA는 보낼수 있다.
manifest.json을 수정하면 가능하다.

이름을 작성해주고 display 옵션에는 standalone값을 주고 아이콘을 지정해준다.
그러면 각 기기에서 사파리에서 바탕화면에 사이트를 바로가기 형식으로 만들수 있는데
만든 이후에 접근요청에 대한 허락값을 받은 후 PWA처럼 작동시킬수 있다.

이제 네이티브 앱을 구축하지 않고도 푸시를 보낼수 있다.

PWA를 활용하면 네이티브 앱 뿐만 아니라 웹에서도 사용해 확장성에 좋기 때문에 요즘 더 많이 사용되는 추세라고 들었다.
PWA가 좀더 강화 되어서 네이티브 앱도 능가하였으면 좋겠다.