この項目「
プログレッシブウェブアプリ 」は翻訳されたばかりのものです。不自然あるいは曖昧な表現などが含まれる可能性があり、このままでは読みづらいかもしれません。(原文:
英語版 "Progressive web app" 2024年2月18日 (日) 16:30 (UTC) )
修正、加筆に協力し、現在の表現をより自然な表現にして下さる方を求めています。
ノートページ や
履歴 も参照してください。
(2024年2月 )
PWAのロゴ
プログレッシブウェブアプリ [1] (英語 : progressive web app 、PWA )またはプログレッシブウェブアプリケーション (英語 : progressive web application )は、HTML 、CSS 、JavaScript 、WebAssembly などの一般的なウェブ 技術を使用して構築されているアプリケーションソフトウェア の一種である。PWAはデスクトップ機器 とモバイル機器 を含む標準に準拠したウェブブラウザ を備えたあらゆるプラットフォームで動作することを目的としている。
PWAはウェブアプリケーション として知られているウェブページ やウェブサイト の一種であるので、個別にバンドルしたり配布する必要はない。開発者はウェブアプリケーションをオンラインで公開するだけでベースラインのインストール要件を満たしていること、ユーザーがアプリケーションを自身のホーム画面 (英語版 ) に追加できることを保証することが簡単にできる。App Store やGoogle Play などのアプリケーションストアでPWAを公開することはオプションである[2] 。
2021年の時点で、PWA機能はGoogle Chrome 、Safari 、Firefox for Android 、Microsoft Edge で異なる程度にサポートされているが[3] [4] 、デスクトップ版Firefox ではサポートされていない[5] 。
ブラウザの対応状況
歴史
先行例
2007年のWorldwide Developers Conference でスティーブ・ジョブズ はiPhone が「Web 2.0インターネット標準で作成されたアプリケーションを実行する」と発表した[11] 。ソフトウェア開発キット (SDK)は不要で、アプリはSafariのブラウザエンジンを通じてデバイスに完全に統合される[12] 。後にこれに不満を抱いた開発者を宥めるためにこのモデルはApp Storeに切り替えられた[13] 。2007年10月、ジョブズはSDKが翌年に公開されることを発表した[12] 。その結果、Appleがウェブアプリのサポートを継続したにもかかわらず、iOSアプリケーションの大部分はApp Storeに移行した。
2010年代初頭から、動的ウェブページ によってウェブ技術を使用してインタラクティブなウェブアプリケーションを作成できるようになった。レスポンシブウェブデザイン とそれが提供する画面サイズの柔軟性によってPWAの開発がより簡単になった。HTML、CSS、JavaScriptの継続的な強化によってウェブアプリケーションにより高いレベルの対話性を組み込むことができるようになり、ウェブサイト上でネイティブアプリのような体験を実現できるようになった[14] 。
2013年、MozillaはFirefox OS をリリースした。これはウェブアプリをモバイル機器上でネイティブアプリとして実行するためのオープンソース オペレーティングシステム とすることを意図していた。Firefox OSはGaiaと呼ばれるHTML5で書かれているユーザインタフェースを備えたGecko レンダリングエンジンを基盤としていた。Firefox OSの開発は2016年に終了し[15] 、プロジェクトは2017年に完全に打ち切られたが[16] 、Firefox OSのフォークはフィーチャーフォン 向けのOSであるKaiOS の基盤として使用された[17] 。
初期導入
2015年、デザイナーのFrances BerrimanとGoogle ChromeのエンジニアのAlex Russellは、サービスワーカー やウェブアプリマニフェスト (英語版 ) を含むモダンなブラウザでサポートされている新機能を活用してユーザーがウェブアプリをネイティブOSのプログレッシブウェブアプリケーションにアップグレードできるアプリを説明する「プログレッシブウェブアプリ」[18] という用語を作り出した。その後、GoogleはAndroid向けのPWAの開発の促進にかなりの努力を注いだ[19] [20] 。Firefoxは2016年にサービスワーカーのサポートを導入し、2018年にはMicrosoft EdgeとSafariもサポートしたことで[21] [19] 、全ての主要なブラウザでサービスワーカーが利用できるようになった。
2019年までにPWAはMicrosoft Edge [6] (Windows )とGoogle Chrome [22] (Windows、macOS 、ChromeOS 、Linux )を含む殆どのブラウザのデスクトップ版でサポートされるようになった。
2020年12月、デスクトップ版FirefoxはPWAの実装を中止した[注釈 1] 。Firefoxの設計者は「私たちが送りたいシグナルはデスクトップ版FirefoxでPWAサポートが近いうちに提供されることはないということです。」とコメントしている[5] 。それでも、MozillaはFirefox for AndroidでPWAをサポートする予定である[23] 。
ストア
PWAはウェブアプリケーションとして知られているウェブページやウェブサイトの一種であるので、個別にバンドルしたり配布する必要はない。特に、開発者やユーザーがApp Store、Google Play、Microsoft Store 、Galaxy Store などのアプリケーションストアからウェブアプリをインストールする必要はない。程度の差はあるが、主要なアプリケーションストアはPWAの公開をサポートしている[2] 。Google Play、Microsoft Store[24] 、Galaxy StoreはPWAをサポートしているが、App Storeはサポートしていない。Microsoft Storeは一部の資格のあるPWAをBing インデックス経由で発見した後、アプリ開発者の要求がなくても自動的に公開する[25] 。
特徴
PWAは全て適切なウェブ標準 に準拠したあらゆるブラウザ上で動作するように設計されている。他のクロスプラットフォームの解決策と同様に、開発者がネイティブアプリよりも簡単にクロスプラットフォームアプリを構築できるようにすることが目標である[19] 。PWAはプログレッシブエンハンスメント ウェブ開発戦略を採用している。
一部のPWAはApp Shellモデルと呼ばれるアーキテクチャアプローチを使用している[26] 。このモデルでは、サービスワーカーはブラウザのオフラインキャッシュ の基本的なユーザインタフェースまたはレスポンシブウェブデザイン のウェブアプリケーション「シェル 」に保存される。このモデルによってPWAはウェブ接続の有無に関わらずネイティブアプリのような使用感を維持できる。コンテンツを動的だけでなく漸進的にロードできる初期静的フレーム 、レイアウトまたはアーキテクチャが提供されるのでロード時間を改善することができる[27] 。
インストール基準
サイトがPWAとみなされ、それ故にブラウザによってインストールできるための技術的なベースライン基準はRussellによってフォローアップ投稿で説明され[28] 、その後更新された[29] [30] :
安全な起点から発信される。TLS 経由で提供され、アクティブな混合コンテンツはない。ユーザーのプライバシー、セキュリティ、コンテンツの認証性を確保するために、PWAはHTTPS 経由で提供される必要がある。
サービスワーカーをfetchハンドラーに登録する。PWAではサービスワーカーを使用してプログラム可能なコンテンツキャッシュを作成する必要がある。最初の使用後にコンテンツをキャッシュし、様々なヒューリスティックに依存してコンテンツが不要になった時期を予測する通常のHTTPウェブキャッシュ (英語版 ) とは異なり、プログラム可能なキャッシュは最初に使用される前にコンテンツを事前に明示的にプリフェッチし、不要になった際に明示的に削除することができる[31] 。この要件はオフラインまたは低品質のネットワークでもページに接続するのに役立つ。
ウェブアプリマニフェストを参照する。マニフェストには少なくとも5つの主要なプロパティ[注釈 2] が含まれている必要がある。マニフェストに含まれている情報により、PWAはURL経由で簡単に共有することができ、検索エンジンによって発見できるようになり、複雑なインストール手順が緩和される[注釈 3] [32] 。その上、PWAはホーム画面 (英語版 ) への追加やスプラッシュスクリーン の表示などを含むネイティブアプリ様式の相互作用とナビゲーションをサポートしている。
ネイティブアプリとの比較
2017年、Twitter は公式のAndroid とiOS アプリの代わるPWAであるTwitter Liteをリリースした。Twitterによると、Twitter Liteはネイティブアプリのサイズの1 - 3%しか消費しなかった[33] 。スターバックス は同等のiOSアプリよりも99.84%小さいPWAを提供している。PWAの展開後、スターバックスのオンライン注文数は2倍になり、デスクトップユーザーの注文率はモバイルアプリユーザーのそれとほぼ同じとなった[34] 。
2018年にフォーブス が公表したレビューによると、Pinterest のPWAのユーザーは以前のモバイルウェブサイトと比較してサイトで40%多くの時間を過ごしていたことが分かった。広告収益率も44%増加し、コアエンゲージメントは60%増加した[35] 。フリップカート ではネイティブアプリをアンインストールした顧客の60%がFlipkart PWAを使用するようになった。ランコム ではiOSのPWAによりページがインタラクティブになるまでの時間が84%短縮され、コンバージョンの17%増加に繋がり、モバイルセッションが53%増加した[36] 。
技術
PWAの作成に一般的に使用される技術は複数ある。ウェブアプリケーションはインストール基準を満たしている場合にPWAとみなされるので、オフラインで動作しデバイスのホーム画面に追加することができる。この定義を満たすために、全てのPWAは少なくともサービスワーカーとマニフェストが必要である[37] [38] [39] 。
マニフェスト
ウェブアプリマニフェスト[40] はJSON ベース[注釈 4] のマニフェストを定義するW3C 仕様で[32] 、ウェブアプリケーションに関連付けられた次のようなメタデータ を配置する一元的な場所を開発者に提供する:
ウェブアプリケーションの名前
ウェブアプリアイコンまたは画像オブジェクトへのリンク
ウェブアプリを起動または開くための優先URL
ウェブアプリの設定データ
ウェブアプリのデフォルトの向き
全画面などの表示モードを設定するオプション
このメタデータはアプリをホーム画面に追加したりネイティブアプリと並べて一覧するために極めて重要である。
iOSサポート
iOS のSafariは欧州経済領域 の外でマニフェストを部分的に実装しているが[41] 、PWAメタデータの殆どはメタタグに対するApple固有の拡張を介して定義できる。これらのタグを使用すると、開発者は全画面表示を有効にし、アイコンとスプラッシュスクリーンを定義し、アプリケーションの名前を指定することができる[42] [43] 。
WebAssembly
WebAssemblyは事前コンパイル されたコードをウェブブラウザでネイティブに近い速度で実行することができる[44] 。それ故に、C言語 などで書かれたライブラリをウェブアプリに追加することができる。
データストレージ
PWAの実行コンテキストは可能な限りアンロードされるので、PWAは長期的な内部状態[注釈 5] の大部分を次のいずれかの方法で保存する必要がある:
ウェブストレージ
ウェブストレージはモダンなブラウザでキーと値のペアの保存を可能にするW3C標準APIである。ウェブストレージはsessionStorage[注釈 6] とlocalStorage[注釈 7] の2つのオブジェクトで構成されている[45] 。
Indexed Database API
Indexed Database APIは全ての主要なブラウザで利用できるW3C標準データベースAPIである。このAPIはモダンなブラウザでサポートされており、JSON オブジェクト及び文字列として表現できるあらゆる構造を保存することができる[46] 。Indexed Database APIはその周りに追加の構造を提供するラッパーライブラリと共に使用できる。
サービスワーカー
サービスワーカーはメインドキュメントからのウェブ/HTTPリクエストに応答できるプログラム可能なネットワークプロキシを実装するWeb Worker である。これはリモートサーバーの可用性を確認し、サーバーが利用可能になったときにコンテンツをキャッシュし、後でそのコンテンツをドキュメントに提供することができる。サービスワーカーは他のWeb Workerのようにメインドキュメントコンテキストとは別に動作する。サービスワーカーはプッシュ通知 を処理したり、バックグラウンドでデータを同期したり、リソースリクエストをキャッシュまたは取得したり、ネットワークリクエストを傍受したり、ドキュメントが読み込まれていない場合でもドキュメントを登録したそれとは無関係に一元的な更新を受信したりできる[47] 。
サービスワーカーは登録、インストール、有効化の3段階のライフサイクルを通過する。登録ではインストールの準備としてブラウザにサービスワーカーの場所を示す。ウェブアプリケーション向けのブラウザにサービスワーカーがインストールされていない場合か更新された場合はインストールが行われる。有効化はPWAの全てのページが閉じられると行われるので、以前のバージョンと更新されたバージョンの間に競合は発生しない。また、ドメインに対して有効にできるサービスワーカーは1つだけなので、ライフサイクルはサービスワーカーのバージョンを切り替えるときに一貫性を維持するのにも役立つ[47] 。
脚注
注釈
^ 具体的には、実験的機能として利用できたプロトタイプの「サイト固有ブラウザ 」設定を削除した。
^ name
、short_name
、start_url
、display
(standalone
、fullscreen
、minimal-ui
の値)、icons
(192pxと512pxのバージョン)。
^ それにも関わらず、PWAはサードパーティのアプリケーションストア で一覧されている。
^ 通常はmanifest.jsonとラベル付けされる。
^ ユーザーデータ、動的にロードされるアプリケーションリソース。
^ ブラウザのセッション終了時に消去されるセッション専用ストレージを有効にする。
^ セッション間で持続するストレージを有効にする。
出典
^ “プログレッシブウェブアプリ (PWA) ”. MDN Web Docs . Mozilla. 2024年2月19日時点のオリジナル よりアーカイブ。2024年2月19日 閲覧。
^ a b “Progressive Web Apps | Software AG ”. techradar.softwareag.com . 2020年9月25日 閲覧。
^ “Can I use pwa? ”. CanIUse . 2021年1月27日 閲覧。
^ “Is Service Worker Ready? ”. Jake Archibald. 2024年2月19日 閲覧。
^ a b c d e Newman, Jared (2021年1月26日). “Firefox just walked away from a key piece of the open web ” (英語). Fast Company . 2021年1月27日 閲覧。
^ a b “Progressive Web Apps on Windows overview ” (英語). Microsoft Edge Documentation (2021年3月13日). 2021年3月13日 閲覧。
^ “Get your PWA on ” (英語). Vivaldi Browser (2021年10月7日). 2021年10月11日 閲覧。
^ Jared Newman (2024年2月27日). “Why Floorp has become the browser of my dreams ” (英語). Fast Company (en:Fast Company ) . 2024年3月2日 閲覧。
^ Angle, Patrick (2023年6月6日). “News from WWDC23: WebKit Features in Safari 17 beta ”. WebKit . 2023年6月14日 閲覧。
^ Angle, Patrick (2023年3月27日). “WebKit Features in Safari 16.4 ”. WebKit . 2023年6月14日 閲覧。
^ “iPhone to Support Third-Party Web 2.0 Applications ” (英語). Apple (2007年6月11日). 2024年2月19日 閲覧。
^ a b “App Store Year Zero: Unsweet web apps drove iPhone to an SDK ” (英語). iMore (2018年3月5日). 2019年5月23日 閲覧。
^ “Jobs' original vision for the iPhone: No third-party native apps ”. 9to5Mac (2011年10月21日). 2019年5月22日 閲覧。
^ “Responsive Web Design ”. A List Apart (2010年5月25日). 2010年5月25日 閲覧。
^ “Mozilla ends commercial Firefox OS development - gHacks Tech News ” (英語). gHacks Technology News (2016年9月27日). 2022年5月5日 閲覧。
^ “Mozilla is stopping all commercial development on Firefox OS ” (英語). PCWorld (2016年9月28日). 2021年3月17日 閲覧。
^ “KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps ” (英語). TechCrunch (2018年2月26日). 2021年3月17日 閲覧。
^ “Progressive Web Apps: Escaping Tabs Without Losing Our Soul ”. 2015年6月15日 閲覧。
^ a b c “Apple goes back to the future with web apps ” (英語). Computerworld (2018年1月26日). 2019年5月23日 閲覧。
^ “Progressive Web Apps Are Here and They're Changing Everything ”. DEG (2018年4月17日). 2019年5月23日 閲覧。
^ “Can I use... Support tables for HTML5, CSS3, etc ”. caniuse.com . 2021年5月16日 閲覧。
^ “Progressive Web Apps on Desktop ” (英語). Google Developers (2019年6月4日). 2019年9月13日 閲覧。
^ agi90 (2020年12月19日). “Comment ”. Reddit . 2024年2月19日 閲覧。 “We have no plans of sunsetting PWAs on mobile that I know of.”
^ MSEdgeTeam. “Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development ” (英語). docs.microsoft.com . 2021年5月16日 閲覧。
^ “The first batch of Windows 10 Progressive Web Apps is here ”. Windows Central (2018年4月7日). 2021年5月16日 閲覧。
^ “The App Shell Model ”. 2024年2月19日 閲覧。
^ “The App Shell Model | Web Fundamentals ” (英語). Google Developers . 2019年5月23日 閲覧。
^ “What, Exactly, Makes a Progressive Web App ”. 2016年10月18日 閲覧。
^ “What does it take to be installable? ” (英語). web.dev . 2021年5月19日 閲覧。
^ “Progressive Web App ”. 2015年6月15日 閲覧。
^ “Service worker caching and HTTP caching ” (英語). web.dev . 2021年5月19日 閲覧。
^ a b W3C "Web App Manifest", Working Draft , retrieved 12 September 2016
^ Shankland, Stephen (2020年7月30日). “Twitter's app is helping stop phones from strangling the web ”. CNET . 2023年2月11日 閲覧。
^ “12 Best Examples of Progressive Web Apps (PWAs) in 2021 ” (英語). SimiCart (2021年2月22日). 2021年5月16日 閲覧。
^ Osmani, Addy (2017年11月30日). “A Pinterest Progressive Web App Performance Case Study ”. ChromiumDev team . 2023年2月10日 閲覧。
^ Gazdecki, Andrew (2018年3月9日). “Why Progressive Web Apps Will Replace Native Mobile Apps ”. Forbes . 2023年2月10日 閲覧。
^ “Discoverable ” (英語). Mozilla Developer Network . 2017年4月24日 閲覧。
^ “Network independent ” (英語). Mozilla Developer Network . 2017年4月24日 閲覧。
^ “Instant Loading Web Apps with an Application Shell Architecture ” (英語). Google Developers . 2017年4月24日 閲覧。
^ “Web Manifest Docs on MDN ”. MDN Web Docs . 2024年2月19日 閲覧。
^ Miller, Chance (2024年2月15日). “Apple confirms iOS 17.4 removes Home Screen web apps in the EU, here’s why ” (英語). 9to5Mac . 2024年2月16日 閲覧。
^ “What's new on iOS 12.2 for Progressive Web Apps ”. Medium (2019年3月27日). 2024年2月19日 閲覧。
^ “Configuring Web Applications ”. Safari Web Content Guide . 2024年2月19日 閲覧。
^ “WebAssembly Concepts ”. MDN . 2018年8月14日 閲覧。
^ “Web Storage API ”. MDN . 2018年8月14日 閲覧。
^ “Concepts behind IndexedDB ”. MDN . 2018年8月14日 閲覧。
^ a b “Introduction to Service Worker | Web ” (英語). Google Developers (2019年5月1日). 2019年5月23日 閲覧。
関連項目
外部リンク