Progressive Web Apps

Progressive Web Appsとは、Webサイトをアプリケーションのように使用できるようにするための仕組みのことである。

概要

2015年に開催されたChrome Dev Summitにて提唱された。

前述の通り、PWAとはモバイル向けのWebサイトをアプリケーションのように使用できるようにするための仕組みである。

主にレスポンシブデザインで、HTTPS化がされており、Googleが定める要素を備えており、さらにオフラインやプッシュ通知に対応するためのブラウザAPIを利用しているWebサイトのことを指す。

余談だがChrome bookでインストールするアプリケーションはだいたいこれである。

ネイティブアプリとの違いは、ネイティブアプリはOSの環境に合わせて設計されたアプリなのに対して、PWAはWebサイトである。だが、ホーム画面に追加したりすることによってネイティブアプリのように使用することができる。
だが、大元はWebサイトのため、制限される機能も多くある。

メリット

• AndroidやiOSなどのOSに左右されないため、1つのWebサイトを作れば良いため、開発コストなどを削減することができる
• アプリストアを経由することがないため、アプリストアへの申請が不要となる
  つまり、AppleやGoogleのガイドラインに従う必要がないので、自由なアプリ開発ができる
• 検索エンジンなどからリーチすることができる
• キャッシュ機能を有しているため、読み込み速度が速い
• ネイティブアプリのようにホーム画面にアイコンを表示させることができる
• 一部対象外の機種はあるが、プッシュ通知を送ることができる

デメリット

• 一部デバイスではプッシュ通知を使用することができない
• 利用しているブラウザに動作依存するため、ブラウザによって表示が違う。なんてこともしばしば起きる
• ネイティブアプリは基本的に起動時・使用時にインターネット接続を必要としないのに対し、PWAは元がWebサイトのため、インターネットを必要とする

PWAを作成する上で最低限必要な要素

• ページ読み込み速度が速いこと
• あらゆるブラウザに対応していること
• あらゆる画面サイズに対応していること
• カスタムオフラインページが提供できること
• アイコンなどを正しく設定し、インストールを可能にすること

よりよいPWAを提供するために必要な要素

• オフラインでも動作できるようにすること
• WCAG2.0アクセシビリティ要件を満たしていること
• オーガニック検索でリーチができること(検索が可能であること)
• マウス・キーボード・スタイラス・タッチなどにおいて同様に入力ができること
• APIの使用許可を要求する場合にコンテキストを提供すること
• アプリケーションを最新の状態に保ち、コードベースを正常に保つこと

PWAの導入事例

以下はあくまで一例である

• Twitter
  →https://twitter.com/
• TweetDeck
  →https://tweetdeck.twitter.com/
• 日本経済新聞
  →https://www.nikkei.com/
• マシュマロ
  →https://marshmallow-qa.com/
• 5ちゃんねる
  →https://5ch.net/
• Kiite
  →https://kiite.jp/
• Kiite Cafe
  →https://cafe.kiite.jp/
• 国土地理院 - 地理院地図
  →https://maps.gsi.go.jp/index_m.html
• メルカリ
  →https://jp.mercari.com/

関連商品

関連リンク

• PWAのインストール方法 - Google Chrome ヘルプ

関連項目

• ネイティブアプリ