WEB担のぼやきブログ

インハウスSEO兼WEB担当者の備忘録メモと、話題・流行・趣味ブログ^^

プログレッシブウェブアプリの作り方 youtubeで学ぶ事例解決策

      2017/03/16

プログレッシブウェブアプリとは何ぞや。
何だか使えそうだけど情報が足りない感ありませんか?

言葉だけでは体感として分からないと思いますので、動画をご覧なってみて下さい。非常に分かりやすく勉強になりました。

⇒htmlスライドはこちら

プログレッシブウェブアプリとは

次のような機能をウェブで実現できる。

ホームスクリーンアイコン ―― アプリのように、タップするだけでそのサイトをブラウザで開けるアイコンをホームスクリーンに簡単に追加できる
フルスクリーン表示 ―― ブラウザのアドレス欄を非表示にしてページをフルスクリーンで表示できる
プッシュ通知 ―― ブラウザを開いていなくても、サイト側からユーザーに通知を送信できる
オフライン機能 ―― インターネットに繋がっていなくてもページを表示できる
プリフェッチ機能 ―― アクセスしなくても事前にコンテンツを取得しておける

アプリで当たり前の機能がWEBでも近い体験できるようになります。

備忘録メモデータ

1ヶ月あたりのスマートフォン利用時間は1時間49分

・1時間28分がネイティブアプリケーションの利用時間
・23分がウェブに使われてる時間

その内の80%の時間、はその人のトップ3アプリに費やされている。
恐らくこの80%はコミュニケーションアプリと予想され、LINE、twitter、facebook、メール、メッセンジャーかもしれない。

トップ3のアプリに入り込めるだろうか?

無理なら1時間28分の残り20%しか使われる機会がないという現実。
たったの18分間しかない。

一方、スマートフォンユーザーの平均月間利用アプリ数は25個で、WEBサイト(Chrome for Android)は月間平均100以上のサイトに訪れている。

可能性としてWEBサイトの方が見られる機会が多いのでは?
個人的にはアプリよりWEBサイトの方がまだまだ慣れてるし多い。

そこでrogressive Web Apps(プログレッシブ ウェブ アプリ)が注目されています。
ネイティブアプリケーションに近い体験をWEBサイトで可能にしようという試みは既にいくつかのサイトで導入済みです。

リクルートの事例 SUMO Service Workerに対応

・Add to Homescreen
・プッシュ通知に対応
・トップページのオフライン対応

⇒トップページのロードに0.8秒かかってたものが、0.2秒に短くなった。
ホーム画面から起動するスピードが4倍になっている。

facebookの事例 プッシュ通知に対応

モバイルウェブ版のfacebookを試してみると体験できます。
(Android 版 Chrome )

残念な事にiosはプッシュ通知が使えないようです。。。

気になる機能はBackground Sync

たまたまオフラインでページが見れなかった時、次にオンラインになった時に勝手にそのページをDLしてくれて通知してくれる機能。

良さそうなサイトが開けない時って何度もアクセスして結局諦めてたので、確認できるようになるのは嬉しいですね。実際には使ってみないと分かりませんが。

今後の展開が更に楽しみになりますね。

でわでわ。

 - SEO・マーケティング , , , , , , , , , , , , , , , , ,