ブログ

Googleが力を入れるプログレッシブウェブアプリ(PWA)とはなにか?

Googleから昨年リリースされたPWA:Progressive Web App(プログレッシブウェブアプリ)、今年のGoogle I/O などでも話題になっていたようです。

本稿ではそんなPWAについて、基本的な知識、実現できること、そして混同しがちなAMPとの併用についてまとめていきます。

この記事の目次

PWAとは?

PWAとはなにか?という問いに、非常に簡単に答えるとすると「アプリのようなウェブサイト」になります。

表面上の話で行けば、アイコンがあったり、スプラッシュスクリーンがあったりといった部分、また、システム的にはプッシュ通知やオフライン機能が使える部分を併せ持つ「ウェブサイト」になります。

どのような部分がアプリ的か、という点では、アイコン、スプラッシュスクリーン、オフラインキャッシュ、プッシュ通知等が挙げられます。これらの機能は既存のウェブサイトでは実現できませんでしたが、PWAではこれらの機能と既存の技術をうまく組み合わせて実現しています。

では早速、PWAが実際にどういうものなのかを見ていきたいと思います。

PWAを体験するには

まずは触ったほうが早いと思いますので、本稿用に作成したサンプルサイトを紹介させて頂きます。

●本記事用のサンプルサイト
/blogs/sample/pwa/

本サンプルサイトでは、アイコンおよびスプラッシュスクリーン、コンテンツキャッシュ、プッシュ通知を実装しており、アクセスすることで確認することが可能です。

※注意点
・詳細は後述致しますが、ブラウザによって対応状況が変わりますので、Chrome,Firefoxなどの対応するものを使用してアクセスしてください。

・本テストサイトではプッシュ通知を送信します。PCの場合デスクトップ上に、モバイルの場合ネイティブアプリ同様の通知欄にメッセージが発生します。
※シークレットモードの場合発生しないことがあります。

・Androidの場合、下記のURLに飛んだ後、右上のオプションのオプションボタンから「ホーム画面に追加」を押し、ホームに追加されたアイコンからページにアクセスすると、ホーム用のアイコンやスプラッシュスクリーンなども見ることができ出来ます。

sc1_add

PWAで実現できること

サンプルサイトではアイコン(スプラッシュスクリーン)、オフラインキャッシュ、プッシュ通知を設定してみました。実際に触ると、PWAがどんなものなのかよくわかると思います。

ここからはサンプルサイトで実装されたものも含めて、どのようなことがPWAで実現できるのかについてまとめていきますが、まずはその前にここから頻出する「Service Worker」について簡単に説明いたします。

Service Worker はPWAの軸になるもので、Chromeアプリなどでも使用されている技術です。
この Service Workerは、簡単に言えばブラウザの裏側で指定どおりに働く「ワーカー」といったもので、これを利用してキャッシュやプッシュ通知を行うことになります。

詳細については省略致しますが、PWAのための新しい技術ではなく、すでにChromeアプリなどで、使われている技術です。
それではPWAで実現している機能について見ていきます。

Androidのホーム画面にアイコンが追加可能

ホーム画面から起動時には専用のスプラッシュスクリーン(アイコン+指定の背景色)も設定可能になります。下記はAndroidにアイコンを設置した際のスクリーンショットになります。

赤い枠でくくられているほうがPWAで、右側は何も設定していないサイトになります。
※iosは不可

sc3_win

オフラインキャッシュ

Service Worker の機能を使用してコンテンツをローカルにキャッシュします。
単にキャッシュしてオフラインでも閲覧可能になるだけでなく、バックグラウンドで動き、データを取得することも可能なので、先読みでデータをロードすることや、オフラインの間データを保持して、オンラインになったら送信といったことも可能です。

プッシュ通知

こちらも同様に Service Worker の機能を使用して行います。

モバイルだけでなく、PCでもプッシュ通知を行う事が出来ます。
WINDOWSの場合は右下に、

MACの場合右上に出るようです。

AMPとの併用可

