ブログ

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




監修者:一見 卓矢

記事一覧

アカウントコンサルティング部 部長

ベンチャーソフトウェアハウスで、プログラマ・SEとして従事。その後Webサイト構築などの新事業を開拓。
その後、株式会社ブレインネットにて大手から中小企業まで幅広い業種のクライアントを持ち、各種Webマーケティング、SEOを行う。

現在ではコンサルティング部の統括を行うと共に複数のクライアントのSEOコンサルティングを行う。
著書「コンテンツマーケティングの実戦でみつけた33の法則」



SEOトレンドレポート

資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. 第8回Web&デジタル マーケティング EXPOに出展【10/24~26 幕張】

    サクラサクLABOを運営するサクラサクマーケティング株式会社は、2018年10月24日~26日の3日間、幕張メッセで開催される「第8回Web&デジタル マーケティング EXPO【秋】」に出展しております。 弊社は、SEO […]...

    1. 【インタビュー】株式会社オリエンタライズ様「4ヶ月でアクセスが4倍!1年で10倍!」BtoCのコンテンツマーケティング事例

      店舗販促品ECサイトのコンテンツマーケティングの実施のお手伝いをしました。 店舗装飾関連に課題がある人の悩みを解決できるようなコンテンツの発信を行い、装飾関連のキーワードで軒並み上位表示に成功しアクセス数も急増しました。 […]...

      1. 【インタビュー】株式会社バサラホールディングス様「内製化による目標大幅達成!」BtoCのコンテンツマーケティング×SEO弊社施策成功事例紹介

        着物の着付け・レンタルサービスを各種メディアの複合的な活用によるWebマーケティング施策を展開。 店舗担当者がコンテンツを発信できる体制の構築によりSNSとWebサイトを有機的に活用したプロモーションに成功しました。 ・ […]...

おすすめコンテンツ

  1. モバイルファーストインデックス(MFI)とは?導入時期や必要な対策まとめ

    2016年11月、Googleウェブマスターブログから、モバイルファーストインデックスMFI)についての取り組みを紹介するブログが公開されました。 Google ウェブマスター向け公式ブログ: モバイル ファースト イ […]...

    1. Googleの順位変動が起こる原因と必要な対策(2017年版)

      2017年に入って以前にも増してGoogleの順位変動が大きくなっています。 これまで安定していた順位が下落し、ひどい時には圏外まで急落するなどの経験をされたWeb担当者さまもいると思います。 すでにSEOにおいてはこの […]...

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

        SEOに強いコンテンツとは 検索エンジンで上位表示をさせるためには、サイトパワーとユーザーが求めるコンテンツが必要です。 ユーザーが求めるコンテンツとは、情報や課題の解決方法であり、それを満たすコンテンツを多く提供してい […]...

最新情報を取得する

PAGE TOP