サクラサク

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

2024年7月25日

ねぎお社長 (根岸雅之)

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

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

PWAとは?

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

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

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

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

PWAを体験するには

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

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

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

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

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

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

PWAで実現できること

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

PWA

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

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

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

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

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

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

オフラインキャッシュ

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

自社サイトの現状が気になる方は無料相談会へのお申込みを!

・うちのサイトはPWAをいれるべき?
・サイトの集客を伸ばすためには何から始めればいいの?
こんなお悩みをお持ちであれば是非無料相談会へお申込みください!
弊社のコンサルタントが現状や目標をヒアリングし、貴社のお悩みを解決いたします!

無料相談会へのお申し込みはコチラ

執筆者 / 監修者

サクラサクマーケティング
株式会社

取締役 社長

ねぎお社長 (根岸雅之)

ねぎお社長 (根岸雅之)イラスト

サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 大学卒業後、一貫して、広告・マーケティング業界に身を置く。2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。同年10月に株式会社ブルトア(現サクラサクマーケティング株式会社)に転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。2023年には『なぜほとんどコンテンツマーケティングは失敗に終わるのか?』を執筆。ねぎお社長のSEOチャンネルをはじめ、YouTube、メルマガ、SNを通じて積極的に情報発信。

◇ 出版書籍

◇ 情報発信

◇ 掲載メディア

◇ 共催セミナー歴

  • オウンドメディアの成功事例とSEOを支える運用型広告の活用
  • 今日から始められるWebマーケティング~コンテンツマーケティングとGoogle マイビジネス~
  • GMO TECH × サクラサク共催セミナー~テクニカルSEOとコンテンツマーケ~
  • リモート環境下においても売上・利益が成長し続ける組織創りと営業戦略

関連記事

関連記事はありません。

ブログ一覧

あっ!と思ったら
サクラサク
ご相談ください

まずは無料相談へのお申し込みがおすすめです。ベテランコンサルタントが直接対応いたします。

お電話でご相談の方はこちら

03-5776-2775

03-5776-2775

SEO・記事制作なら、
サクラサクにお任せください!

ご相談こちら
×