プログレッシブWebアプリ – ウィキペディア

Posted on by
before-content-x4

プログレッシブWebアプリ
Progressive Web Apps Logo.svg
基本データになります
公開年 シフト。 2015年
実行環境 ウェブブラウザ
プログラミング言語 JavaScript、JSON

一 プログレッシブWebアプリ （ 獲物 ）は、以前はネイティブアプリ用に予約されていた多数の機能を備えたWebサイトです。 [初め] したがって、それはまた、応答性の高いウェブサイトとアプリからの共生症として説明することができます。プログレッシブWebアプリは、HTML5、CSS3、JavaScriptを備えたWebサイトのように作成できます。さらに、いわゆるサービスワーカーは、最適化されたキャッシングを通じてオフライン機能に役立ちます。 HTTPSプロトコルは、WebクライアントとWebサーバー間の通信に必須です。

after-content-x4

ますます多くの人々がスマートフォンを使用してインターネットにアクセスします。ドイツでは、インターネットユーザーの割合が、2014年にスマートフォンを介してすべてのインターネットユーザーの約69％に影響を与えました。 [2] これまでのところ、Webサイトオペレーターの問題は、レスポンシブまたはモバイルのWebサイトと追加のネイティブアプリの両方を開発する必要があり、市場で自分自身を主張したかったことでした。 PWAは、URLを使用してWebサイトのように呼び出すことができ、同時にオフライン機能を提供できるため、二重開発を余計にする必要があります。

「プログレッシブウェブアプリ」という用語はの一部です Webアプリ （ドイツのWebアプリケーション）一緒に、HTML、CSS、JavaScript Webテクニックの助けを借りて開発されました。他の部分は、2003年にスティーブンチャンポンによって提示されたプログレッシブエンハンスメントの概念に起因します。 [3] これは、Webアプリケーションの基本機能をすべてのブラウザで実行できることを要求するWebサイトの開発方法です。新しい機能は、ブラウザによってサポートされている場合にのみ、ユーザーエクスペリエンスを改善するために使用する必要があります。プログレッシブWebアプリなどが必要なため、この手順が必要です。最新のブラウザでのみ機能するサービスワーカーのテクニックを使用します。

次の定義は、プログレッシブWebアプリの関連するすべてのプロパティを要約しています。 [4]

「プログレッシブWebアプリはレスポンシブであり、HTTPSによって転送されます。HTTPSは、プログレッシブエンハンスメントの原則に応じてブラウザのスキルを使用します。つまり、サービスワーカーを介したオフライン機能を使用して、Webアプリマニフェストを使用したインストール、および通知をプッシュすることは、信頼性、モチベーション、ネイティブユーザーエクスペリエンスが保証されます。」

プログレッシブWebアプリは、例えばB.ブラウザにWebサーバーのURLを入力すると、最初のリクエストを送信します。
Webサーバーはリクエストを受け入れ、PWAに渡します。PWAはここでWebアプリケーションとして機能します。これにより、Webサーバーから送信されるWebサイトのHTMLソースコードがユーザーのブラウザー（HTTPS-Response）に送信されます。

ユーザーは、レスポンシブデザインのためにデバイスに適合したWebサイトを表示します。 Progressive WebアプリはURLを介して呼び出されていますが、ユーザーはスマートフォンの画面にアイコンを引いたり、プッシュ通知を受信したり、ページをオフラインで使用できます。
プログレッシブエンハンスメントに基づくテクノロジーは、使用するデバイスに応じてユーザーに可能な限り最高のユーザーエクスペリエンスを提供することを目的としています。

技術的には、これはHTML5、CSS3、JavaScript、サービスワーカーで実装され、オプションではAngularまたはPolymerなどのライブラリなどのフレームワークが実装されています。
ネイティブファイルシステムまたはアドレス帳へのアクセスは、Google ChromiumなどのトライアルバージョンのプログレッシブWebアプリでのみ可能です。 [5]

サービスワーカー [ 編集 | ソーステキストを編集します ]

