Webアプリの新機能

♪ ♪

こんにちは Safariチームの エンジニアのRachelです Webアプリの最新情報について 皆さんに共有できて光栄です 初代iPhoneのリリース以来― 私たちはWebアプリに 時間を費やしてきましたが Webアプリは改良され続けています iOSおよびiPadOS 16.4では バッジをサポートする― Webプッシュ標準を使用して ホーム画面のWebアプリに 通知を追加しました また iOSとiPadOSブラウザの ホーム画面に追加するAPIを追加しました

iOSおよびiPadOS 17の新機能である 「ホーム画面に追加」が Safariビューコントローラで 利用できるようになりました iOSブラウザや多くのアプリ内ブラウザに ホーム画面Webアプリを追加できます macOS Sonomaの新機能として Mac上でWebアプリが使用できます Mac上のWebアプリを使用すると 他のブラウジングとは別に― 頻繁に利用するWebサイトに特化して それに集中することができます iOSと同様にWebアプリを作成するには WebサイトをDockに追加します

Wikipediaを閲覧していますが それをDockに追加したいと考えています ファイルメニューを開き 「Dockに追加...」を選択します このサイトのアイコン 名前 URLが表示されるようになりました 名前を簡略化したいと思います 必要ならアイコンを変更できますが このアイコンはいい感じです 「追加」をクリックすると Dockに新しいアイコンが作成されます ここではSafariを閉じて WikipediaのWebアプリを開きます

このWebアプリを立ち上げれば このサイトをアプリのように使用できます まだアカウントにログインしています これはWebサイトがDockに追加される際 SafariがCookieをコピーするためです ナビゲーションボタンを備えた シンプルなツールバーがあります そして サイトのテーマカラーが ツールバーに溶け込んでいます デベロッパは ナビゲーションボタンを 表示するかどうかを管理できます 今日はまずMac上のWebアプリが そのままの状態ですべてのWebサイトで どのように動作するかを説明します 次に Webアプリの動作を カスタマイズして ユーザーに ベストの体験を提供する方法 について説明します 最後に Webアプリをアクティブに 使用していないときでも ユーザーに連絡する方法を提供する― サウンドやバッジなどの 通知について説明します まずはじめにWebアプリがどのように 動作するのか見てみましょう Mac上のWebアプリは デベロッパによる 導入準備なしで問題なく動作します どんなWebサイトでも Webアプリにすることができます Mac上のWebアプリは macOS上のネイティブアプリに期待される― 機能の多くと完全に統合されています

すでにDockに追加した Webアプリを見てみましょう このサイトには Webアプリマニフェスト などのWebアプリ固有の機能はなく― 見栄えも良く― スタンドアロンWebアプリとして 機能します

すべてのMacアプリと同様に Webアプリはステージマネージャや Mission Controlやコマンド+タブなどの キーボードショートカットと相性が良いです

WebアプリDockや Launchpad そして Spotlight検索から開けます

Webアプリは iCloudキーチェーンおよび Credential Provider Extension APIを採用した― サードパーティアプリからの 自動入力の認証情報で動作します

ユーザーはプライバシーを管理でき システムの許可プロンプトや システム設定のプライバシーと セキュリティセクションを通じて ネイティブアプリと同じ方法で Webアプリへのカメラ マイクおよび 位置情報へのアクセスを許可できます これはデフォルトの動作ですが Webサイトを使用するユーザー向けに 体験をカスタマイズすることもできます WebページがmacOSのDockに追加されると それは常にWebアプリとして扱われます デベロッパは Webアプリのウインドウの ツールバーの初期動作を コントロールできます デフォルトの動作では ナビゲーション コントロールのツールバーが表示されます これは 独自の ナビゲーションコントロールを持たない― サイト内を移動する場合に役立ちます

サイトに独自のナビゲーションコントロール がある場合 またはサイトのコンテキストで ナビゲーションコントロールが必要ない場合 ツールバーを表示したくない場合があります これをスタンドアロン表示モードと呼びます

iOSのデフォルトの動作は macOSとは異なります ホーム画面に追加されたWebサイトは デフォルトのブラウザで開きます これにより ユーザーはホーム画面から 直接よく使うサイトに 簡単にアクセスできます スタンドアロン表示モードで iOS およびiPadOSの ホーム画面に追加されたWebサイトは ホーム画面Webアプリになります ホーム画面WebアプリはiOS上で スタンドアロンのアプリのような ユーザー体験を提供し ブラウザとは別の Cookiとストレージを備えています ツールバーなどの ブラウザが提供するUIはなく すべてのコンテンツは Webページからのものです iOS上のサイトでWebプッシュとバッジを 使用できるようにしたい場合は スタンドアロン表示モードを 使用する必要があります

表示モードを設定し Webアプリの マニフェストをサイトに追加します Webアプリマニフェストは Webアプリ関連機能の 意図する動作を Webサイトがシステムに伝える方法です WebアプリのマニフェストをWebサイトに 追加するには HTMLの先頭にある― JSONファイルにrel="manifest"の リンクを追加するだけです ここでは「manifest.json」 という名前を付けました

