KANSOCK.INDUSTRIES の PWA を iOS (iPad Pro 11 inch) Safari 向けに対応してみる

2019-04-11

前回は、このサイトをデスクトップ PWA 化してみるというのをやりました。

デスクトップ PWA に対応したということは、つまりスマートフォン向けにも対応が済んでいることになるので、Android で見ると、こんな感じで、ホーム画面に追加バナーが出ます。この機能は、App Banner というそうです。

スマホでの Home 画面に追加バナー

では、iOS で見てみましょう。

僕は iPad Pro 11 インチを持っているので、これで PWA ができるとデスクトップ PWA のように扱えるのでありがたいです。ということで、昨日の時点のサイトを Safari で確認すると、確かに「ホームへ追加」の機能は確認できます。

iOS Safari の「ホームへ追加」

でも、実際に追加しようとすると、ダイアログでは画面のスクリーンショットがアイコンとして表示されてしまいます。

iOS Safari の PWA インストールダイアログ

実際にアイコンはこうなります。

iOS にインストールされた PWA のアイコン (iOS 用設定を適用前)

まだ manifest.json からアイコン情報を取得するようになっていないのか、Apple が独自仕様を進むのかはわかりませんが、以下のように iOS 用のアイコン設定を HTML 内に記載しないといけないようです。

<link rel="apple-touch-icon" href="/static/img/icons/icon-192x192.png" sizes="192x192"/>

設定をしてしまえば「ホームへ追加」ダイアログには以下のように出るようになります。

iOS Safari の PWA インストールダイアログ (iOS 用設定を適用後)

ということで、無事 iOS Safari でも PWA が動作することが確認できました。

iOS にインストールされた PWA のアイコン (iOS 用設定を適用後)

manifest.json にあるアプリケーション名が読み込まれている点からもインストールされたことが確認できます。

ARTICLES

原(はら) 一浩(かずひろ)

カンソクインダストリーズ代表 / グレーティブ合同会社代表

1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール＆キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。