iOS 11.3에서 애플은 Progress Web Apps (PWAs)를 염두에 둔 새로운 기술들을 조용히 발표했습니다. 그것이 어떻게 움직이고, 어떤 것이 가능하거나 혹은 불가능한 점은 무엇인지, 만약 당신이 PWA를 이미 만들었다면 알아야할 점이 무엇인지 찾아봅시다.

만약 당신이 PWA가 무엇인지 모르고 이 아티클을 접했다먼, PWA에 대해서는 특별하고 정확한 정의가 없다고 말할 수 있다. 그러나 PWA는 웹 기술을 이용해서 다른 앱들처럼 오프라인에서 실행하거나 다른 앱들이 구동되는 운영체제에서 부분적으로 인스톨 된다.

대부분의 플랫폼에서 앱 스토어어를 이용하지 않아도 된다. 오직 Edge/Windows 10에서만 PWA를 스토어에서 다운받도록 하고 있다.
즉, 당신이 생각하는 대로 이제 iOS에서 앱을 앱스토어의 승인 없이도 인스톨할 수 있는 것이다. 이것이 아마 애플이 새로운 기술에 대해서 언급하지 않는 이유일 것이다; 그들은 유저들을 혼란스럽게 하고 싶지 않을 것이다. 심지어 사파리의 릴리스 노트에서도 이 기술을 언급하지 않았다.

Apple은 어쨌든 PWA를 만들지 않았나?

솔직하게, 구글이 크롬 팀과 함께 PWA라는 용어를 만들어낼 동안, 사실 아이디어는 아이폰 OS 사파리에서 먼저 구현됐었다. 2007년 스티브 잡스는 ‘추가적인 한 가지’를 WWDC에서 발표했다. 그것은 어떻게 iPhone을 위한 앱을 개발할 것인가에 관한 것이었는데, 놀랍게도 web app에 관한 것이었다. 앱 스토어는 원래 로드맵에 있던 것이 아니었고 네이티브 SDK는 아이폰 첫 해 동안에는 쓸 수 없었다. 애플 입장에서는 PWA는 지금까지도 “홈스크린에서 접근할 수 있는 web app”같은 것이었고 아이콘은 webclip으로 일컬어졌다.

만약 원한다면, 작년에 내가 공유했던 키노트 컨퍼런스를 확인해보라. 영상의 10:50에서 전에 언급했었다.

하지만 이 아이디어는 11년 전에는 크게 관심을 끌지 못했고 애플은 이 플랫폼을 업데이트하는 것을 잊어, 10년동안 그것은 버그가 있거나 불안정했다. 몇 년 뒤, 노키아 N9의 MeeGo 브라우저나 Android의 크롬과 같은 다른 플랫폼들이 이 아이디어를 클론했다.

크롬은 더 나은 경험을 제공하기 위해 이 기술을 진화시키고자 했는데 대부분 서비스 워커나 웹 앱 매니페스트 같은 것이었다. 오늘 2018년 3월 30일, iOS 11.3을 시작으로 애플은 크롬, 파이어폭스, 삼성 인터넷, UC Browser, 오페라(대부분 안드로이드에서만 제공하는)와 같이 서비스 워커와 웹 앱 매니페스트를 제공하는 다른 브라우저들과 스펙을 일치시키기 시작한다. 다른 데스크톱 브라우저들은 서비스워커를 제공하나 웹 앱 매니페스트를 제공하는 것은 이번년도부터 이다.

잠깐, 그래서 앱은 더이상 앱스토어의 품질 테스트를 거치지 않아도 되는거지? 🤔

그렇다. 그러나 앱은 오직 브라우저 혹은 웹 플랫폼 보안 및 실행 모델 안에서만 움직일 것이다. 즉 당신 회사의 직원들을 위한 내부 앱 등을 (물론, 성인용 콘텐츠도) 웹 스토어의 승인 없이도 “발행” 할 수 있다. 그러나 아이폰 X의 Face ID나 증강 현실을 위한 ARKit 등 순수 네이티브 기능들에는 접근할 수 없다. 혹은 웹 플랫폼이 이런 기능들을 따라잡을 때까지 기다려야 할 것이다.

