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で設定できます。
{
"lang": "ja",
"name": "webapp name",
"short_name": "webapp name",
"icons": [{
"src": "/app-icon.png",
"sizes": "144x144",
"type": "image/png"
}],
"start_url": "https://example.com/",
"display": "standalone"
}
Step 2. headタグ
headタグにmanifest.jsonのリンクとナビバーの色を設定します。
<link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#5cd65c">
Step 3. Service worker
Service workerを作成します。 Service workerはJavascriptで実装でき、ブラウザーとサーバーの中間を担うサーバー的な役割を持ち、キャッシュの管理を行います。
Service workerは キャッシュを表示して、バックグラウンドでキャッシュの更新を行うったり、 ネットワークが遅い時にキャッシュを利用したり、 事前に次に表示するページを読み込んだりするなど 様々な方法でキャッシュを活用することができます。
ガッチャ!
キャッシュの難易度 複数タブで開かれた時 オフライン時は、localhostで動作しているのと等しいこと
まとめ
PWSは以下の3点でネーティブアプリに優位性があります。
- WEBと同じ技術で開発ができる。
- 構築するのは、一つだけ
- Javascript!