SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

PWA(Progressive web apps) とはいったいどんな機能なのか?概要編

スポンサーリンク

ネイティブアプリとWebアプリの違い

ネイティブアプリとは、アプリストアからダウンロード/インストールして利用するアプリのことです。Webアプリとは、インターネット上に公開されているブラウザから検索可能なブラウザで利用するアプリの事です。

PWAとは何か

PWAは、HTML/CSS/JavascriptなどのWebプログラミングを利用して作られているアプリです。つまりは、その実体はブラウザからアクセス出来るWebサイトだということです。

スマホのホーム画面やパソコンのデスクトップにアイコンをインストールし、そのアイコンをタップもしくはクリックすることで、ネイティブアプリのように起動することが出来ます。インストールされたアイコンは、起動するブラウザとURLが記載されたショートカットです。アイコンをタップもしくはクリックするとそこから実際に起動されるのはブラウザで、ブラウザは指定のURLからコンテンツを取得してきます。

ネイティブアプリは、ローカルの実行環境から起動されるためオフラインでも利用可能です。PWAもネイティブアプリと同じ使い勝手となるように、ローカルキャッシュを利用します。ローカルにWebコンテンツをキャッシュし、そのコンテンツは常に最新に更新しておくことで、インターネット接続が無くても利用可能となります。

コンテンツをロカールにキャッシュするので、インターネット上からコンテンツを毎回取得してくるよりも表示が非常に高速です。

Webアプリはインターネットから直接取得してくることが出来る為、特定企業の管理下に置かれることは無くオープンなものとなっています。

PWAは特定の技術を表しているのではありません。既存の多様なWeb技術を一つに撚り合わせて体系化し実現している機能です。この用語は公式に認められている名称ではなく、Googleが独自につけた略語だということです。

Webサイトには実装できるのか?

PWAの特徴とメリット

PWAが持つ特徴とメリットに触れていきます。

検索で見つけられる

Webアプリは、検索エンジンで検索することで見つけることが出来ます。つまりはブラウザでアクセスできるWebサイトだということですね。

インストール出来る

Webアプリは、 スマホやパソコンにインストールすることが出来ます。インストールすると、 Webアプリ(Webサイト)のURLと起動するブラウザが設定されているアイコンが、スマホのホーム画面もしくはパソコンのデスクトップに作成されます。ネイティブアプリのように、ローカルに実行環境のソースコードが展開されるわけではありません。

アップデート不要

アプリの実体はWebプログラミングで作成されたWebサイトですので、ネイティブアプリのように不具合や脆弱性が発生した時にアップデートする必要がありません。

リンク可能である

URLを共有すればアプリにリンクすることが出来ます。ネイティブアプリのようにアプリストア経由でインストールする必要が無いため審査が不要で非常にオープンです。

オフラインでも利用可能

ブラウザのローカルキャッシュにコンテンツを保存しておくことが出来るので、オフライン時でもアプリが利用出来ます。クライアントがWebアプリにアクセスするとPWAが介在し、ローカルキャッシュにコンテンツがあるか確認し、コンテンツがある場合はローカルキャッシュから、無い場合はWebサイトからコンテンツを取得してクライアントに返します。ローカルキャッシュのコンテンツは、フェッチやプッシュを使って常に最新に保っておくことでオフラインでの利用が可能です。

プログレッシブエンハンスメント対応

「漸進的な強化」という意味だそうです。基本的なブラウザではアプリの全機能が利用出来、古いブラウザでは基本的な機能だけ利用できるような状態のことです。要は、新旧様々なブラウザ環境で利用できるようにしましょうということです。

キャッシュの更新が可能

新しいコンテンツがあるときには、プッシュ通知を送信しバックグラウンドでローカルキャッシュを更新することが出来ます。ブラウザが起動していなくても行えなくてはいけません。

レスポンシブ対応

PWAの実体はWebサイトですので、レスポンシブコーディングによってあらゆる画面サイズのデバイスで利用することが出来ます。

安全

PWAはHTTPSの実装が大原則です。HTTPSを実装することで通信が暗号化され、傍受、改竄、なりすましなどのセキュリティリスクを回避できます。

表示が高速

