masalibの日記

システム開発、運用と猫の写真ブログです

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

f:id:masalib:20180810173837p:plain

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

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

目次

PWAとは

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

PWAのコンセプト

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

高速起動

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

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

PUSH通知機能

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

その他の機能

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

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

f:id:masalib:20180812025812j:plain

www.youtube.com

導入するに必要なもの

  1. サービスワーカー
  2. HTTPS
  3. マニフェストファイル
  4. ロゴ(ホーム画面に追加用)

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

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

サービスワーカーの機能

pwaのコア技術になります

f:id:masalib:20180810175428j:plain

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

f:id:masalib:20180810180444j:plain

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

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

キャッシュ

アクセスするときに前回のアクセスのキャッシュを優先的に見る事ができる ネットワークにアクセスすることなくそのリソースを返すことができる

addEventListennerメソッドを使って監視します fetchイベントを利用してネットワークリクエストを横取りして、CacheStorageに対する出し入れをおこないます

オフラインでの表示

上記のキャッシュは通常のブラウザキャッシュと別のもので オフラインや、ネットワークが不安定な状況でもCacheStoregeのキャッシュからコンテンツを提供できます

オフライン時に何も見られないのではなく、何か見られるようにするわけです。最新コンテンツにアクセスはできないですがWeb観覧は可能です

PUSH通知

サーバーからプッシュの通信(イベント)が来た時にweb ページが表示されていなくてもそのサービスワーカー検知がプッシュ通知を表示する ブラウザを開いている場合はメッセージを表示する事も可能

PWA支援ツール

developers.google.com

Chromeで事項できるPWAの導入チェックツール SEOチェックもできる便利ツール

developers.google.com

Googleが提供するオープンなライブラリのコレクションで、サービスワーカーファイルの生成に使用できます。ワークボックスには、画像やその他のリソースのさまざまなキャッシュ戦略も含まれています。

www.pwabuilder.com

マイクロソフトが提供しているmanifestとサービスワーカーの雛形を作成してくれるサービス ホーム画面の画像を1つ用意すれば、サイズ変更とかもやってくれる

PWAの今後

GooglePlayストアやマイクロソフトのストアにも載せる事が可能になる(申請とかはいろいろありそうだけど・・・)

Twitter

japanese.engadget.com

Google Maps GO

uyamazak.hatenablog.com

www.suzukikenichi.com

WEBアプリなのでストアに載せる事ができるのでゲームなどの複雑な処理が必要なアプリ以外は垣根がなくなっていくと思う

残念なことにはてなブログは未対応だった
WordPressは対応のプラグインが登場してきた
会社でさわっているWEBサイトもこの流れがきて修正する事がくる

参考URLと本

https://developers.google.com/web/fundamentals/app-install-banners/?hl=ja

https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20

https://work.lifemake.design/entry/2018/02/19/183000

https://www.youtube.com/watch?v=_ZBcoKidTew&feature=youtu.be

https://flaviocopes.com/progressive-web-apps/

https://medium.com/@takeshiamano/progressive-web-apps-pwa%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88-1991c3fabbdf

https://livebook.manning.com/#!/book/web-performance-in-action/chapter-9

Webサイトパフォーマンス実践入門 高速なWebページを作りたいあなたに

Webサイトパフォーマンス実践入門 高速なWebページを作りたいあなたに


の9章部分