さっしーブログ

埼玉県在住のシステムエンジニアです。基本的には技術的な内容を中心に発信していきます。

最新Web技術!Progressive Web Apps

目次

1.Progressive Web Appsとは?

  Googleが紹介したウェブ上で驚くべきユーザーエクスペリエンスを提供する新しい方法です。
  簡単に言いますと、この技術を取り込むことでアプリのように振る舞うWebサイトを提供できます。
 

2.「アプリのように振る舞うWebサイト」?

  モバイルアプリにあったオフラインやプッシュ通知といった機能を標準のWeb技術を用いてWebサイトに組み込めるようになり、
  従来のWebサイトではできなかったユーザー体験を可能にする。
  また、インストールは不要であり、モバイル端末のホーム画面からすぐにProgressiveWebAppsで実装されたWebサイトへすぐにアクセスできる。
  さらにキャッシュを用いることによりロードまでの時間を短縮して高速に動作させることが可能。
 

3.Progressive Web Appsの特徴

  ・アプリのようにインストール不要
  ・アプリのようにホーム画面に配置できる
  ・オフライン環境でも使用できる
  ・ネイティブアプリのようなユーザーインターフェースを作成できる
 

4.なぜProgressive Web Apps?

  大きくまとめますと、ユーザーエクスペリエンスの向上です。
  そして、エンゲージメントを増やし、コンバージョンを増やすことが容易になります。
 
 

5.対応ブラウザ

  ProgressiveWebAppsはバックグラウンドでサービスワーカーというものが動いていて、
  これが対応しているブラウザかどうかが使用できる前提条件となる。
 
  現在では以下である。
 
  ・Chrome
  ・Firefox
  ・Opera
 

6.Progressive Web Appsを始めるには?

ProgressiveWebAppsを始めるためには特別なことを行う必要はない、
以下のサイトのチェックリストに沿ってアプリを実装すれば、
そのサイトはProgressiveWebAppsに対応したサイトであるといえる。
 
 
または以下で ProgressiveWebAppsに対応するためのひな型がダウンロードできその雛側に沿ってサイトを作成すれば
ProgressiveWebAppsに対応したサイトが簡単に作成できる。
 
 
 

7.最後に

ProgressiveWebAppの導入事例は現状国内では少ないです。
というのも日本ではiphoneユーザーが多くそのiphoneの主要ブラウザであるsafariがProgressiveWebAppに対応していないというのがネックなような気がします。
しかし、このProgressiveWebAppに対応することで今までネイティブアプリではアプリをリリースするのに必要なGoogle PlayやApp Storeの審査も不要になりますし、
デベロッパー登録費用なども掛からずアプリをリリースすることができます。
今後、safariが対応してくればProgressiveWebAppの導入事例なども徐々に増えてくると感じます。
 
以上