iOS11.3과 MacOS10.13.4 업데이트를 실시한 메모입니다.
덧붙여 필자는 iPhone 경력 9년째로, Android는 개인 구입한 적이 없습니다.

동작 확인

업데이트가 끝나면 iPhone 설정의 safari에서 할 수있는 실험적인 기능 목록에서 ServiceWorker 토글이 기본적으로 켜져 있습니다.


Mac에서 확인하면 확실히 ServiceWorker에서 제공하는지 확인할 수 있습니다. Cool!

개발 도구

위의 동작 확인으로 눈치채는 분이 계실지도 모릅니다만, serviceworker.js(worker 스크립트)나 manifest.json가 일람에 나오고 있지 않습니다.
일반적으로 iPhone을 Mac에 연결하고 Safari 개발 메뉴의 대상 장치를 클릭하면 iPhone에서 실행중인 웹 사이트의 콘솔을 볼 수 있지만 ServiceWorker 항목은 아무것도 없습니다.

iPhone의 경우, 표준으로 ServiceWorker의 디버그하는 기능을 찾을 수 없다.

데스크탑판에서는 Safari 개발 메뉴에 ServiceWorker라는 전용 항목이 늘고 있다.

데스크탑판 Safari로 액세스하고 있는 페이지만이 대상. iPhone 접속하고 있는 페이지는 제외되고 있다.

통상의 개발 콘솔의 자원 탭이나 네트워크 탭으로부터 worker 스크립트 부분이 잘라져 정리되고 있다.

cacheStorage 뷰어가 없습니다.

Chrome에서 ServiceWorker의 등록·해제나 manifest의 리뷰나 이벤트의 에뮬레이트와 같은 개발 보조는 없다.

홈 스크린 아이콘

manifest.json 아이콘이 반영되지 않습니다. 탭 화면의 스쿠쇼가 아이콘화됩니다.
원래 Mobile Safari에는 「홈 화면에 추가」라고 하는 메뉴(웹 클립)가 있어, 독자 태그 <link rel="apple-touch-icon" href="hoge.png" /> 로 아이콘 지정하는 형식이었습니다만, 아직 통합되어 있지 않은 것 같습니다.

홈 스크린에서 시작

MobileSafari의 탭이 동작 제어되어 기동할까 생각하고, 다른 앱으로서 기동합니다(아마 WebView일 것입니다).
MobileSafari가 나오거나 사라지는 헤더/바닥글은 전혀 나타나지 않습니다. Cool!

WebView에서 시작하여 필자의 테스트 앱에서 다음과 같은 상황이 발생했습니다.

LocalStorage가 별도로 취급됩니다

카메라 캡처가 오류가 발생합니다 (navigator.mediaDevices.getUserMedia가 undefined)

그 밖에도 뽀로뽀로 나올 것 같습니다.

딥링크/유니버설링크

iOS는 store에서 발행하는 app-id가 필요하지만 store 등록이 지원되지 않으므로 할 수 없습니다.

PushAPI 없음

리소스 캐시와 홈 스크린 추가만 가능합니다.

감상

개발 툴은 앞으로 확충하는 것으로 기다리고 있으면 좋을 것 같습니다만, WebView 기동이 큰 임팩트 있었습니다. PC판 Chrome에서도 PWA의 데스크탑판 앱을 설치할 수 있는 시험 기능이 플래그 첨부로 나와 있어, 비슷하게 다른 앱으로서 기동합니다. 또한 MicroSoft가 PWA를 Store 배포할 수 있다고 발표했습니다. 따라서, WebView 기동에 맞춘 설계의 재검토가 필요하다고 각오한 대로입니다.