PWAについて調べてみた #JavaScript

PWAとは

"Progressive Web Apps"　「革命的な（前進）Webアプリケーション」

ネイティブアプリケーションに近いUXを作ることができる

Webアプリケーションの手軽さをそのままにして、ネイティブアプリの利点を獲得できる

Webアプリだけどホーム画面にアイコンを追加できる Web App Manifesst(後述)とService Worker(後述)を用意することで、スマホやタブレットのホーム画面に起動アイコンを追加できる。

つまりApple StoreやGoogle Play Storeからインストールする必要がない。
iOSで追加しようとするとこんな感じらしい。

（気づかんがな…(´・ω・`)）

Androidだとブラウザ上に通知が出るから気づきやすくなっているそう。

オフラインでも動作する
Service Workerを利用してHTMLやその他リソース(画像、CSSファイル、JSファイルなど)をブラウザ上にキャッシュできる。そのため、オフライン環境や低速回線時でも高速にWebページを開くことができる。
ネイティブアプリに比べて開発コストが低い
ネイティブはiOS、AndroidといったようOSごとのチューニングが必要。
プッシュ通知
(iOSではまだできない模様?)

ユーザーがPWAに対応していないブラウザを使っていても、サイトが見れないというようなことはない。その場合は普通のwebサイトとして表示されるだけ。

Service Worker
ブラウザがバックグラウンドでスクリプトを実行する仕組み。
- バックグラウンドで動作するプログラミング可能なネットワークプロキシ Web Workerの一つ
- DOM(Document Object Model)の操作ができない
- Webページと異なるライフサイクル
manifest.json
Webアプリケーションの情報(アプリケーションの名称やアイコン)を記述する。JSON形式で記述して、HTMLファイルのhead要素に次のようにコードを追加すれば良い。
<link rel="manifest" href="/manifest.json">
HTTPS
なんでHTTPSじゃないとダメなのかをどこかで見た気がするのだけど、失念…。

CSS3...GPUによるなめらかなレンダリング
WebVR…よりImmersiveな体験
WebPayments...独自決裁を可能に
Web Assembly(WASM)....高速な演算 (めちゃエモなので詳しく調べてしまった) ブラウザからアセンブリ(機械語)を実行できるようにする技術。 C/C++/Rust といったプログラミング言語で記述したコードを WebAssembly に変換して使用する。バイナリコードをブラウザから扱えるようになることで、 JavaScriptに比べてファイルサイズを大幅に小さくすることができる。 JavaScriptとの連携も可能。
- いつ使うか… 部分的な処理の高速化をしたいとき。 ブラウザ上で高速な画像処理、動画処理が必要な場合とか。重たい処理をWASMで実装して、UIなどをWeb技術で実装する。
- コンパイル環境を作るのが面倒(らしい)

　今後5G通信が発達してきて、ますますクライアント側のデータ処理速度は重要になるだろうから大事な技術になっていくんじゃないかなと思ったり。

閑話休題。

WEB+DB-PRESS-Vol.103