コンテンツはローカルキャッシュに保存され、インターネット上から毎回コンテンツを取得してくる必要が無いため、WebアプリやWebサイトの表示が非常に高速に完了します。SEOにも効果的です。

スポンサーリンク

導入によるデメリット

メリットだけではなくデメリットにも触れていきたいと思います。

ブラウザによって使えない機能がある

残念ながらブラウザによっては未対応の機能があります。特にsafariはAppleの企業戦略もあってか、なかなか導入が進まない機能があるのが実状のようです。プッシュ通知、ホーム画面へのインストール(ホーム画面への追加は出来るがインストールとは別機能)などは未対応となっています。

ユーザーがアプリを発見しにくい

アプリストアからアプリを探索出来ないため、ユーザーがインターネット検索からアプリを見つけることが非常に困難となっています。この点はアプリストアが有利です。SEOで検索順位を上げるか、広告でユーザーを引き付けるなどの方法が必要かもしれません。

実験的な機能が多く普及率が低い

実験的な機能が多く、わかりやすくまとまった技術資料が出回っていないので、導入に手間がかかります。そのせいかどうなのか、普及率も高いわけではありません。ただ、Webサイト開いていると、ブラウザに通知の許可のポップアップが出てくることが最近多くなってきたので、キャッシュを使うことで表示が速くなるメリットが徐々に普及率を上げているのかもしれません。

日本語の資料が少ない

PWAを設定するとフェッチまでは1日程度で設定出来ますが、プッシュ通知の設定になると非常に難解になってきます。このあたりをわかりやすく説明している資料を公開しているサイトが少ないのがきついところかもしれません。英語のサイトならそれなりに出てくるのですが、英語に明るい人でなければちょっときついかもしれません。ただ、全く資料が無いわけではないので、頑張ればなんとかなりそうです。

PWAを機能させるために必要なもの

PWAを機能させるために必要なものを一覧します。詳細については長くなるので別の記事を起こします。

HTTPSによる通信暗号化

HTTPSの実装が必須となっています。サービスワーカーを使うと簡単にセッションを奪うことが出来ます。HTTPで動いていると中身が丸い三重となって危険です。そのため、サービスワーカーはHTTPSが実装されていなければ機能しないようになっています。ただし、開発の為にlocalhostで動かしたい場合は例外的にhttpでも動作します。HTTPSについて詳しくは下記の記事を参考にしてみてください。

アイコン画像

スマホのホームアイコンやWebアプリ起動時のスプラッシュ画面、パソコンのデスクトップに作成されるアイコン、などに使用されます。スプラッシュ画面とは、Webアプリを起動してから表示されるまでの繋ぎや演出に使われる画面の事です。

ウェブアプリマニフェストファイル(manifest.json)

ウェブサイトに関する情報をjson形式で記載したファイルです。

サービスワーカー

ブラウザとWebサーバーの間に介在するプロキシサーバーのような役割です。PWA機能の核となる部分で、ブラウザの代わりにプッシュ通知を受け取ったりキャッシュのバックグラウンド更新を担ってくれます。

スポンサーリンク

PWAの動作確認法

PWAの動作はブラウザの開発者モードで確認できます。Chrome、FireFox、Edgeの3つのブラウザで確認しましたが、どのブラウザも、[F12キーで開発者モードを開く] – [アプリケーションタブ] を開くことで、「マニフェスト」や「ServiceWorker」「キャッシュストレージ」などの項目がありますので、それらでPWAの動作状況を確認することが出来ます。下記に3つのブラウザで開発者モードを開いたときの画像を参考までに載せておきます。

Chromeの開発者モード

Chromeの開発者モード

Edgeの開発者モード

Edgeの開発者モード

FireFoxの開発者モード

FireFoxの開発者モード

ManifestV2とV3

の記事は、Manifest V2の前提で書かれています。2020年12月にManifest V3が新たに発表され、2021年に発表されたChrome88から導入されています。今時点でV2V3の比較を詳しくしていないのでどう違うか詳しくは書けませんが、ChormeストアでPWAアプリが取り扱えるようになっていたり、どうやら2023年にはManifestV2が使えなくなるようです。PWAを導入されるにあたっては、ManifestV3についても情報を追っておくことをお勧めします。詳しくは参考記事を下記に張り付けます。