PWA：概要、機能、支援ツール、今後について

f:id:masalib:20180810173837p:plain

PWAについて調べた時のメモです
何かの参考になれば幸いです

残念なことにはてなブログは未対応だった
WordPressは対応のプラグインが登場してきた
SEOに強いPWAの導入を検討してほしいものだ・・・

PWAとは
PWAの機能
導入するに必要なもの
サービスワーカーの機能
PWA支援ツール
PWAの今後
参考URLと本

PWAとは

Progressive(プログレッシブ)　web appsの略称です
このプログレッシブはプログレッシブエンハンスメントの略です
プログレッシブエンハンスメントとは
ブラウザというのはどんどん進化している
ブラウザごとに新しい機能に対応しているものもあれば古い対応してないものもある
新しいブラウザをユーザーさんが使っていればその時には最先端の体験を提供する
そうじゃない場合でもちゃんとそれなりの体験を提供する
既存のウェブサイトもまだもうすでに存在している
ウェブサイトに対して最新の機能徐々に追加していくことができるといった
プログレッシブに進化させていく事ができる
この２つの意味が込められている
WEBアプリをネイティブアプリに近づけようとしたもの
PWAはネットワークがないつながらない場合でも、アプリを開いたり、過去のデータをチェックしたり、誰かにメッセージを送信したりすることができます。スマフォがインターネット接続を確立すると、メッセージは自動的にバックグラウンドで送信する事ができる
日本ではネットワークが低速ということは稀ですが、発展途上国なら3Gぐらいが当たり前の世界。その遅いネットワークでも最高の体験をしてもらうにしている

PWAのコンセプト

応答性：UIはデバイスの画面サイズに適応しますアプリのような感じ：それはウェブサイトのように感じるのではなく、できるだけ多くのアプリとして感じる
オフラインサポート：デバイスストレージを使用してオフラインエクスペリエンスを提供します
インストール可能：デバイスブラウザは、ユーザーにあなたのアプリをインストールするように促します
再エンゲージメント：プッシュ通知は、インストール後にユーザーがアプリを再発見するのに役立ちます
発見可能：検索エンジンとSEOの最適化は、アプリストアよりも多くのユーザーを提供することができます
フレッシュ：アプリは自分自身とコンテンツをオンラインで一度更新する
セーフ：HTTPSを使用する
プログレッシブ：機能が少ない（たとえウェブサイトと同じように、インストール可能でなくても）どんなデバイスでも、古いデバイスでも動作します。
リンク可能：URLを使用して簡単にポイントする

https://flaviocopes.com/progressive-web-apps/ 引用より・・・

PWAの対応端末

f:id:masalib:20180810174051j:plain

iOSのサファリも対応しているが通知はできない 最新は以下のサイトにいって

Can I use... Support tables for HTML5, CSS3, etc

「Manifest」で検索する

PWAとネイティブアプリとの比較

f:id:masalib:20180812020537j:plain

qiita.com
より引用
このページには機能一覧もある。

導入事例：日本

日本経済新聞

www.nikkei.com

14秒 - 平均ページ読み込み時間の高速化
56％ - コンバージョン率の向上
28％ - 訪問1回あたりのページビュー数
40％ - デーリーアクディブユーザー

スーモ

suumo.jp

ページの読み込み時間が75%削減

導入事例：海外

George.com https://direct.asda.com/george/clothing/10,default,sc.html

3.8x - 平均ページ読み込み時間の高速化
2倍 - 直下率の低下
31％ - コンバージョン率の向上
20％ - 訪問1回あたりのページビュー数
28％ - ホーム画面からの訪問時間がサイトで平均より長くなった

BookMyShow

https://in.bookmyshow.com/

BookMyShowのPWAはコンバージョン率を80％以上上昇させました。

https://developers.google.com/web/showcase/
より引用

PWAの機能

ホーム画面に追加することができる

今まではショートカットを置くことができたアプリでホーム画面に追加することによってアプリ（PWA）として起動することができる

f:id:masalib:20180810175132g:plain 引用画像 https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja

高速起動

通常はブラウザーが必要なリソースをサーバに取りに行って表示するものですのこのやり取りが時間がかかってしまうが高速にオフラインでも動くくらい高速に起動することができる（キャッシュやオフライン機能によるもの）

日本で１番有名なPWAは日経新聞このサイトは約１０秒以上早く起動できるようになった

PUSH通知機能

ブラウザが起動していなくてもページが開いていなくてもプッシュ通知を受け取ること 2018/08/12の時点ではiosはできていない

その他の機能

インテントの呼び出し（どうやってやるのかわからない）
自動ログイン（どうやってやるのかわからない）

google先生の動画では言っていたがどうやって導入するのかわからなかった

f:id:masalib:20180812025812j:plain

www.youtube.com

導入するに必要なもの

サービスワーカー
HTTPS
マニフェストファイル
ロゴ（ホーム画面に追加用）

Firebaseで通知をする場合は以下も必要

通知サーバーのFirebaseのアカウントとプロジェクト
通知サーバーから受け取るトークンを保存するサーバープログラム
通知サーバーに依頼の通信するcurlのプログラム

サービスワーカーの機能

pwaのコア技術になります

f:id:masalib:20180810175428j:plain

通常のwebはブラウザがサーバに対してリクエストを投げてそのサーバーがレスポンスしてくれる html,javascript css を持ってブラウザ上に画面を表示すという作りになっているつまりブラウザがリクエストできない状況、ページが開いていない状況だと何もできない

f:id:masalib:20180810180444j:plain

サービスワーカー（javascript）の場合は初回アクセス時にインストールされますそして、ブラウザの中で生き続けます(ちょっと怖いｗｗｗ) たとえページを閉じてもそのサービスワーカーは生き続けます

ただjavascript がなんか勝手に何かやられても困るので基本的にはイベントドリブンです何かしらおこうイベントが発生した時だけ何かをするというような作りになっているサービスワーカーはその親ページのWindowsオブジェクトに直接アクセスすることができません親ページのやり取りはPostMessageAPIをとおしておこなう