418 I’m Komatzz

プログラミングとか学んだことの備忘録ブログです。

Google Developers Summit:Progressive Web Appsに行ってきた

少し前に行われたGoogle Developers Summit : Progressive Web Appsに行ってきたので、PWAについて自分なりにまとめたいと思います。

f:id:kmatz90:20160508164153j:plain

 

Progressive Web Apps(PWA)とは?

無理やりシンプルに説明すると、今までのWebアプリ(サービス)に、

プッシュ通知やオフラインアクセスなどをできるようにした新しいWebアプリの概念です。

 

Webアプリでプッシュ通知やオフラインアクセスを使うにはどうするのか?

答え:Service Workerを使う!

 

Service Worker(SW)とは?

Webページとは別にバックグラウンドで実行されるJavascript環境(API)のことです。

プロキシ的な感覚が近い?と思います。

なので、技術的にはPWAを勉強するというより、

SWを勉強すると表現した方がいいかもしれません。

詳細はこちらを参照。 

 

Service Workerを使うには?

具体的な使い方はこちらを参照

なお、Service Workerを使うには、SSL化(HTTPS)が必須になります。

 

SUUMOのPWA導入事例

これは実際にカンファレンスで聞いてきた話です。

 

SSL化の課題

SUUMOでPWAを導入する際に1番ネックになったのがSSL化で、

かれこれ1年以上かかっているそう(大きな理由はlocalStorage)。。

しかも紙媒体のURL表記が「http」のものもあるので、

「HSTS」を導入する予定とのこと。

 

Add to Homescreen

ホーム画面にショートカットを追加させる施策です。

スーモに再来訪したら「ホーム画面に追加しませんか?」的なバナーを出して追加を促したそう。

ホーム画面から来た人はCVRが約1.2倍と言っていたので、導入効果はあるもよう。

 

Offline Cache

利用したことで表示速度が約4倍に。

 

プッシュ通知

ユーザーが新着案件(賃貸)情報を受け取る設定をしたら、

スマホにプッシュ通知できるような仕組みを検討中とのこと。

 

その他

ジオフェンシングもそのうちやりたいと話していた気が。

 

まとめ

スピーカーも話していましたが、ネイティブアプリは色々大変なんですよね。

リリースとアップデートに審査が必要だし、

GoogleAppleを挟む分、自由じゃないし時間がかかったり。

その点、PWAのようにWebにあるといつでも改修できるし、

各OSに依存しないのでネイティブアプリのデメリットを解消できます。

 

結構明るい技術だと思うのですが、

今のところブラウザのSafariMicrosoft Edgeに対応していないようです。

※対応状況はこちらで確認できます。

なので、iOS主流の日本ではすぐすぐ取り入れる技術ではないかもしれませんが、

今後のアプリのトレンドして抑えておく必要はありそうです。

パーフェクトJavaScript

パーフェクトJavaScript