対応するマニフェストファイルに Webサイトに適用する キーと値を追加します まず名前を設定します これはWebサイトのタイトルではなく Webアプリ名として使用したいものです Webサイトのタイトルがかなり長いためです

表示モードを変更するには 表示を「スタンドアロン」に設定します macOSでは Webアプリにはツールバーがありません iOS およびiPadOSでは サイトはデフォルトのブラウザではなく ホーム画面のWebアプリで開きます 次に Webアプリ内でクリックされた リンクが開く場所について説明します すべてのWebアプリには 関連するスコープがあります このスコープ内のリンクは Webアプリ内で開きます デフォルトのスコープは Webアプリの 作成に使用されるWebページのホストです Webアプリマニフェストを使用して スコープをさらに絞り込み サイト上の特定のパスに 制限することもできます たとえば「Browser Pets」Webアプリで このリンクをクリックして 別のページ「webkittens」に移動すると Web Kittensはサイトの example.comにある 別のページにすぎないため Webアプリ内にいることがわかります ここで apple.comへの リンクをクリックすると example.comの範囲外であるため デフォルトのブラウザで開きます apple.comへのリンクのように Web Kittens へのリンクを デフォルトのブラウザで開きたい場合は Webアプリのマニフェストで スコープを調整できます

スコープを調整するには まず「start_url」を追加します start_urlはWebアプリが最初に 開かれたときに読み込まれるURLです これにより Browser Petsの ホームページが開きます 次にスコープを追加します Browser PetsとWeb Kittensを 別のWebアプリに分けたいとします その場合 スコープを Browser Petsだけに制限できます スコープはマニフェストURLの サブディレクトリです この場合 スコープは example.com/browserpetsになります スコープ内のリンクは すべてWebアプリ内に残り スコープ外のリンクは デフォルトのブラウザで開きます iOSのホーム画面のWebアプリでは 範囲外のリンクはSafari ビューコントローラで開きます

そのため このホーム画面のWebアプリで このリンクをタップすると Safariビューコントローラで開きます

日常的に利用する多くのWebサイトを 最大限に活用するには ログインする必要があります 前に述べたように Webアプリがほとんどの ユーザーにとってすぐに快適に使えるように Mac上のWebアプリがDockに追加されるとき WebサイトのCookieがコピーされます 多くの場合 シームレスな体験を 実現するために ユーザーは Webアプリを開いたときに ログインしたままになります その時点から CookieはSafariと Webアプリの間で分離されます 認証ステータスがサイトのCookieのみに 保存されている場合― WebアプリがDockに追加されると SafariがWebサイトのCookieを Webアプリにコピーするため ユーザーは自動的にWebアプリに ログインされます 一部のWebサイトでは― 認証ステータスを Cookieとローカル ストレージの間で分割しています Webアプリが作成されると ローカルストレージはコピーされないため ユーザーはWebアプリとして サイトを使い続けるために 再認証する必要があります ユーザーにスムーズな体験を提供するには 認証ステータスを Cookie内に保存してください

前に述べたようにWebアプリのスコープを 超えるリンクは デフォルトのブラウザで開きます ユーザーがデフォルトのブラウザで Webページにログインする場合― Webアプリの追加後はCookieと ストレージが分離されるため Dockに既に追加されているWebアプリには 自動ログインされません サードパーティドメインでの OAuthによる認証は 引き続きWebアプリで開かれます これはヒューリスティックスによって 実行されます テストをしてOAuthフローがユーザーの デフォルトのブラウザで 認証体験が開く場合は apple.com/feedbackを使用して フィードバックを送信してください OAuthフローがユーザーのデフォルトの ブラウザで開かれないようにしたい場合は window.openを使用できます window.openを通じて 読み込まれたリンクは スコープに関係なく 常にWebアプリで開きます Appleは標準化組織と協力して 認証ドメインへのリンクが Webアプリのコンテキスト内に とどまるように指示する方法を デベロッパに提供しています

一部のWebサイトでは リンクを開くと 自動的にサインインする― Eメールリンクを使用しています Eメールからのリンクは デフォルトのブラウザで開くため ユーザーがすでに持っているWebアプリに 自動的にサインインすることはありません ユーザーがサイトのサインインフローに 簡単に入力できる― 代替のワンタイムコードを Eメールで提供することができます さらに便利でよセキュアな 認証体験を実現するには サイトでの認証にパスキーを 採用することを検討してください 詳細については WWDC22の 「Meet passkeys」をご覧ください Mac上のWebアプリの通知は macOS VenturaのSafariおよび iOS 16.4のホーム画面Webアプリでの 既存の標準ベースのWebプッシュ サポートへの魅力的な追加事項です では バッジやサウンドを含む通知を Webアプリに統合する方法を説明します Web標準に従って Webプッシュをすでに実装している場合は 追加の作業を行わなくても Webページのプッシュ通知が Mac上のWebアプリとして 機能するはずです Mac上のWebアプリの通知では Webアプリの アプリケーションアイコンが使用されます

