PWA VS ネーティブアプリ

PWA VS ネーティブアプリ

PWAとネーティブアプリについて、いい感じにプレゼンされている動画があったので、シェアしたいと思います。リスニングができなくても、パワポだけでおおよその内容は分かるかと思いますので、PWAに興味がある方は一度視聴されたら良いと思います。

ネーティブアプリのメリット

ネーティブアプリがWEBに優っている項目は以下の3点です。

  • 動作が速い
  • 一貫したUIを
  • オフラインでの動作

ネーティブアプリのデメリット

ネーティブアプリの開発者はいつも以下のことで悩まされてきました。

  • iOSとandoroidで開発言語が異なる
  • 開発コストが高い
  • アプリストアでアップデートしないといけないので、バージョンの一貫性がない

PWAのメリット

  • WEBと同じ技術(Javascript/JSON)が使用できる。
  • ネーティブアプリと同様なことができる
  • iOSとandoroidのように複数開発する必要がなく、全てのブラウザーで動くように一つのものを開発するだけで済む

何が改革(Progressive)なのか?

PWAは将来的に次のようなものをもたらすことができる。

  • ブラウザの強化
  • スピードやオフライン動作、一貫したUI

PWAは3ステップで実装できる

PWAは3ステップで実装ですることができます。

Step 1. manifest.json

manifest.jsonと呼ばれるアプリの情報をまとめたものを用意します。 manifest.jsonでは、アプリ名やアイコン、テーマカラーなどをjsonで設定できます。

Step 2. headタグ

headタグにmanifest.jsonのリンクとナビバーの色を設定します。

Step 3. Service worker

Service workerを作成します。 Service workerはJavascriptで実装でき、ブラウザーとサーバーの中間を担うサーバー的な役割を持ち、キャッシュの管理を行います。

Service workerは キャッシュを表示して、バックグラウンドでキャッシュの更新を行うったり、 ネットワークが遅い時にキャッシュを利用したり、 事前に次に表示するページを読み込んだりするなど 様々な方法でキャッシュを活用することができます。

ガッチャ!

キャッシュの難易度 複数タブで開かれた時 オフライン時は、localhostで動作しているのと等しいこと

まとめ

PWSは以下の3点でネーティブアプリに優位性があります。

  • WEBと同じ技術で開発ができる。
  • 構築するのは、一つだけ
  • Javascript!