Categories: PWAWebアプリ

PWA(プログレッシブWebアプリケーション)とは?

PWAとは?参考になるページをふたつ紹介します。

PWA(プログレッシブウェブアプリ)とは? Google推奨のクロスプラットフォームを徹底解説 - 株式会社モンスターラボ
PWA(プログレッシブ ウェブ アプリ)とは、Webサイトをアプリのように活用できるようにする技術。この記事では、PWAとネイティブアプリの違いや、注目されている理由・メリット、導入事例までわかりやすく解説します。
PWAとは?Webサイトを「ほぼアプリ化」する方法 | 株式会社パンタグラフ
PWAとは、簡単に言うとWebサイトをアプリのように利用できるようにする技術のことです。この記事では、PWAとは何かということから、PWAの基本的な機能や導入のメリット、実際の導入事例まで詳しく紹介します。

PWAに対応(スマホのホーム画面にアプリとして保存可能)したWebサイトに行くと、PC環境でもブラウザのアドレスバーのところに、このサイトを保存するかというナビゲーションが出てきて、ボタンを押すと、やはりデスクトップアプリと並んで、まるでWebサイトがネイティブアプリのように振る舞うことができます。

動作高速、オフラインページローディング、ブラウザのローカルストレージにデータを記憶、さらにはGメールなどのように、ブラウザから通知を出すことなどが出来る。ブラウザから端末に通知を出すのは、見逃さないほどのかなりの訴求効果があります。

PWA化されているサイトを紹介します。僕もお世話になっているクラブミュージックに強い音楽配信プラットフォームのSoundCloud。

Stream and listen to music online for free with SoundCloud
Discover and play over 320 million music tracks. Join the world’s largest online community of artists, bands, DJs, and audio creators.

スマホのアプリとして存在しているので、スマホでしか触れていなければ、SoundCloudがWebサイトでも存在していると知らない方もいるかもしれません。実はPCのChromeでブラウザ版SoundCloudを見ると、下のようにアドレスバーの中に見慣れないアイコンが表示されます。

なんとPWAのWebサイトは、PCのChromeで開いてもこのように、「アプリとしてインストール」ボタンが表示されるのです!

これはMacでの表示ですが、WindowsでもChromeであれば同じように現れます。

Mac Safariでもこの機能がありました。PWAとしてのインストールではなく、iPhoneでやるように、Dockにブクマとなります。

Mac Osでの「新機能の紹介」より(2024.01.21)

しかし、PWAのWebサイトでなくても「ホーム画面に追加」ができちゃうので、iPhoneではこれで代用できます。

PWAのWebサイト、、、過去に一度、制作してみたんですが、運用管理が超ハードル高いです。なにせその高速化のために、あらゆるデータをCDNにアップしているので、このキャッシュが全然消えてくれない。。なのでフッ軽に更新管理、ができずシビアだと思いました。

うまく使えば、アプリとしてインストールいらずで、Webブラウザ上でまるでアプリのような動作をする、ページ非同期更新型の、Reactで制作したようなワンページWebサイトも制作が可能かと思います。OSも問わずブラウザ上で動くのでユニバーサルですね!

(ただし端末の機能や端末のデータ読み書きをしたいのであればネイティブアプリでないとできない)

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。

Share
Published by
ナナイロ