コンテンツへスキップ

PWAの基礎知識(その4)「Web App Manifest」

by : 2018/06/20

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

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

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

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

機能について

Web App ManifestはWebアプリケーションをデスクトップまたはスマートフォンアプリのようにインストールできる機能になります。HTML5、JavaScriptが高機能化することによって、ローカルアプリケーションと変わらないレベルで動作するようになっています。そこで生み出されたのがWeb App Manifestになります。

同様の技術としてはCordovaやElectronが知られています。ただしWeb App ManifestはあくまでもWebアプリケーションなので、ローカルファイルにアクセスしたり、OS独自の機能は利用できません。

ブックマークとの違い

これまでもスマートフォンではホーム画面に追加する機能としてブックマークが用意されていました。しかし、Web App Manifestの場合はより能動的にユーザへインストールを呼びかけられるのが特徴です。

バナーは2回目以降の訪問者に対して表示が可能です(表示は自動で行われます)。このバナーからWebアプリケーションをインストールできます。

インストールされたアプリケーションは他のスマートフォンアプリと同じように扱われます。Androidの場合はAPKファイルとして提供されるようです。

技術要件

Web App Manifestの提供法としてはマニュフェスト用のJSONファイルをWebサイトに置くところからはじめます。これはmanifest.jsonというファイルのことが多いようです。また、アプリとしてインストールされた際のアイコンを用意します。manifest.jsonは次のような内容になります。


{
"lang": "ja",
"display": "standalone",
"short_name": "hifiveTodo",
"name": "hifiveTodo",
"orientation": "portrait",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48×48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96×96"
},
{
"src": "launcher-icon-3x.png",
"type": "image/png",
"sizes": "192×192"
}
],
"start_url": "./index.html",
"background_color": "#e1efde",
"theme_color": "#e1efde"
}

view raw

index.json

hosted with ❤ by GitHub

そして、Web App ManifestはWebブラウザがService Workerに対応していなければなりません。アプリと同様に動くので、オフラインでも問題なく利用できる必要があるためです。そして最後にサイトがHTTPSになっている必要があります。これらの条件が整ってはじめてインストール用のバナーが表示されるようになります。

インストール後の動作について

インストールされたWebアプリケーションは他のスマートフォンアプリと同じようにタップで開きます。

最初に表示するURLは指定可能です。さらにインテントにも対応しているので、特定のリソースを直接開くこともできます。

メリット

Web App Manifestを使うことで、これまでのようにGoogle PlayやApp Storeを使わなくともアプリの配布ができるようになります。Webアプリはネイティブアプリに比べて軽量であり、すぐにインストールできます。そしてオフラインでもある程度利用し続けられるのがメリットです。

アプリによってはアプリ内課金での30%の手数料であったり、配布できるアプリの種類や自由度のなさに不満を感じていることもあるかと思います。Web App Manifestによって、そういった制限がなくなるメリットは大きいでしょう。

デメリット

ネイティブアプリに比べると利用できる機能に制限があるのは否めません。また、DOMによる表示速度はネイティブに比べると遅く感じますが、グラフィックスを徹底的に活用するものでもなければ十分でしょう。JavaScriptのAPIに依存しますので、例えばiOSではgetUserMediaを使えないなど、作れるアプリ、作れないアプリの差があると言えます。


Web App ManifestはWebアプリケーションが広まっていく大きなきっかけになると考えられます。企業においてもスマートフォンアプリを社内向けに開発していたケースにおいて、その配布の管理をWeb App Manifest化することによって、より素早く手軽にできるようになる可能性があります。

From → HTML5

コメントは受け付けていません。