サービスワーカーは、バックグラウンドでWebブラウザを実行するJavaScriptです。プログレッシブWebアプリの場合、オフラインの使いやすさのキャッシュなどの重要な機能を提供します。 [6] オンラインで呼び出されると、次にインターネット接続なしでページにアクセスするときにコンテンツを表示できます（オフライン操作）。ネイティブアプリから既知のプッシュ通知は、サービスワーカーでも可能です。サービスワーカーは、ページのJavaScriptに特別にプログラム、登録、インストールされています。サービスワーカーはHTTPSを引き起こします。そのため、HTTPSを搭載したすべてのプログレッシブWebアプリが実行されています。などの多くのフレームワークB.モバイルツールキットを使用したAngular、サービスワーカーの準備ができているため、自分で開発する必要がないようにします。

アプリシェル [ 編集 | ソーステキストを編集します ]

アプリシェル（またはアプリケーションシェル）は、最小HTML、CSS、およびJavaスクリプトであり、プログレッシブアプリのユーザーインターフェイスの正しい実行に必要です。シェルの最初の充電は非常に速く、すぐにキャッシュされる必要があります。これは、シェルがネットワークを介して1回ファイルをロードし、ローカルリポジトリ（キャッシュ）に保存することを意味します。アプリをさらに開くたびに、ローカルで利用可能なデータのみが必要です。

アプリケーションシェルのアーキテクチャは、アプリケーションインフラストラクチャとユーザーインターフェイスのコアをデータから分離します。ユーザーインターフェイスとインフラストラクチャは、サービスワーカーを使用してローカルにキャッシュされます。アプリの他のショップは、すべてのデータではなく必要なもののみをロードします。

アプリケーションシェルの目的は、ネイティブアプリを開発する場合、アプリパッケージのアップロードに匹敵します。 [7]

Webサイトとしてのプロパティに加えて、プログレッシブWebアプリは、以前はネイティブアプリからのみ知られていた多くの特別な機能を提供します。

HomeScreenへの追加/InstallierBarkeit [ 編集 | ソーステキストを編集します ]

プログレッシブWebアプリは、「Add-to-HomeScreen」を介してインストールできます。マニフェストファイルが使用されます。 B.アイコン付きのスプラッシュ画面を作成します。

ブラウザでは、インストールの通知（モバイルデバイス）またはブラウザメニューまたはURLラインがインストールの関数が表示されます。

プッシュ通知 [ 編集 | ソーステキストを編集します ]

プッシュ通知は、ネイティブアプリからも知られています。したがって、Progressive Webアプリのオペレーターは、キャンペーン、割引、またはイベントに注意を引くことができ、したがって相互作用率を高めることができます。

オフライン機能 [ 編集 | ソーステキストを編集します ]

サービスワーカーのキャッシュ機能を使用して、コンテンツもオフラインで利用可能にアクセスしています。この特性は、インターネット接続を必要としないネイティブアプリも思い出させます。プログレッシブWebアプリは、一貫してオフラインファーストアプローチに従います。

  • コスト削減： Android、iOS、およびWebを実装する代わりに、PWAのみを開発する必要があります。アプリとは対照的に、GoogleとAppleはアプリとは対照的に、アプリ内購入で獲得しません。 [8]
  • アプリのようなデザイン： PWAのユーザーエクスペリエンスと相互作用パターンは、ネイティブアプリを使用して再現でき、同じユーザーエクスペリエンスを提供できます。 [8]
  • HardwareZugriff： PWAは、プッシュ通知、センサーデータ、カメラなど、さまざまなネイティブ機能を実装するオプションを提供します。 [8]
  • 簡素化された出版物： PWAはGoogle Playストアに行くことができますが、Google PlayまたはAppleのApp Storeの長い公開プロセスを通過する必要はありません。 [8]
  • オフラインモダス： PWAオフラインは、サービスワーカーの助けを借りて動作し、顧客の忠誠心の増加につながる可能性があります。 [8]
  • パフォーマンスを向上させた： PWAは通常のWebアプリよりも高速です。コンバージョン、ユーザーエクスペリエンス、および保持評議会は、この恩恵を受けます。 [8]
  • Webトラフィックを使用できます。 PWAはリンクでき、検索エンジンの最適化の恩恵を受けることができます。 [8]

プログレッシブWebアプリの完全なサポートは現在、Pre -versionsでのみ与えられています。 ChromeとFirefoxは完全に互換性があり、Safariには正の信号があり、Microsoft Edgeは将来GoogleのChromeモジュールを使用します。 [9] バージョン11.3サービスワーカーとSafari 11.1のWebアプリマニフェストが実装されて以来、オフライン機能はiOSで利用可能です。 [十]

