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

PWA
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も問わずブラウザ上で動くのでユニバーサルですね!

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

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

    タイトルとURLをコピーしました