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

Web Development # PWA

2017-12-10

ユーザーエクスペリエンスを向上させる方法の一つとして，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" />

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

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

mktia's note

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

PWA とは

通常の Web サイトとの違い

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

Web アプリマニフェスト

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

実例

Twitter Lite

Google Photos

最後に