「PWA」をiOSに導入する際の注意点とは?導入の背景や導入する際の注意点、対応機能なども徹底解説!

「PWA」とは、「Progressive Web Apps」の略で、Webサイトのコンテンツをネイティブアプリのようにスマートフォンで扱える技術です。

今回は「PWA」をiOSに導入する際の注意点に焦点を当て、その導入の背景や導入する際の注意点、対応機能などをご紹介します。気になるポイントを一挙確認してしまいましょう。

「PWA」導入の背景

iOS(Safari)は、Androidと比較すると、HTML仕様への対応がやや遅れています。
同時に「PWA」仕様への対応も遅れているため、最新のiOS15.4においても不完全な状態と言えるでしょう。

ここでは、iOSの「PWA」導入の背景について解説します。

・iOS11.3 : Web App Manifestの読み込みに対応

・Web App Manifestの読み込みに対応
・ブラウザバックできない
・別ドメインへの遷移はSafariに自動切替される
・アクティブ状態でない場合、start_urlに戻されてしまう

・iOS12.2 : 予想外のバグが混入

・別ドメインへの遷移はSFSafariViewControllerのような挙動になり、OAuthも可能
・画面端からのスワイプで戻る/進むの機能が追加
・非アクティブでもstart_urlに戻されなくなった
・タスクを切ってもstart_urlでなく、前回表示時の最終URLが開かれる問題が発生

・iOS13.0 : 要件次第では実装可能

・start_urlまわりの問題が解消
・カメラが起動できない点が問題として上がる

・iOS13.4 : それなりに使える期

・カメラが起動できるようになった
・Webアプリモードの挙動がPWAとほぼ同じに変更された

・iOS15.4:2022年3月現在

・これまで実装されていなかったプッシュ通知のサポートが期待されている(現在、試験段階)

(参考:https://developer.apple.com/support/app-store/)

「PWA」がiOSに対応している機能

「PWA」はiOS11.3から対応しています。

iOS15.4(2022年3月現在)に対応している機能は以下です。

・ホーム画面に追加
・ツールバーなしの全画面表示
・オフライン表示
・カメラやマイク、オーディオ出力
・音声認識や音声合成
・位置情報
・Bluetooth
・生体認証
・Apple Payでの支払い
・Appleでのサインイン
など

ここで考えるべきは、プッシュ通知とバナー表示機能がない点です。
Androidにはプッシュ通知とバナー表示機能があるため、iOSはやや仕様が遅れていると言えるでしょう。

これらの機能が使えないとWebアプリユーザーの目に留まりにくく、機会損失の増加やCVに繋がりにくいというデメリットがあります。

「PWA」をiOSに導入する際の注意点

ここからは、「PWA」をiOSに導入する際の注意点について解説します。

動作しない機能がある

SafariやGoogleChromeでは問題なく動作する機能が、「PWA」だと動作しない場合があります。
例えば、iOS13.4まではカメラが起動できませんでした。

iOSではユーザーが「ホーム画面に追加」を押す前にWeb App Manifestを挿入すれば、「PWA」としてホーム画面に追加できます。

そのため、バージョン判定をした上で、動的にWeb App Manifestの差し込みを行いましょう。
Web App Manifestとは、「PWA」の一部であり、アプリストアを通さずに端末のホーム画面にインストールできるものです。

Web App Manifestの対応状況に注意

Web App Manifestの対応状況にも注意しましょう。
Web App Manifestを設定しても動作しない機能がいくつかあります。

Web App Manifestを設定しても動作しない機能

例えば、ホーム画面に表示されるWebアプリのアイコンは、オリジナリティにあるアイコンに設定するかと思いますが、iOSではWeb App Manifestのiconsが無視されてしまう仕様になっています。

対策としては、従来の「ホーム画面に追加」の仕様に則り、以下のようにHTMLのlinkタグとして設定することです。

<link rel=”apple-touch-icon” href=”./icon_ios.png”>

リロード手段を考える

Androidは「PWA」でも上から下にスワイプでページ更新できる機能がありますが、iOSの「PWA」にはOS提供のページ更新操作はありません。

そのため、リロード手段が必要な場合は、自分で開発・実装する必要があります。

URLのシェア方法を考える

Androidの「PWA」の場合、通知領域で起動中のURLをコピーできますが、iOSの「PWA」では対応できません。

URLをシェアしたい場合は、Web Share APIの利用を検討しましょう。

Web Share APIとは、ブラウザの共有機能をWebサイトから実行する機能で、ユーザーが端末にインストールしているアプリに応じて利用可能な共有方法を一覧表示してくれます。

【Web Share API:公式サイト

「PWA」をiOSに導入する際は、注意点を意識し、適切な方法で導入しよう!

このページでは、「PWA」をiOSに導入する際の注意点に焦点を当て、その導入の背景や導入する際の注意点、対応機能などについて解説しました。

「PWA」をiOSに導入するとプッシュ通知やバナー表示などの機能が使えません。
そのため、「PWA」のメリットを活かしきれないというデメリットがあります。

しかし、現在iOSではプッシュ通知のサポート試験が実施されています。
実装は、iOS16以降になるかもしれませんが、実装されれば確実にユーザビリティを向上させる機能の1つとして重宝されること間違いなしです。

ユーザビリティが高いWebサイトは、SEO的観点からもプラス評価のため、ぜひこの機会に「PWA」の導入を検討してみてはいかがでしょうか。

「PWA」や「SEO」でお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数!SEOを検討する際にはぜひ一度ご相談ください。

この記事の著者

監修者 土田悠真

早稲田大学卒業後、東京地方検察庁に入庁。その後、株式会社ipeに入社。9か月でコンサルティングチームのリーダーに就任。年商150億円超えの中古品マーケットプレイス、商品数500万品超えのファッションECサイトをはじめとし、様々なジャンルのサイトをコンサルティング、分析を行う。ツイッターはこちら。
@seotsuchida

DOWNLOAD
サービス資料ダウンロード(無料)
大手実績多数の弊社サービスの概要や料金、フォロー体制など、この資料にまとめております。
資料ダウンロードはこちら
CONTACT
お問い合わせ
SEOなどサービスについてご相談がある方、人事・採用へのご不明点・ご質問など、気軽にお問い合わせください。
お問い合わせはこちら
お電話でのお問い合わせ 
03-6265-6008 9:00~18:00(平日)