Skip to content

PWAの基礎知識(その5)「Web App Manifestの使い方」

by : 2018/07/12

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。

利用できるブラウザについて

Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ(アイコンのみ)、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。

要件

技術的には以下が必須になります。

  • HTTPSサイトである
  • Service Workerを使っている
  • マニフェストファイルを配置している

Service Workerを使っている

Service Workerを使ってオンライン上のファイルをキャッシュします。まずWebブラウザ側のJavaScriptでService Worker用のJavaScriptを読み込みます。

Service Worker用のJavaScriptではキャッシュしたいファイルを読み込みます。

マニフェストファイルを設置している

マニフェストファイルは manifest.json という名前で作られることが多いようです。このファイルをHTMLのheadタグ内で読み込みます。

内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。

これをWebサイト上に配置します。

サイトを表示する

Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。

表示して少し経つとバナーが表示されます。

こういう小さいバナーの場合もあります。

バナーをタップすると、インストールの確認が出ます。

インストールするとホーム画面上にアイコンが表示されます。

アプリと同じなので、コンテクストメニューがブックマークとは異なります。

アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。


Web App Manifestはまだブラックボックスな動作もあります(バナーが表示されるタイミングや再表示させる方法など)。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。

とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。

From → HTML5

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

w

%s と連携中

%d人のブロガーが「いいね」をつけました。