PWA는 시스템의 다른 앱들처럼 보통 웹사이트로 혹은 standalone mode로 사파리에서 구동될 것이다. 만약 PWA가 웹 뷰에서 사용될 수 있는지 궁금하다면, 사파리를 이용하거나 인스톨 된 앱 아이콘을 상상하면 안된다. 그것은 다른 브라우저를 브라우징 하는 것이나 페이스북 인앱 브라우저와 같은 것이다. (원문: The PWA can run inside Safari as any website or in standalone mode, like any other app in the system. If you are wondering if PWAs are using the Web View, that’s not the case from Safari or the installed icon, but it will be the case while browsing in other browsers or within Facebook with its In-App browser.)

iOS에서 PWA가 할 수 있는 것들

iOS의 웹 플랫폼에서 당신은 다음과 같은 것들에 접근할 수 있다.

• 위치정보
• 센서들 (자기 센서, 가속 센서, 자이로스코프)
• 카메라
• 오디오 아웃풋
• 음성 합성(Speech Synthesis, with headsets connected only)
• Apple Pay
• WebAssembly[^1], WebRTC[^2], WebGL 등 많은 실험적인 기능들.
  [^1]: WebAssembly: 브라우저에서 어셈블리어를 실행시킬 수 있도록 하는 기술
  [^2]: WebRTC: 리얼타임 커뮤니케이션 용 API로 플러그인 없이 웹브라우저 간 보이스챗, 비디오챗, 파일 공유가 가능하다.

네이티브 iOS에 비해 가지는 한계점

• 오프라인 데이터와 파일을 저장할 수 있으나 50Mb의 한계가 있음
• 만약 유저가 몇 주 동안 앱을 사용하지 않는다면 iOS는 앱의 파일을 날려버린다. icon은 그대로 홈 스크린에 있을 것이고, 만약 재접속할 시 다시 다운로드 될 것이다.
• Bluetooth, serial, Beacons, Touch ID, Face Id, ARKit, 고도계, battery information 같은 정보에 접근할 수 없다.
• 백그라운드에서 코드를 실행할 수 없다.
• contacts, background location과 같은 정보에 개인 정보나 소셜 앱에도 접근할 수 없다.
• In app 결제나 apple 기반의 서비스를 이용할 수 없다.
• 아이패드에서는 다른 앱과 스크린을 공유하는 side or split views에 접근할 수 없고 PWA는 언제나 전체 화면을 사용한다.
• Push Notification을 사용할 수 없으며 icon 뱃지나 Siri를 사용할 수도 없다.

Even if you have a PWA installed with an icon and the name Tinder, Siri can’t find it
만약 Tinder를 PWA로 인스톨한다면 이름과 아이콘이 같아도 Siri는 찾을 수가 없을 것이다.

PWA, Android에서는 할 수 있지만 iOS에서는 할 수 없는 것

• 안드로이드에서는 50Mb 이상 저장할 수 있다.
• 안드로이드는 유저가 앱을 사용하지 않아도 앱을 지우지 않지만, 저장소의 용량이 모자랄 때는 지울 수도 있다. 또한 인스톨 되고 나서 많이 사용될 경우에 PWA는 Persistant Storage를 요청할 수 있다.
• Bluetooth 억세스 가능
• Web Share for accessing native share dialog
• 음성 인식
• 백그라운드에서 싱크 가능하고, Web Push Notification도 가능함.
• 다른 유저에게 앱 인스톨 초대를 위한 웹 앱 배너 기능
• splash screen[^3] 커스터마이징 가능(일부 지원), 화면 방향 커스터마이징
• WebAPK와 크롬에서 유저는 하나 이상의 PWA를 인스톨할 수 없음
• WebAPK와 크롬에서 PWA가 setting에 뜨고 유저는 데이터 사용량도 볼 수 있다. 반면 iOS에서는 사파리 standalone 모드[^4]에서 나타난다.
• WebAPK와 크롬에서 PWA는 앱의 URL을 관리하므로, PWA 링크를 얻었을 때 browser 창이 아닌 standalone 모드에서 구동될 것이다.