AMPはその特性上、機能を最小限に抑えるというコンテンツ制限のデメリットがありました。
PWAはAMPとは補完関係にあり、Service-Worker は AMPタグとしてもありますので、AMPにオフラインキャッシュやプッシュ通知を合わせて実装することでAMPのコンテンツ制限をカバーすることができるようになります。

※AMPにおける Service-Workerタグ:

<amp-install-serviceworker>

このように、PWAでできることをすべて実装すれば、かなりネイティブアプリに近い感覚で使用できるウェブサイトが実現します。

その際もあくまでウェブサイトであるため、「インストール不要」というメリットがあり、リリース/アップデート時のアプリストアの審査も不要になります。

また、ウェブサイトであるがゆえに、アプリのようにOSごとの個別対応が不要になる点も見逃せません。

ネイティブアプリにも、Android/ios の両方を同時に作れる Titanium や PhoneGap などがありますが、PWAも、HTML+Javascript で、既存のウェブ開発スキルの延長で実装できるため、通常のネイティブアプリよりも少ない工数でリリースできます。

PWAとブラウザ

PWAはその実装がブラウザに大きく依存します。

具体的にはここまでで何回も出てきている Service-Worker に対応しているかどうかがカギとなります。なお、ユーザが使用するブラウザが Service-Worker に対応していない場合、通常のウェブサイトとして表示されますので、その点は心配いりません。

さて、ブラウザの対応状況ですが、基本的にChrome,Firefox,Operaなどであれば Android/ios 問わず対応しています。(一部機能はAndroidのみであったり、Chromeではバージョン46以上などの制限はあります)

正し、日本で影響力の強いiphoneのメインブラウザであるSafariは Service-Workerに対応していません。
※参考:https://www.i3design.jp/in-pocket/2490

このSafariが対応していないという点は非常に大きいと思います。これはアプリを押したいAppleの仕様ともとれますが、いずれにせよ発表して1年近くたつPWAがあまり進んでいない状況の一翼を担っているのではないでしょうか。

まとめ

本稿ではウェブとアプリの両方のメリットをもっているPWAについて解説いたしました。
ストアに縛られず自由にリリース/更新できるアプリ、という響きはアプリ開発者には非常に強いインパクトを与えます。

すでに実装しているサイトの状況などを見ると、CVRの向上などがあるようで、決して見逃せない要素になりつつあり、Safari未対応を含めても選択肢に入る可能性があります。
これを機会にアプリの選択肢としてPWAも検討してみてはいかがでしょうか。
※参考:https://www.i3design.jp/in-pocket/2490





無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

監修者:根岸 雅之

記事一覧

取締役社長 COO

2006年株式会社オプトにてSEMコンサルタントとして、大手企業のリスティング広告の運用に従事。

その後、サクラサクマーケティング株式会社に転職し、SEOコンサルタントとして、10年以上、100サイトの以上の顧客のWEBマーケティングのパートナーを担う。また、セールス、新規企画開発、アライアンスと幅広く従事し、2014年より取締役社長として会社を牽引。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. 弊社社長、根岸がSEOの漫画になりました!

    マンガマーケティングの領域において3000件近くの実績を誇る 株式会社シンフィールドさんとの コラボレーション企画で、弊社社長の根岸のインタビューを漫画にして頂きました。 弊社同様、マンガを作成頂きたい方は、こちらからお […]...

    1. Google検索品質評価ガイドラインの要約とSEOへの活用方法

      Googleの検索品質評価ガイドラインとは、Googleが自身の検索エンジンの品質を評価するために、外部の品質評価者に向けて評価方法を説明した資料のことです。 検索品質評価ガイドラインには、Googleがどのようなページ […]...

      1. サクラサクラボ8月のツイートまとめ

        当サイトのツイッターアカウント(@sakurasakulabo)のツイートから、8月のイベントを振り返ります。 ツイッターのフォローはこちらからお願いします。 Follow @sakurasakulabo 目次 8月の変 […]...

おすすめコンテンツ

  1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

    ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

    1. SEO対策(検索エンジン最適化)とは~Googleで上位表示を実現する方法

      目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは 2. SEOの現在(検索エンジン最適化≒Google最適化) 3. Google Search Consoleの活用とS […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP