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.
   

   View Slide

2. © ZOZO NEXT, Inc.
   株式会社ZOZO NEXT
   MATRIX
   木下 郁英
   2019年入社。
   新規事業専門の部署で、
   WebやiOSアプリの開発を楽しんでいます！
   ビール・日本酒、グリーンソフト（和歌山名物）が好きです。
   　　　　　@pkino / 　 @i_kinopee
   2
   

   View Slide

3. © ZOZO NEXT, Inc.
   3
   ZOZO NEXTは、ファッション領域におけるユーザーの課題を
   想像しテクノロジーの力で解決することで、より多くの人が
   ファッションを楽しめる世界の創造を目指す企業です。
   Create the Future of Fashion
   and the NEXT Big Thing.
   

   View Slide

4. © ZOZO NEXT, Inc.
   ABOUT ZOZO
   4
   https://zozo.jp/ https://wear.jp/ https://fbz.zozo.com/
   

   View Slide

5. © ZOZO NEXT, Inc.
   5
   

   View Slide

6. © ZOZO NEXT, Inc.
   ● PWAって何？という方
   ● 具体的にPWAで何ができるのか知りたい方
   ● PWAの導入を迷っている方
   6
   発表のターゲット
   

   View Slide

7. © ZOZO NEXT, Inc.
   7
   目次
   ● PWAとは？
   ● PWAの歴史
   ● PWAを特徴づける機能
   ○ オフライン・ホーム画面に追加・プッシュ通知など
   ● iOSにおける対応状況
   ● PWAの成果事例
   ● PWAのこれから
   ● PWA活用のフローチャート
   

   View Slide

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/
   

   View Slide

9. © ZOZO NEXT, Inc.
   9
   PWAを特徴づける要素
   ● 発見可能: 検索エンジンで見つけられる
   ● インストール可能: アプリをホーム画面に追加できる
   ● リンク可能: URLでブラウザから開ける
   ● ネットワーク非依存: 貧弱なネットワーク環境でも使用できる
   ● 進化的: 基本的な機能は古いブラウザでも使用できる
   ● 再エンゲージ可能: 通知を送ることができる
   ● レスポンシブ: 様々なブラウザで使用できる
   ● 安全: 機密情報を保護できる
   https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
   

   View Slide

10. © ZOZO NEXT, Inc.
    10
    つまりPWAとは、
    https://web.dev/what-are-pwas/
    Web Appsに
    Native Appsの要素をプラスしたもの
    Web Appsのメリット
    単一のコードベースで、デバイスを問わずリンク
    1つであらゆるユーザーに届
    けることができる
    Native Appsのメリット
    インストールが可能でホーム画面に常に存在し、オフラインでも動作し、カメラ
    など様々なハードウェアにアクセスできる
    

    View Slide

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
    

    View Slide

12. © ZOZO NEXT, Inc.
    12
    PWA実現に必要なもの
    ● 安全なコンテキスト (HTTPS)
    ● サービスワーカー
    ○ ブラウザとネットワーク間の仮想プロキシ
    ● マニフェストファイル
    ○ アプリがどのように表示されるかなどの設定が記述された
    JSONファイル
    https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps
    

    View Slide

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: アプリアイコンの画像
    

    View Slide

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: 特定のページに移動できる
    

    View Slide

15. © ZOZO NEXT, Inc.
    15
    オフラインでも動くように
    ● App Shellモデル
    ○ 必要最小限のユーザーインターフェイスをキャッシュし、オフラインでも利用可能にする手法
    ○ キャッシュを利用すれば通信せずに画面が表示され、ユーザーの体感速度も向上
    https://web.dev/install-criteria/
    

    View Slide

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
    

    View Slide

17. © ZOZO NEXT, Inc.
    17
    HTMLのheadの一部分
    https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/App_structure
    
    ……
    
    
    
    
    
    ● マニフェストファイルの読み込
    み
    ● app.jsの読み込み
    

    View Slide

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を登録
    

    View Slide

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'
    ];
    ● キャッシュするファイルなどを配
    列にする
    

    View Slide

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)
    

    View Slide

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に割り込んで、存在する
    場合はキャッシュを返す
    

    View Slide

22. © ZOZO NEXT, Inc.
    22
    ホーム画面に追加
    ● ホーム画面から簡単に発見・アクセス可能
    ● Spotlightなどのデバイス検索エンジンにも表示
    https://web.dev/install-criteria/
    https://ambientweaving.lab.zozo.jp/
    

    View Slide

23. © ZOZO NEXT, Inc.
    23
    iOSでのホーム画面に追加
    ● Safariからのみ追加可能
    ○ 他のブラウザからは追加不可
    ○ ユーザーが能動的に共有ボタンから追加する
    必要がある
    https://web.dev/learn/pwa/installation/#ios-and-ipados-installation https://ambientweaving.lab.zozo.jp/
    

    View Slide

24. © ZOZO NEXT, Inc.
    自動プロモーションの例
    24
    ホーム画面に追加を促す
    ※iOS, iPadOS以外の場合
    ● 自動プロモーション
    ○ ほとんどのブラウザで自動的に表示されるプ
    ロモーション
    ● 独自のプロモーション
    ○ ボタン・固定ヘッダー・スナックバーなどを利用
    ○ ECサイトなどでは、コンバージョン後にボタン
    を配置すると効果的
    https://web.dev/promote-install/ https://ambientweaving.lab.zozo.jp/
    

    View Slide

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
    

    View Slide

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. 許可されている場合、
    通知を実行
    

    View Slide

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. 購読したことをサーバーに
    通知
    今後のプッシュ対象に含めるよ
    うサーバーに通知
    

    View Slide

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. 購読したことをサーバーに
    通知
    今後のプッシュ対象に含めるよ
    うサーバーに通知
    

    View Slide

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. それを用いてユーザーにプッシュを実行
    

    View Slide

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
    

    View Slide

31. © ZOZO NEXT, Inc.
    31
    PWA達成度のチェック方法
    基本的なPWAの達成度を確認したい場合に便利
    ● LighthouseによるPWAのチェック
    https://developer.chrome.com/docs/lighthouse/overview/
    ● PWAのチェックリスト
    https://web.dev/pwa-checklist/
    Lighthouseでの確認例
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

36. © ZOZO NEXT, Inc.
    36
    PWA活用のフローチャート
    世界中で利用されるサービスか？
    デバイス性能に応じて、ネイティブア
    プリとPWAを使い分ける
    ネイティブアプリが存在するか？
    Yes No
    UX向上が必要か？
    PWAを導入する
    ネイティブアプリを
    活用（導入）する
    そのままウェブアプリを活用する
    高度な機能・性能が必要か？
    Yes
    No
    Yes
    Yes No
    No
    

    View Slide

37. © ZOZO NEXT, Inc.
    37
    ZOZO NEXTでは、
    新規事業開発に
    挑戦する仲間を
    募集しています。
    https://zozonext.com/recruit
    

    View Slide

38. View Slide