$30 off During Our Annual Pro Sale. View Details »

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

pkino
September 10, 2022

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/

pkino

September 10, 2022
Tweet

More Decks by pkino

Other Decks in Programming

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. 38

    View Slide