PWAの今とこれから、iOSでの対応状況 / PWA now and in the future, status of support on iOS

ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。

この発表では、PWAの現状とその可能性についてお話しします。

- PWAとは？
- PWAの歴史
- PWAを特徴づける機能（オフライン、ホーム画面に追加、プッシュ通知
、Progressive Enhancement）
- iOSにおける対応状況
- PWAの成果事例
- PWAのこれから
- PWA活用のフローチャート

弊社のAmbient Weavingのサイトはこちら
https://ambientweaving.lab.zozo.jp/

Transcript

1. PWAの今とこれから、 iOSでの対応状況 iOSDC Japan 2022 Day0 2022/09/10 18:10~ Track E 株式会社ZOZO NEXT MATRIX 木下 郁英 Copyright © ZOZO NEXT, Inc.
2. © ZOZO NEXT, Inc. 株式会社ZOZO NEXT MATRIX 木下 郁英 2019年入社。 新規事業専門の部署で、 WebやiOSアプリの開発を楽しんでいます！ ビール・日本酒、グリーンソフト（和歌山名物）が好きです。 　　　　　@pkino / 　 @i_kinopee 2
3. © ZOZO NEXT, Inc. 3 ZOZO NEXTは、ファッション領域におけるユーザーの課題を 想像しテクノロジーの力で解決することで、より多くの人が ファッションを楽しめる世界の創造を目指す企業です。 Create the Future of Fashion and the NEXT Big Thing.
4. © ZOZO NEXT, Inc. ABOUT ZOZO 4 https://zozo.jp/ https://wear.jp/ https://fbz.zozo.com/
5. © ZOZO NEXT, Inc. 5
6. © ZOZO NEXT, Inc. • PWAって何？という方 • 具体的にPWAで何ができるのか知りたい方 • PWAの導入を迷っている方 6 発表のターゲット
7. © ZOZO NEXT, Inc. 7 目次 • PWAとは？ • PWAの歴史 • PWAを特徴づける機能 ◦ オフライン・ホーム画面に追加・プッシュ通知など • iOSにおける対応状況 • PWAの成果事例 • PWAのこれから • PWA活用のフローチャート
8. © ZOZO NEXT, Inc. 8 PWAとは？ 新しいウェブAPI とプログレッシブエンハスメント *を使用して、ウェブアプリにネイティブアプリと同様の使い勝手をもた らすもの * 基本となる機能は新旧関わらず全てのブラウザで動作するようにして、新しいブラウザではより高度な装飾を追加して実装する開発戦略 Progressive Web Apps (PWA) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps https://uxdaystokyo.com/articles/glossary/progressive-enhancement/
9. © ZOZO NEXT, Inc. 9 PWAを特徴づける要素 • 発見可能: 検索エンジンで見つけられる • インストール可能: アプリをホーム画面に追加できる • リンク可能: URLでブラウザから開ける • ネットワーク非依存: 貧弱なネットワーク環境でも使用できる • 進化的: 基本的な機能は古いブラウザでも使用できる • 再エンゲージ可能: 通知を送ることができる • レスポンシブ: 様々なブラウザで使用できる • 安全: 機密情報を保護できる https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
10. © ZOZO NEXT, Inc. 10 つまりPWAとは、 https://web.dev/what-are-pwas/ Web Appsに Native Appsの要素をプラスしたもの Web Appsのメリット 単一のコードベースで、デバイスを問わずリンク 1つであらゆるユーザーに届 けることができる Native Appsのメリット インストールが可能でホーム画面に常に存在し、オフラインでも動作し、カメラ など様々なハードウェアにアクセスできる
11. © ZOZO NEXT, Inc. 11 PWAの歴史 • Steve JobsがPWAを予言していた？ ◦ 2007: Jobs「Safariブラウザを使えばiPhoneに入っているアプリと同様の動作をする web2.0とAJAXのア プリを作ることができる」（結局 2008年にApp Storeが開始） ◦ 2015: PWAという言葉が作られる ◦ 2016: Google I/Oで正式に発表 ◦ 2017: Windowsでサポートが決定 ◦ 2018: Microsoft EdgeとWindows10で実行可能にすることを決定 ◦ 2018: Safari 11からサービスワーカーに対応することを決定 https://medium.com/progressivewebapps/history-of-progressive-web-apps-4c912533a531
12. © ZOZO NEXT, Inc. 12 PWA実現に必要なもの • 安全なコンテキスト (HTTPS) • サービスワーカー ◦ ブラウザとネットワーク間の仮想プロキシ • マニフェストファイル ◦ アプリがどのように表示されるかなどの設定が記述された JSONファイル https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
13. © ZOZO NEXT, Inc. 13 マニフェストファイルの例 https://web.dev/install-criteria/ { "short_name": "PWA101", "name": "What’s PWA?", "icons": [ { "src": "/images/icons-vector.svg", "type": "image/svg+xml", "sizes": "512x512" }, { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, …… • short_name、name: アプリアイコンの下 に表示され、スペースが狭い場合は short_nameが利用される。 • icons: アプリアイコンの画像
14. © ZOZO NEXT, Inc. 14 マニフェストファイルの例 https://web.dev/install-criteria/ "start_url": "/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/", "theme_color": "#3367D6", "shortcuts": [ { "name": "What's PWA?", "short_name": "Top", "description": "View PWA information", "url": "/top?source=pwa", "icons": [{ "src": "/images/pwa.png", "sizes": "192x192" }] }, { "name": "How to become installable?", "short_name": "Installable", …… • start_url: PWA起動時のURL • background_color: スプラッシュ画面の色 • display: PWAの起動方法 • scope: サービスワーカーが管理する範囲 • theme_color: ステータスバーの色 • shortcuts: 特定のページに移動できる
15. © ZOZO NEXT, Inc. 15 オフラインでも動くように • App Shellモデル ◦ 必要最小限のユーザーインターフェイスをキャッシュし、オフラインでも利用可能にする手法 ◦ キャッシュを利用すれば通信せずに画面が表示され、ユーザーの体感速度も向上 https://web.dev/install-criteria/
16. © ZOZO NEXT, Inc. 16 オフラインでも動くように • 処理の流れ 1. HTMLからCSS, JS（app.js）などを読み込み 2. app.jsがサービスワーカーを登録 3. サービスワーカー（sw.js）がファイル（HTML, CSS, JSなど）を キャッシュ 4. アクセスされた際にキャッシュからレスポンスを返す（オフラ インでも右の画面が表示可能） https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure https://github.com/mdn/pwa-examples
17. © ZOZO NEXT, Inc. 17 HTMLのheadの一部分 https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure <head> …… <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="app.js" defer></script> </head> • マニフェストファイルの読み込 み • app.jsの読み込み
18. © ZOZO NEXT, Inc. 18 サービスワーカーの登録(app.js) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js'); } • サービスワーカーの詳細設定 を行うsw.jsを登録
19. © ZOZO NEXT, Inc. 19 キャッシュファイルの登録(sw.js) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure var cacheName = 'js13kPWA-v1'; var contentToCache = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', …… '/pwa-examples/js13kpwa/icons/icon-512.png' ]; • キャッシュするファイルなどを配 列にする
20. © ZOZO NEXT, Inc. 20 キャッシュの実行(sw.js) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure self.addEventListener('install', function(e) { console.log('[Service Worker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[Service Worker] Caching all: app shell and content'); return cache.addAll(contentToCache); }) ); }); • 配列のファイルを全てキャッ シュ(addAll)
21. © ZOZO NEXT, Inc. 21 キャッシュの利用(sw.js) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(r) { console.log('[Service Worker] Fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cacheName).then(function(cache) { console.log('[Service Worker] Caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); …… • fetchに割り込んで、存在する 場合はキャッシュを返す
22. © ZOZO NEXT, Inc. 22 ホーム画面に追加 • ホーム画面から簡単に発見・アクセス可能 • Spotlightなどのデバイス検索エンジンにも表示 https://web.dev/install-criteria/ https://ambientweaving.lab.zozo.jp/
23. © ZOZO NEXT, Inc. 23 iOSでのホーム画面に追加 • Safariからのみ追加可能 ◦ 他のブラウザからは追加不可 ◦ ユーザーが能動的に共有ボタンから追加する 必要がある https://web.dev/learn/pwa/installation/#ios-and-ipados-installation https://ambientweaving.lab.zozo.jp/
24. © ZOZO NEXT, Inc. 自動プロモーションの例 24 ホーム画面に追加を促す ※iOS, iPadOS以外の場合 • 自動プロモーション ◦ ほとんどのブラウザで自動的に表示されるプ ロモーション • 独自のプロモーション ◦ ボタン・固定ヘッダー・スナックバーなどを利用 ◦ ECサイトなどでは、コンバージョン後にボタン を配置すると効果的 https://web.dev/promote-install/ https://ambientweaving.lab.zozo.jp/
25. © ZOZO NEXT, Inc. 25 通知・プッシュ • Notification APIとPush APIの2つを利用 ◦ Notification API: 通知センターに表示するシステム通知を制御 ◦ Push API: サーバーからメッセージ (プッシュ通知) を受信できるようにする https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push
26. © ZOZO NEXT, Inc. 26 Notification API https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push Notification.requestPermission().then(function(result) { if(result === 'granted') { var notifTitle = 'Title; …… var options = {body: notifBody, icon: notifImg} var notif = new Notification(notifTitle, options); } }); 1. パーミッションの結果 (result)の確認 2. 許可されている場合、 通知を実行
27. © ZOZO NEXT, Inc. 27 Push API(app.js) navigator.serviceWorker.register('service-worker.js') .then(function(registration) { // 1. 購読を設定 return registration.pushManager.getSubscription() .then(async function(subscription) { … return registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: convertedVapidKey }); }); }).then(function(subscription) { // 2. 購読したことをサーバーに通知 1. 購読を設定 サービスワーカーでプッシュを 受け取れるよう設定 2. 購読したことをサーバーに 通知 今後のプッシュ対象に含めるよ うサーバーに通知
28. © ZOZO NEXT, Inc. 28 Push API(app.js) navigator.serviceWorker.register('service-worker.js') .then(function(registration) { // 1. 購読を設定 }).then(function(subscription) { // 2. 購読したことをサーバーに通知 fetch('./register', { method: 'post', headers: { 'Content-type': 'application/json' }, body: JSON.stringify({ subscription: subscription }), }); }); 1. 購読を設定 サービスワーカーでプッシュを 受け取れるよう設定 2. 購読したことをサーバーに 通知 今後のプッシュ対象に含めるよ うサーバーに通知
29. © ZOZO NEXT, Inc. 29 Push API(sw.js) https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push self.addEventListener('push', function(event) { const payload = event.data ? event.data.text() : 'no payload'; event.waitUntil( self.registration.showNotification('Push Notification', { body: payload, }) ); }); 1. プッシュイベントが来たら、データ (event.data)を取得 2. それを用いてユーザーにプッシュを実行
30. © ZOZO NEXT, Inc. 30 プログレッシブエンハンスメント • 基本の機能は新旧問わず様々なブラウザで利用できるようにし、新しいブラウザではより高度な装飾や機能を 利用できるようにしようと、 2003年に提唱されたデザイン戦略 • 様々な機能を実現 ◦ オフラインでメディアを再生 (キャッシュ・IndexedDB) ◦ バックグラウンドでのメディアダウンロード (Background Fetch API) ◦ 他のアプリとの連携 (Web Share API, Web Share Target API・Contact Picker APIなど) ◦ 状態の同期 (Background Sync API) ◦ ハードウェアメディアキー の利用(Media Session API) ◦ マルチタスク・ショートカット ◦ アプリアイコンのバッジ (Badging API) ◦ 画面オンの制御 (Screen Wake Lock API) https://web.dev/app-like-pwas/ http://hesketh.com/publications/progressive_enhancement_and_the_future_of_web_design.html
31. © ZOZO NEXT, Inc. 31 PWA達成度のチェック方法 基本的なPWAの達成度を確認したい場合に便利 • LighthouseによるPWAのチェック https://developer.chrome.com/docs/lighthouse/overview/ • PWAのチェックリスト https://web.dev/pwa-checklist/ Lighthouseでの確認例
32. © ZOZO NEXT, Inc. 32 PWAを各ストアで配信する • ネイティブアプリでラップすることで実現 ◦ アプリストアからダウンロード可能 ◦ スタンドアロンで起動可能 • ツールが充実 ◦ Bubblewrap: CLIでAndroidアプリを生成できる ◦ PWABuilder: GUIでiOS (experimental), Android, Windows, Metaのアプリを生成できる https://web.dev/using-a-pwa-in-your-android-app/
33. © ZOZO NEXT, Inc. 33 iOSにおけるPWAのサポート • Safari 11.3: サービスワーカー対応、ホーム画面に追加、検索への表示 • Safari 12.1: 画面スワイプでの操作 • Safari 13.1: カメラの起動 • Safari 15.4: マニフェストファイル内のicons • （予定）Safari 16: プッシュ通知、バナー通知（まずは iPadOSから、iOSは2023年） https://firt.dev/notes/pwa-ios/ https://qiita.com/zprodev/items/e5db743727c5722874cb https://developer.apple.com/videos/play/wwdc2022/10098/
34. © ZOZO NEXT, Inc. 34 PWAの成果事例 • 日本経済新聞 (2018): コンバージョンが58%増、デイリーユーザーが49%増、セッションあたりPVが2倍 • Twitter (2017): セッションあたりのページ数が 65%増、ツイートが75%増、バウンス率が20％減、アプリサイズ が97%減 • Trivago (2017): プッシュ通知によるクリックが 97%増、オフラインから復帰後のユーザーの 67%が利用を継続 • Hulu (2019): デスクトップアプリを置き換えて再訪問数が 27%増 https://web.dev/what-are-pwas/
35. © ZOZO NEXT, Inc. 35 PWAのこれから • プラスの事象 • iOSのSafariを含めて、PWAに関する機能の開発が活発化 • Microsoft StoreではPWAのアプリが増加 • マイナスの事象 • ハイエンドデバイスの普及・良好な通信環境という条件の日本では、 PWAは普及しにくい ◦ ハイエンドデバイス→ネイティブアプリを利用 ◦ 良好な通信環境→オフラインにならないので、ウェブアプリで十分 https://www.neowin.net/news/the-hulu-app-for-windows-10-is-becoming-a-pwa/ https://www.windowscentral.com/pwas-wed-love-see-microsoft-store-windows-10
36. © ZOZO NEXT, Inc. 36 PWA活用のフローチャート 世界中で利用されるサービスか？ デバイス性能に応じて、ネイティブア プリとPWAを使い分ける ネイティブアプリが存在するか？ Yes No UX向上が必要か？ PWAを導入する ネイティブアプリを 活用（導入）する そのままウェブアプリを活用する 高度な機能・性能が必要か？ Yes No Yes Yes No No
37. © ZOZO NEXT, Inc. 37 ZOZO NEXTでは、 新規事業開発に 挑戦する仲間を 募集しています。 https://zozonext.com/recruit