Safariから発信されるWebプッシュ 通知にはSafariアイコンが表示されますが Mac上のWebアプリからの通知では Webアプリのアイコンが使用され ユーザーにコンテキストが提供されます

通知を受信したときに ユーザーの注意を引くために ユーザーのデバイスで 音を鳴らしたい場合があります それが macOS iOS iPadOSで どのように機能するかを説明します 通知APIを使用すると 通知に音を鳴らすかどうかを指定できます プラットフォームの規則に従い― iOS とiPadOSでは デフォルトで音がオンになり macOSでは デフォルトで音がオフになります プラットホームのデフォルト をオーバーライドするには サイレント値を明示的に指定します 通知をサイレントにする必要がある場合は 通知をリクエストするときに オプションで silentをtrueに設定します 通知で音を鳴らす必要がある場合は silentをfalseに設定します ネイティブアプリの通知と同様に ユーザーは通知設定を使用して 通知音をコントロールできます

バッジは Webアプリで対処すべき点があることを ユーザーに警告するのに役立ちます

iOS 16.4の ホーム画面のWebアプリと同様に Mac上のWebアプリは バッジをサポートします macOS iOS iPadOSでは バッジとプッシュ通知が 非常に密接に関連しているため ユーザーが Webアプリに 通知の送信を許可すると Webアプリが バッジを使用する権限も含まれます バッジは Webアプリが開いているときや プッシュイベントがバックグラウンドで 処理されているときに更新できます ユーザーはいつでも 「設定」でバッジの管理を行えます

Badging APIの採用の詳細については webkit.orgの「Badging for Home Screen Web Apps」をご覧ください

標準ベースの Webプッシュの採用の詳細については WWDC22の「Meet Web Push for Safari」をご覧ください

iOSのホーム画面のWebアプリと MacのWebアプリはFocusと統合され ユーザーが通知を管理できるようになります ユーザーは さまざまな集中モードで 表示したい通知を設定し すべてのデバイスの集中モードに 設定を適用できます Webアプリのマニフェストを 振り返ってみましょう 「id」マニフェストキーは同じドメイン内の 固有のWebアプリを定義します これは集中モードを 同期するために使用され 同じドメインで 複数の部分があるWebサイトで 個別の Webアプリとして扱うべき場合に便利です 特定のドメインに Webアプリが1つだけある場合は このIDを設定する必要はありません IDが指定されていない場合の フォールバックはstart_urlです Focusの優れた点の1つは ユーザーのすべてのデバイス間で 集中モードが同期される方法です

集中モードの設定の同期方法は あなたとユーザー両方がコントロールします デベロッパはサイトのさまざまな部分に 個別のWebアプリを作る場合があります たとえば ショップ用のWebアプリが1つ フォーラム用のWebアプリが1つあるとします ここで「Name」列はユーザーのiPhone またはMac上のWebアプリの名前です WebアプリマニフェストのIDキーを 使用してID「shop」で作成された― Webアプリが ショップ用であり ID「forums」で作成された― Webアプリが コミュニティのフォーラム用であることを 示すことができます このようにして ユーザーはショップや フォーラムのWebアプリに対して さまざまな通知設定を設定できます 名前とIDが一致すると 集中モードは ユーザーのデバイス全体で同期されます ユーザーは デバイス上の特定のサイトに Webアプリの複数のインスタンスを 作成できます これは 仕事用アカウントと個人用 アカウントを分けるのに役立ちます ユーザーはインスタンスごとに 異なる名前を選ぶことができます この例では 「フォーラム」と「フォーラム - 仕事」 このようにユーザーはすべてのデバイス間で 同期する各フォーラムWebアプリに対して 異なる通知や 各フォーカス設定を設定できます

今年WebKitに追加されたAPIは Webサイトの作成時に 役立つものがいくつかあります

User Activation APIが サポートされており 一時的または 固定的なユーザーアクティベーションが 発生したときに Webサイトに通知します これは 通知の送信許可の要求など ユーザーのアクティベーションに 依存する関数を 呼び出してもよいかどうかを 判断するのに役立ちます macOSおよびiPadOS用の Safari 16.4には 更新されプレフィックスのない Fullscreen APIが出荷されました また タイプと角度のプロパティと onChangeイベントハンドラを含む― Screen Orientation APIの 予備サポートも追加しました

詳細については webkit.orgの 「WebKit Features in Safari 16.4」 をご覧ください Mac上のWebアプリは すべてのWebサイトですぐに使えます Webアプリマニフェストを使用して WebサイトがDockに追加されたときの 動作をカスタマイズできます Webプッシュやバッジなど Webアプリに合わせ― 機能を実装できます SafariでのWebサイトの開発と デバッグの詳細については WWDC23の「Rediscover Safari developer features」と 「What's new in Web Inspector」 をご覧ください ご視聴ありがとうございます WWDC23をお楽しみください ♪ ♪