WebサイトをPWAに対応させてみた

ユーザーエクスペリエンスを向上させる方法の一つとして,Progressive Web Apps の導入が考えられます.つい最近知ったのですが面白そうだったので,開発中の Web アプリに適用してみました.

PWA とは

Google が 2, 3 年前からじわじわと推してきた技術で,Web ページの閲覧中にあたかもネイティブアプリを使っているかのような UX を提供することができます.

Google が中心となって発信してきたので Chrome に対応しています.私は利用していないですが,Firefox と Opera ブラウザも対応しているようです.

また,最近 Safari の対応状況が「開発中」となったため,iOS でも利用できるようになるのではと盛り上がっています.(PWA 記念日)

通常の Web サイトとの違い

知識が未熟なので Python や PHP を用いている Web サイトも広義の Web アプリといえるのでは,と思ったりしているのですが.

PWA は Service Workers を設定することで Push Notification API や Cache API などが使えるので,より速い動作やネイティブアプリに近い UX を得ることができるもの,みたいな感じです.

また,Web アプリマニフェストを設定すれば,アドレスバーを消すなどネイティブアプリのような UI を実現できるのも大きな特徴だと思います.

ネイティブアプリとの違い

メリットとしては Web をベースにしているので,ネイティブアプリの言語を習得する必要がなく開発コストが低いこと,OS に依存しないこと.

しかも,端末へのインストールはしないため,容量を圧迫しません.Twitter Lite の場合,数百 KB だけ!

デメリットとしては,動作速度ではネイティブアプリに軍配が上がること,オフラインに対応できるとはいえインターネット環境は当然必須であること,などが挙げられます.まあぐぐればたくさんいい資料があるでしょう.

Web アプリマニフェスト

PWA に必須なものの一つで,見た目やアイコンの設定などを行います.PWA でなく普通のサイトでも組み込むことができます.

(参考) ウェブアプリマニフェスト | Google Developers

マニフェストファイルは JSON 形式でサーバに置きます.

manifest.json
{
  "short_name": "MKTIA.COM",
  "name": "MKTIA.COM",
  "icons": [
    {
      "src": "icon.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/",
  "background_color": "#fff",
  "theme_color": "#004898",
  "display": "standalone"
}

とても単純な例で説明すると,このようになります.

  • short_name: ホーム画面に追加したときの名前
  • name: インストールバナーに表示される名前
  • icons: アプリのアイコンで,スプラッシュ画面にも使われる (複数サイズ指定が可能)
  • src: アイコン画像の場所
  • start_url: 開いたときに接続する URL
  • background_color: スプラッシュ画面の背景色
  • theme_color: ブラウザ検索窓,ステータスバーの色
  • dsiplay: 開いたときの UI のスタイル

これを Web ページで読み込むためのメタタグも必要です.

<link rel="manifest" href="/manifest.json" />

アイコンやマニフェストファイルの置き場にルート直下を指定されている感じがなかったのですが,それ以外の場所でもいいんでしょうか.少し疑問です.

マニフェストファイルのテスト

Chrome DevTools にはマニフェストファイルのテストツールもついていて,Application パネルの Manifest タブで確認できます.なんて便利!

実例

Twitter Lite

先ほど少し名前が出ましたが,PWA を取り入れています.確か React を用いていたと思いますが,プッシュ通知機能も付いています.この部分が PWA を取り入れる強みなんですね,きっと.

ネイティブアプリには機能の多さでは劣るかもしれませんが,動作の軽さでは全然負けていないように感じます.

Google Photos

最近,対応したとニュースになっていました.

最後に

この仕組みを利用すれば低コストでそれなりのアプリを開発しやすくなりそうなので,大した機能を必要としていないのであればネイティブアプリより PWA を作ろう,という声が今後高まっていくかもしれません.

iPhone の対応状況にかなり左右されるとは思いますが,JavaScript が書ける人は Firebase や React, Vue.js などを活かして作ることができますし.

始めたばかりの Android の勉強で苦労しているので,他にも様々な選択肢があることを踏まえて,技術も適材適所を考える必要がありそうだなと素人ながらに思いました.