PWAはプログレッシブエンハンスメントに依存しているため、サービスワーカーのテクニックをサポートしていないブラウザでも使用できます。そうして初めて、インターネット接続が必要です。

成功したプログレッシブWebアプリはワシントンポストからのものでした。 [11] フリップカート [12番目] およびBooking.comが公開しました。 [13] インドのオンラインショップは、70％の変換率とページ上の3倍の滞在を達成することができたため、Flipkartは頻繁に典型的な例として使用されます。 [14] 番号は、Add-to-HomeScreen関数を使用したユーザーを指します。
すでに提供されているプログレッシブWebアプリには、TwitterとTrivagoのアプリが含まれます。

オンラインディレクトリ [ 編集 | ソーステキストを編集します ]

PWAS用のApp StoreやGoogle Playなどの公式ストアはないため、これらのアプリをリストするオンラインディレクトリがいくつかあります。

Progressive Webアプリの最大のディレクトリは、例外なくリストされており、PWASインストール可能なものです。 [15] AppScopeなどの他のディレクトリは、Webアプリのみであるアプリもリストします。

  • 話をしてください： プログレッシブウェブアプリの構築：ブラウザのネイティブのパワーをもたらす 。 O’Reilly、Sebastopol 2017、ISBN 978-1-4919-6165-0。
  • クリスチャン・リーベル： プログレッシブWebアプリ：練習帳 。第1版。 Rheinwerk Verlag、Bonn 2019、ISBN 978-3-8362-6494-5。
  1. ↑ クリスチャン・リーベル： プログレッシブWebアプリ、パート1：Webはネイティブ（ER）になります。 2017年10月30日に取得 。
  2. ↑ モバイルインターネットユーザー – 2014年ドイツで共有。 の： 政治家。 2016年6月23日にアクセス 。
  3. ↑ スティーブン・チャンポン： Webデザインの進歩的な強化と未来 。 2003年。
  4. ↑ ケビン・フランク： プログレッシブWebアプリを使用するためのガイドの作成と評価 。 2018年12月20日、 S. 16 、urn： NBN：from：KOBV：522-OPUS4-21937 （ kobv.de ）。
  5. ↑ クリスチャン・リーベル： Google Project Fugu：球面魚の力。 の： heise.de。 2018年12月19日にアクセス 。
  6. ↑ サービスワーカーの紹介：サービスワーカーの使用方法。 の： HTML5ロック。 2014年12月1日、アーカイブ オリジナル 午前 26. 2016年6月 ; 2016年6月26日にアクセス （英語）。 情報： アーカイブリンクは自動的に使用されており、まだチェックされていません。指示に従ってオリジナルとアーカイブのリンクを確認してから、このメモを削除してください。 @初め @2 テンプレート：webachiv/iabot/www.html5rocks.com
  7. ↑ プログレッシブWebアプリケーションを開発する必要がある理由。 の： Ackeeブログ。 2020年1月8日、 2020年5月11日に取得 （ドイツ人）。
  8. ↑ a b c d そうです f g プログレッシブWebアプリ。 の： GoingMeta.io。 2020年4月14日に取得 （ドイツ人）。
  9. ↑ サービスワーカーは準備ができていますか？ の： jakearchibald.github.io。 2016年6月24日にアクセス 。
  10. ↑ クリスチャン・リーベル： iOS 11.3：ようこそ、プログレッシブWebアプリ！ 2018年2月15日にアクセス （ドイツ人）。
  11. ↑ ワシントンポストでは、新しいプログレッシブWebアプリエクスペリエンスを紹介しています （2016年5月19日からWashingtonPost.com、2016年6月25日アクセス）
  12. ↑ プログレッシブWebアプリ：モバイルを体験する新しい方法 （ 記念 2016年6月23日から インターネットアーカイブ ）（2015年11月9日のTech-Blog.flipkart.net、2016年6月25日アクセス）
  13. ↑ サービスワーカーとのプログレッシブWebアプリ （2016年4月21日からBooking.com、2016年6月25日アクセス）
  14. ↑ developers.google.com
  15. ↑ ホワイトハイン： AROUNT -FINDPWA -Progressive Webアプリのディレクトリ。 2020年1月12日にアクセス （英語）。
after-content-x4