[^3]: splash screen: 앱이 구동될 때 나오는 스크린
[^4]: standalone mode: 오프라인에서도 작동하는 컴퓨터 소프트웨어. 번들된 소프트웨어의 일부분이 아닐 것. 컴퓨터 프로세스와 독립해서 돌아감. OS 서비스가 돌아가지 않고도 혼자 돌아가는 것. (출처: http://qr.ae/TU1E0s)

iOS에서는 할 수 있지만 Android에서는 할 수 없는 것

• 유저는 인스톨 하기 전에 아이콘 이름을 바꿀 수 있다.
• PWA는 configuration profile에서 설정할 수 있기 때문에, 기업 유저들은 PWA 단축키를 회사에서 받을 수 있다. Safari는 이 기능에 WebClip이라는 용어를 붙이고 있다. 그러나 공식 문서에 따르면 이 기능이 Web App Manifest는 아닌 것 같다.

Configuration profile은 WebClip이나 PWA 아이콘에 포함 될 수 있다.

그런데 만약 앱스토어가 아니면 어디서 PWA를 인스톨하지? ⚠️

사파리에서는 어떤 초대장이나 프롬프트 같이 앱을 다운로드 할 계기가 없다는 것이 iOS에서의 가장 큰 문제점이 될 것이다. (반면 Android에서는 Web App Banner가 있다.) 그래서 유저는 사파리 안에서 어떻게든 PWA url에 가야 하고 수동으로 공유 버튼을 눌러 ‘홈 스크린에 추가’ 버튼을 눌러야 한다. 방문한 웹사이트에는 그것이 PWA라는 어떤 안내도 없을 것이다.

또한 크롬이나 파이어폭스, 브레이브나 엣지같이 앱 스토어에서 다운로드 할 수 있는 pseudo-browser로는 PWA를 설치하거나 서비스 워커를 사용할 수 없을 것이다.

한번 인스톨 되면, 홈 스크린의 다른 아이콘들과 똑같이 보일 것이다. 그러나 3D touch 메뉴는 제공되지 않는다. 또한 같은 PWA를 또 설치하면, 같은 PWA가 다른 아이콘으로 또 설치될 것이다. (다행히도, 인스톨 된 파일은 공유된다.)

또한 많은 웹 앱들이 네이티브 앱을 인스톨 하기 위한 링크를 가지고 있는데 PWA 안에서도 역시 보이게 될 것이다.

나 이미 PWA를 가지고 있는데, iOS에서 바로 움직일까?

당신의 PWA는 유저가 iOS 11.3으로 업그레이드 하자마자 사용할 수 있을 것이다. iOS에서 opt-in은 요구되지 않는다. 모든 PWA는 설치되자마자 사용 가능하다. 그러나 그것이 기대하는 그대로 움직일 것이라는 말은 아니다.
(우버의 PWA는 정말 대단하다. 그러나 Login버튼이나 Continue버튼을 눌러보면 인증화면은 Safari로 가고 결국 standalone PWA모드를 벗어나게 된다. 즉 쓸모가 없다.) 독자들 중에는 이미 우리가 beta버전일 때 내가 쓴 article을 읽었을 수도 있겠다. (Cupertino we have a problem)불행히도, 베타에서 발견한 많은 버그들과 한계점이 파이널 버전에도 여전히 있었다. 😒

(만약 당신이 아무것도 안한다면, PWA은 상단 검정색 바에 정말 검정색으로 시간이나 배터리 정보 등 어떠한 알림도 보여주지 않을 것이다.😣)

안되는 것

• 디스플레이: 풀스크린과 화면: minimal-ui는 iOS에서는 제대로 작동하지 않을 것이다. 풀스크린은 standalone을 시작하게 할 것이고, minimal ui는 그냥 사파리의 shorcut이 될 것이다. 당신은 딱 맞는 viewport 익스텐션을 사용하거나 이미 deprecated된 메타 태그를 사용해서 fullscreen 비스무리한 결과를 낼 수도 있을 것이다. (상태 바는 있을 것이지만 앱 위에 떠 있을 것이다.)
• 만약 백그라운드 싱크에 의존한다면 backup으로 뭔가 해야 한다.
• 화면 방향을 고정시킬 수 없다.
• 상태 바에 색깔을 넣는 등 스타일을 입힐 수 없다. 대안으로 검정이나 흰색 상태바를 위해 deprecated된 메타태그를 넣거나, css/html 트릭을 사용할 수 있다.
• 만약 당신의 PWA가 UI에 뒤로가기 동작이나 버튼을 가지고 있지 않다면 화면에서 이동할 수 없을 것이다. (스타벅스의 PWA는 ‘가입하기’ 화면에서 뒤로 돌아가기 버튼이 없어서 취소할 수가 없다. 그래서 PWA를 다시 실행해야 한다.)
• iOS는 투명 아이콘을 지원하지 않기 때문에 Android 아이콘이 iOS에는 보기 안좋을 수 있다.
• 또한 iOS는 웹 앱 매니페스트 아이콘을 사용하지 않고 apple-touch-icon 링크를 사용한다. 만약 link tag를 제공하지 않는다면, 그냥 스크린샷이 앱 아이콘이 될 것이다. (Google Keep PWA는 웹 앱 매니페스트 아이콘을 사용하기 때문에 iOS에서는 그냥 스크린샷 아이콘이 되었다.)
• splash screen이 없어서 manifest에서 적용된 색깔 속성들은 무시될 것이다.
• 매니페스트 이벤트가 실행되지 않으므로 이벤트를 통한 설치를 할 때 iOS는 사용할 수 없다. (단 navigator.standalone을 대신 사용할 수 있다.)

명심해야 할 점

• PWA는 세션 간 일정한 상태를 유지하지 않을 것이고, 만약 유저가 PWA를 나오면 다시 돌아올 때 새로 구동될 것이다. 그래서 만약 유저의 email 주소를 확인하거나 SMS 등과 같이 two-factor authentication을 할 때, 적절한 솔루션을 제공해야 한다. (백그라운드에서 구동되고 있는 앱 리스트를 볼 때 활성화되지 않은 PWA는 어쨌든 하얀 화면으로 나타난다. 앱은 실제로 돌아가고 있지 않고, 다시 돌아갈 때 처음부터 다시 시작한다는 것을 알아야 한다. 아이패드도 마찬가지다.)
• standalone mode로 앱을 구동할 때 버그가 많다. 따라서 사파리에만 의존해 테스트하지 마라.
• 만약 아이폰 X notch area를 사용하고 싶다면, html/css로 변경이 가능하다. 제대로 못하면 아마 이상한 일이 벌어질 수도 있다.
• 때때로 홈 스크린에 추가했지만 매니페스트가 사용되지 않으면 그냥 shortcut[^5]이 인스톨 된다.
• 사파리와 홈 스크린 shortcut은 같은 서비스워커와 캐시 파일을 사용한다. 사파리 뷰 컨트롤러(트위터의 인앱 브라우저 같은)는 서비스워커와 캐시를 제공하지만 세션이 닫히면 모든 데이터를 지우는 것 같다.
• 크롬이나 파이어폭스, 혹은 psuedo-browser[^6]나 페이스북 같이 web view를 사용하는 앱들은 서비스워커를 지원하지 않으므로 (베타에서는 가능하다) 어떤 파일도 인스톨 되지 않는다. 추측하기로는 서비스워커가 무엇을 하도록 앱 소유자가 결정하는데에 WKWebView가 필요한 것 같기는 한데…
• iOS에서 서비스워커를 디버그 하기 위해서는 맥OS 10.11.5, 10.12.6, 10.13.4 업데이트에서 제공하는 사파리 11.1이나 safari technology preview를 인스톨해야 한다.
• 서비스워커는 디폴트로 사용하기로 설정되어 있고, Settings의 Experimental Webkit Features에서 사용하지 않기로 변경할 수 있다. (inspector는 여전히 실험중이다. 예를 들면 캐시 스토리지 컨텐츠를 보는 기능은 아직 제공하지 않는다.)
• 때때로 복수의 PWA를 동시에 열 때 iOS 상태바가 이상해져서 아이콘과 제목이 없는 유령 앱을 보여줄 때가 있다.

[^5]: shortcut: 단축키만 shortcut이 아니고 단축 아이콘도 shortcut이라고 하는가 봄.
[^6]: pseudo-browser: 진짜 브라우저가 아닌데 브라우저인 척 하는 것. 트위터에서 링크를 클릭하면 뜨는 빌트인 브라우저 등.

지금 만들고자 하는 앱은 PWA인데, 그래서 더 이 아티클을 제대로 이해할 필요가 있다고 생각했다. 아직 앱을 만들기 위한 기반을 다지는데 집중하고 있어서 언제 앱 자체를 만드는데 시간을 쏟게 될지는 모르지만 그 동안 PWA가 더 진화했으면 좋겠다! 처음 아티클을 번역하는데 모르는 단어가 많았다. 공부가 되어서 좋구만 🤗