※ 본 문서는 미숙하지만 PWA를 따라해본 초급 개발자의 소개입니다.
구글의 PWA는 단순히 말하자면 웹앱입니다. 웹사이트를 앱으로 만들어 주죠.
많은 웹 개발자들이 앱 개발도 해보고 싶어하지만 현실은?
리액트 : 환경설정 복잡, 개발후 앱으로 패키징시 구현해야할 요소가 많음
자마린 : 위와 비슷함, 크로스플랫폼의 취약점중 하나인 네이티브 기능들을 쓰는데 애로사항이 꽃핌
덤으로 한글 유저수 부족에 따른 국내 보급률 미미...
아 물론 PWA는 아직 개발중인 요소가 많아서 해외에서도 관련 레퍼런스가 많지 않습니다 껄껄껄
그럼에도 불구하고 소개해 드리는 이유는 바로 편의성때문이죠..
더욱이 국내는 안드로이드 보급률이 높은편이라 PWA가 안드로이드에서 잘 동작하는것과도 궁합이 맞습니다.
1. 웹사이트를 웹앱으로 바꾸는 초간단 방법.
- 자신의 웹사이트 index.html 과 같은 폴더 위치에 manifest.json 파일을 만들고 아래와 같이 작성합니다.
{
"name": "SAC Radio",
"short_name": "SAC Radio
",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
- 웹사이트의 첫 시작페이지 역할을 하는 (index.html과 같은) 부분에 아래와 같은 html 태그를 추가합니다.
( <head> </head> 사이에 넣어주셔야 합니다 )
<link rel="manifest" href="/manifest.json">
( 주의하실점은 웹사이트가 https 로 동작되어야한다는 것입니다. http 는 보안이슈로 지원하지 않는다고 합니다. )
- 정상적으로 추가시 안드로이드에서 PWA가 적용된 사이트에 접속하면 아래와 같은 옵션이 추가됩니다.
- 바로 "홈 화면에 추가" 입니다. 그럼 홈 화면에 추가를 하면 어떻게 되느냐?
- 다른 어플들처럼 위장(?)한 SAC-Radio 웹앱을 보실수 있습니다.
( 삭제할때 여타 다른 앱들처럼 지우시면 됩니다. )
안드로이드는 모바일 크롬에서 우측 상단탭 클릭후 홈 화면에 추가,
아이폰은 사파리에서 하단 내보내기 버튼 클릭후 홈 화면에 추가로 어플들처럼 설치하실 수 있습니다.
2. 웹사이트에서 블루투스 쓰는 초간단 방법.
- 아래 코드를 서비스 워커로 실행할 js 파일에 작성합니다.
// Step 1: Scan for a device with 0xffe5 service
navigator.bluetooth.requestDevice({
filters: [{ services: [0xffe5] }]
})
.then(function(device) {
// Step 2: Connect to it
return device.gatt.connect();
})
.then(function(server) {
// Step 3: Get the Service
return server.getPrimaryService(0xffe5);
})
.then(function(service) {
// Step 4: get the Characteristic
return service.getCharacteristic(0xffe9);
})
.then(function(characteristic) {
// Step 5: Write to the characteristic
var data = new Uint8Array([0xbb, 0x25, 0x05, 0x44]);
return characteristic.writeValue(data);
})
.catch(function(error) {
// And of course: error handling!
console.error('Connection failed!', error);
});
- 서비스 워커로 이 소스를 구동시키면 핸드폰의 블루투스 기능을 사용할 수 있습니다.
( 서비스 워커가 실행 가능한 환경에서만 동작되게 하여 일반 사이트 방문시에는 동작하지 않음. )
- 네이티브 기능을 별도의 sdk 나 api 를 사용하지 않고도 쓸 수있습니다!!
3. PWA의 핵심! 서비스 워커란 무엇인가?
- 자바스크립트로 모바일 디바이스의 네이티브 기능들 (앱푸시,GPS,블루투스 등) 을 쓸 수 있게 해줍니다.
- 음... 이에 대한건 저도 구글 개발자 가이드를 보면서 진행해 봤지만 구글 공식 문서만큼 이쁘게 설명하기엔 아직 미숙해서 ㅠㅠ
- 미안하다!! https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko
- 원리라고 한다면, 서두에 크롬이라고 말했듯이 크롬의 기능을 사용한다고 보시면 됩니다.
헉헉... 아직 미숙하기도 하고 PWA 가이드 따라하다가 새로운 기능이 계속 튀어나와서 적용해보느라 시간가는줄 몰랐습니다.
수박 겉햟기지만, 직접 써본결과 느낀 장점은 아래와 같습니다.
a. 웹사이트를 진짜 앱처럼 포장할 수 있다.
b. 웹개발자가 스마트폰의 장치들을 사용할 수 있다.
c. 웹사이트를 통째로 저장하여 오프라인 모드에서도 동작하게 할 수 있다. ★★★★★
단점이라면,
d. 사용자가 설치하기 번거로움
e. 설치하지 않으면 위의 기능들을 쓸 수 없음
좀 더 간편하게 PWA를 앱으로 설치하게끔 하는걸 찾다가 GG..
그리고 작업한 결과물 : https://radio.sac.ac
이걸로 불금을 보낸건 함정(?)이지만, 주말에 재충전좀 했다가 나중에 시간나면 PWA 기능들에 대해서 하나씩 간결하게 풀어보도록 하겠습니다.
꽤나 쓸만하겠네요