まとめ
de:code18でのセッションで知った、PWAのことの備忘録です。
間違ってたりしてたら教えてください。
PWAとは?
簡単にいうと「Webによるネイティブアプリっぽいもの」
これまでにWebではネイティブアプリができてWebで実装できなかったから新しくAPIとかmanifest.jsonを使ってできるようにしようぜっていう話
PWAで使うAPI
- オフラインのサポート (Cashe API)
- プッシュ通知 (Push API)
- バッググラウンド処理 (Background Sync)
- スマートフォンへのトップへのアイコン追加 (manifest.json)
ハイブリットアプリとの違いは?
ハイブリットアプリは無理やりそれぞれのOSでWeb View上からNativeの機能を使っている。
それに対して、PWAは普通のWebコンテンツの延長線上のもの。
PWAは普通のWebと同じようにWebサーバからコンテンツが配信される。(ここでサーバが端末によって処理を変えるようなことはしない)
PWA非対応のブラウザで、もしPWAに対応したサイトにアクセスした場合、普通のWebサイトと同じように動く。
いままでのWebの実装と違うところは?
あんまない
違うのはmetaタグにmanifest.json(アイコン情報とかアプリ名とかのメタファイル)の記述が増えたり、Push APIとかCashe APIとか必要な場合にjsの記述をするだけ。
メリット
PWAは普通のWebに機能を追加したものなので、Webの利点とNativeアプリの利点を持てる。
-
発見性
- GoogleなどのWeb検索エンジンに引っかかる
- アプリ検索エンジンにも自動で引っかかるように...(?)
-
インストール可能
- アプリがトップ画面に追加できる
- ストアの審査がいらない
-
再エンゲージ可能
- プッシュ通知ができる
- ユーザを離さない仕組みとかができる。強い。
- ネットワーク非依存
- オフラインでもアプリとして動かすことができる
- 柔軟なキャッシュができる。※注意が必要
- プログレッシブ
- Webサーバからコンテンツ配信のみで、高機能なブラウザであればアプリとしてみることも可能。低機能なブラウザであればいままで通り普通のWebサイトとして見れる。
- レスポンシブ
- メディアクエリ等でさまざまな端末サイズに対応できる
- いわゆるレスポンシブサイトがそのままレスポンシブアプリに
- 安全
- httpsで安全
- リンク可能
- Webの最大の利点がそのまま持ってこれる
実装方法
先ほどの4つの機能は以下のように実装する。
- Service Worker(sw.jsを使う)
- オフラインのサポート (Cashe API)
- プッシュ通知 (Push API)
- バッググラウンド処理 (Background Sync)
- manifest.json(メタタグに記述)
- スマートフォンへのトップへのアイコン追加
bing(検索エンジン)がやろうとしていること(?)
以上の話はググればだいたいわかる話です。
de:code18のセッションではここが訴求ポイントだったと思います。
bingはPWA対応しているサイトを引っ張ってきてMicrosoftストアに自動的に追加しているらしい(予定?)です。
自動的に追加された場合はMicrosoftにメールを送れば解除してくれるらしいです。
また、ストアに追加してほしい場合もいくつかステップを踏んで承認してもらえれば追加してくれるらしいです。
記憶が曖昧なので、現在今やっていることか、やる予定だったかは不明です。
知っておくと捗るツール
sonarwhal
https://sonarwhal.com/
オープンソースのウェブスキャンツール
PWAちゃんと対応できているかのチェックもできる
PWABuilder
https://www.pwabuilder.com/
既存のサイトをPWA対応に簡単にできちゃうWebのツール
まとめ なんでPWAがすげぇのか
- 学習コストが少ない(らしい)から
- 追加で書くことがそこまでない
- うれしい
- キャッシュだけするアプリとかだったらいますぐに作れちゃう
- 以下の技術が熱いから
- CSS3
- WebAssembly
- WebVR
- Web Payments
- わざわざアプリにしていたものをアプリにしなくてよくなる
- 「プッシュ通知」「パフォーマンス(ページ遷移)」だけが欲しいだけでスマホアプリを開発してあることがわりと多い。それを簡単に解決できる。
- ユーザがわざわざアプリを入れなくてよくなる
- その他いろいろあるはず
その他
この記事を投稿する前にこんな記事がありました。
Googleフォトのウェブ版がPWAに対応。今のところ機能は限定的 - Engadget 日本版
https://japanese.engadget.com/2018/06/04/google-pwa/
MS先生もGoogle先生もPWAには前向きな感じがあるので、今後当たり前の技術になっていくといいなぁ