2015 年には、デザイナーのフランシス ベリーマンと Google Chrome エンジニアのアレックス ラッセルが、ネットワークの利点とアプリケーションの利点を組み合わせた「PWA (Progressive Web Application)」という概念を提案しました。その中心的な目標は、Web アプリのパフォーマンスを向上させることです。ネイティブと同等の Web アプリのスムーズなエクスペリエンスを向上させます。
1.PWAとは
PWA はフレームワークやツールセットではなく、コンセプトであり、アプリケーションのユーザー エクスペリエンスを次のレベルに引き上げるために開発者がアプリケーションに実装する必要がある一連の機能です。Web サイトが何らかの形で PWA である場合、PWA 機能リストに含まれる機能が多ければ多いほど、その概念に近づきます。
PWA は、高度な Web 機能を通じて Web アプリケーションをネイティブ アプリケーションのように動作させ、動作させる Web アプリケーションのクラスの総称です。PWA は、プラットフォーム固有のアプリケーションと同様に、単一のコード ベースを通じて複数のプラットフォームおよび複数のデバイス上で実行でき、デバイスにインストールでき、オフラインおよびバックグラウンドで実行でき、デバイスおよび統合された他のインストール済みアプリケーションと通信できます。
PWA は既存のコードを再利用してサービス エクスペリエンスを提供できます。他のクロスプラットフォーム技術では、さまざまなデバイスやプラットフォームに適応したアプリケーションを一度に全店舗に導入する必要がある場合が多いですが、PWA はそれとは大きく異なり、本質的にネイティブ アプリケーションと同様のユーザー エクスペリエンスを提供する Web サイトです。PWA が人気がある理由の 1 つは、アプリケーションの作成とメンテナンスの投資コストを節約しながら、モバイル ネットワーク指向のすべてのデバイスのニーズを満たすことができることです。
簡単に言うと、PWA アプリケーションは、まず Web テクノロジーによって記述された Web ページです。次に、App Shell アーキテクチャを通じてマニフェストを追加することでデバイスのメイン画面に追加され、その後、オフライン キャッシュとメッセージ プッシュを実現します。 Service Worker 機能を介して。
2. PWAの主要技術
要約すると、PWA アプリケーションには、マニフェスト ベースの App Shell アーキテクチャと Service Worker の動作メカニズムという 2 つの主要なテクノロジがあります。
2.1 マニフェストベースの App Shell アーキテクチャ
App Shell アーキテクチャは、ネイティブ アプリケーションと同様に、ユーザーの画面に PWA を即座に確実にロードする PWA アプリケーションを構築する方法です。
PWA 構築方法として、App Shell アーキテクチャは、アプリケーションのヘッダー、下部、メニュー バー、その他の構造を含む、最も基本的な Web アプリ フレームワークを提供します。通常、React や Angular などの JavaScript フレームワークを使用して実装される App Shell アーキテクチャは、ロジックを実際のコンテンツから分離するシングルページ アプリケーション (SPA) を構築する方法として使用できます。
App Shell アーキテクチャには、静的リソースのキャッシュと、JavaScript を使用した実際のコンテンツの動的読み込みが含まれており、最小限の HTML/CSS/JS ユーザー インターフェイス コレクションをサポートできるキャッシュ可能な UI フレームワークです。オフライン キャッシュを使用すると、ユーザーが繰り返しアクセスした場合でも、即時に信頼性が高く、優れたパフォーマンスが保証されます。このようにして、ユーザーはアプリケーションを繰り返し開くときに Web アプリの基本インターフェイスをすぐに確認でき、必要なコンテンツをネットワークからリクエストしてロードするだけで済みます。これは、ユーザーがアクセスするたびに App Shell をネットワークからロードするのではなく、必要なコンテンツのみをネットワークからロードすればよいことも意味します。
App Shell は、ブラウザーの Web ランタイムを介した Web アプリケーションと現在のデバイス プラットフォーム間の対話であり、特に現在のデバイスの画面にアプリケーションの起動エントリを追加します。
Web アプリケーション マニフェスト。マニフェスト ファイルを通じて、ブラウザーが使用する名前、アイコンの URL などの Web アプリケーションのメタデータをブラウザーに公開します。たとえば、これにより、アプリケーションとオペレーティング システムの Web 統合機能が強化されます。マニフェストは json ファイルです。簡単な例は次のとおりです。
{
"name": "Progressive web app sample",
"short_name": "pwa sample",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#FFDF01",
"background_color": "#FFDF01",
"icons": [
{
"src": "homescreen.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "homescreen-124.png",
"sizes": "124x124",
"type": "image/png"
}
]
}ユーザーが初めて PWA アプリケーションにアクセスすると、ブラウザーは、manifest.json ファイルの内容に従ってアプリケーションを登録およびインストールし、いつでもオフラインでアクセスできるようにします。
JavaScript を多用したアーキテクチャを使用するシングルページ アプリケーションの場合、マニフェスト ベースの App Shell は、ネットワーク接続なしで初期 HTML を画面にすばやく読み込むのに適しています。
2.2 サービスワーカー
Service Worker は Web テクノロジーにおける Worker の一種ですが、Worker とは何でしょうか?
Javascript のシングルスレッドの性質により、「ウェイト」操作はメイン スレッドをブロックします。パフォーマンスとエクスペリエンスを向上させるために、最新のブラウザーはワーカーをマルチスレッド メカニズムとして使用し、元のシングルスレッド アプリケーションをマルチスレッド操作に変えます。最新のブラウザでは、次の 3 種類のワーカーが使用できます。
- Web ワーカー- 専用ワーカーと共有ワーカーを含む
- サービスワーカー
- ワークレット—— PaintWorklet、AudioWorklet、AnimationWorklet、LayoutWorklet が含まれます。このうち、Worklet はハードウェア インタラクション デザインに関連するもので、まだ実験段階にあります。Web ワーカーは、バックグラウンドでスクリプトを実行する場合に特に便利です。現在の Web ページでは複数のワーカーを登録できるため、さまざまなタスクをそれぞれの独立した環境で完了できます。サービス ワーカーは、Web ページとサーバー間の通信にブラウザーによって挿入される「中間層」に相当し、基本的にプロキシとして機能し、ページからのネットワーク リクエストをプログラムによって傍受して処理し、さまざまなソースからまったく新しい応答を生成することもできます。そして HTML を構築します。
Service Worker の主な内容に関して、次の図に核となるヒントが示されています。
Service Worker のインストール中にファイルをプリロードします。SPA の場合、これには通常、前に説明した「アプリケーション シェル」が含まれますが、単純な静的 Web サイトでは、基本的な機能がオフラインで維持されるように、すべての HTML、CSS、および JavaScript をプリロードすることを選択する場合があります。ネイティブ アプリと同様に、プッシュ通知を処理します。これは、Web サイトが通知を送信するためのユーザーの許可を取得し、ブラウザーが閉じている場合でも、Service Worker に依存してメッセージを受信して実行できることを意味します。。
2.3 Service Worker に基づくプッシュ、通知、およびバックグラウンド サービス
現在、ブラウザのメーカーごとに異なるプッシュ サービスが使用されています。Chrome は独自の FCM を使用し、Firefox も独自のサービスを使用しています。異なるプッシュ サービスは共通の Web プッシュ プロトコルに従い、標準の呼び出しメソッドを備えています。
このうち「UA」はユーザークライアント、つまりブラウザ、「アプリケーションサーバー」はバックエンドサービス、「プッシュサービス」は中間エージェントとして中核的な役割を果たします。プッシュ サービスは、クライアントのメッセージ サブスクリプションを受信し、「クライアント URL と公開キー」のペアのリストを維持および管理し、サブスクリプションと秘密キーの情報を保存するためにサーバーに送信します。さらに、プッシュ サービスからプッシュ メッセージを受信する必要があります。サーバーで確認し、表示のためにオブジェクトのクライアントに送信します。
プッシュ サービスには非常に重要な機能もあります。ユーザーがオフラインのときにメッセージ キューを保存し、オンラインになるまでメッセージ キューをユーザーに送信するのに役立ちます。
Notice 通知の機能はメッセージプッシュと似ていますが、よりシンプルで、通知メッセージを設定し、Service Worker の同じ通知インターフェイスを呼び出すだけで操作することもできます。
バックグラウンド同期は Service Worker のサブ機能でもあり、端末のネットワークが弱い場合やキングがない場合にバックグラウンド データを同期したり、フロントエンド リクエスト メッセージを継続したりするために使用されます。Service Worker はブラウザを閉じた後も実行されているため、ユーザーがネットワークを持たない場合や、クライアント側でネットワークを閉じた場合でも、Service Worker は対応するリクエストを保存し、ネットワーク接続が利用可能な場合にはデータ同期を開始します。
3. PWAのアプリケーション特徴と機能的特徴
Google が提供する PWA アプリケーションの機能は次のとおりです。
- 信頼性: インターネット接続が不十分または接続されていない場合でも、すぐに読み込まれます。インターネット接続がない場合、PWA は Service Worker を使用して Web サーバーへの依存を排除します。
- 高速: スムーズなアニメーションとインタラクションにより、アプリはぎこちないスクロールのないネイティブ エクスペリエンスを実現します。
- エンゲージメント: 全画面表示 (電話のデスクトップに追加された場合) を実行し、通知を処理する機能。
PWA アプリケーションの主な機能は次のとおりです。
- Progressive Enhancement : できるだけ多くの環境で実行され、利用可能なサービスを使用でき、利用できないサービスがある場合は正常に機能が低下します。
- レスポンシブ UI : アプリはさまざまな入力方法 (タッチ、音声など) および出力方法 (さまざまな画面サイズ、振動、オーディオ、点字ディスプレイなど) に適応します。
- 接続の独立性: アプリはオフラインでも、断続的または低帯域幅のネットワーク接続でも正常に動作します。
- アプリのような UI : アプリケーションはネイティブ プラットフォームの UI 要素を採用し、ユーザー インターフェイスを迅速にロードできます。
- 継続的な更新: Service Worker API は、アプリケーションを新しいバージョンに自動的に更新するプロセスを定義します。
- 安全な通信: サービスと通信は HTTPS 経由で提供され、スヌーピングや攻撃を防ぎます。
- アプリケーションの検出: SEO に適した W3C Web アプリケーション マニフェストなどのメタデータにより、検索エンジンが Web アプリケーションを見つけられるようになります。
- プッシュ インタラクション: プッシュ通知などの機能により、ユーザーを積極的に最新の状態に保つことができます。
- バックグラウンド読み込み: Web ページが閉じられているときでも、PWA はバックグラウンドで実行され、データ更新を取得できます (もちろん制限はあります)。
- ネイティブのインストール可能性: Web アプリケーションは、ネイティブ アプリ ストアを経由せずにインストールできます。
- リンク性: URL 経由でアプリケーションを簡単に共有し、明示的にインストールしなくても実行できます。
- 再アクセス可能で、アプリは URL 経由で簡単に共有でき、複雑なインストールなしで動作します。
- 軽量: Web アプリケーションはより軽量で、APP 全体は KB 以内です。
4. PWA 開発ツールと環境への影響
プログレッシブ Web アプリケーション (PWA) フレームワークはシンプルで信頼性が高く、開発者はさまざまなツールを使用して PWA を開発できます。一般的な開発ツール フレームワークは次のとおりです。
- VueJS : Vue は、コーディングを簡素化し、高速なレンダリングを提供するため、トップの PWA フレームワーク ライブラリの 1 つです。
- AngularJS : 2009 年に Google によってリリースされ、PWA アプリケーション開発で最も普及しているプロセスの 1 つです。
- ReactJS : 2013 年に Facebook によってリリースされた React には、JSX を使用して HTML 構造を接続して React PWA ソリューションを提供する関数をレンダリングする広範な JavaScript ライブラリが含まれています。
- Ionic : コーディングなしで API にアクセスするためのプラグインの巨大なライブラリを提供するオープンソース SDK
- Polymer : Polymer には、純粋な HTML、CSS、または JavaScript を独立したフレームワークとして使用する、さまざまなツール、コンポーネント、テンプレートがあります。
- Magento PWA Studio : ユーザー インターフェイスの構築、データ管理、アプリケーションのテストのためのツールなど、PWA の作成、デプロイ、管理に必要なものがすべて提供されます。
- Svelte : PWA を開発するための JavaScript フレームワークで、迅速に読み込まれる小さなコード パッケージに組み込まれています。
ソフトウェア エコロジーに関する限り、PWA は確かに、一部の従来のアプリケーション ソフトウェアや開発手法にある程度の影響と変化をもたらしました。
一部の開発者にとって、PWA テクノロジーの出現は、Web 側でのアプリケーション開発を考慮し、ユーザーにより良い Web アプリケーション エクスペリエンスを提供する必要があることを意味します。しかし同時に、PWA の開発方法により、アプリケーションをより柔軟に開発できるようになり、一部のネイティブ アプリケーションの開発およびリリースのコストが削減されます。
PWA テクノロジーの出現は、アプリケーション ストアに一定の影響を与える可能性があります。PWA は、ダウンロードやインストールを行わずにブラウザから直接アクセスできるため、一部のアプリケーション ストア ユーザーの喪失につながる可能性があります。ただし、アプリ ストアは、PWA アプリケーションを起動したり、アプリケーションのより良い収益化の機会を提供したりするなどの措置を講じることで、この変化に対応することもできます。
PWA テクノロジーの出現により、ユーザーにとって、オフライン アクセス、デスクトップ ショートカット、プッシュ通知、その他の機能などの Web アプリケーション エクスペリエンスが向上する可能性があり、また、一部のアプリケーションのダウンロードとインストールのコストも削減できます。ただし、ユーザーは、PWA アプリケーションにはネイティブ アプリケーションやアプレットよりもいくつかの点で制限や欠陥がある可能性があることも考慮する必要があります。
PWA テクノロジーは、アプリケーション ソフトウェア開発者、アプリケーション ストア、およびユーザーに一定の影響を与える可能性がありますが、元の開発および使用方法を完全に覆すものではありません。PWA の長所と短所は相対的なものであり、さまざまなアプリケーション シナリオと開発要件が開発者の PWA とネイティブ アプリケーションの選択に影響します。アプリケーションの機能、パフォーマンス、ユーザー エクスペリエンスの要件が高い場合は、ネイティブ アプリケーションを検討できます。開発コストと保守コストをさらに削減したいが、アプリの機能はいくつか必要な場合は、PWA の使用を検討できます。
5. PWA およびミニ プログラム
さまざまな小規模プログラムは、多かれ少なかれ PWA の技術思想を継承または借用しており、PWA はさまざまな小規模プログラムの源の 1 つであると考えられます。
スーパーアプリを利用して、WeChat、Baidu、Alipay などの企業が独自の小規模プログラムを立ち上げました。要約すると、ミニ プログラムは軽量のフレームワークとコンポーネントを使用しており、読み込み速度が速いため、ユーザーはアプリケーションをすぐに開くことができます。ミニ プログラムは、デバイスのハードウェア機能 (カメラ、位置決め、ジャイロスコープなど) とネイティブに統合して、より豊富な機能とユーザー エクスペリエンスを提供できます。アプリケーション ストアを通じて配布されるため、ユーザーはアプレットを簡単に検索、発見、インストールできます。小規模なプログラム開発では、統一された開発ツールと言語を使用するため、開発者の学習コストがある程度削減されます。さらに、アプレットはユーザー データを共有できるため、より便利なログインとデータ送信が可能になります。
PWA は、幅広いデバイスとプラットフォームをサポートし、ほぼすべての最新のブラウザーで実行できます。開発者は既存の Web 開発の知識とツールを最大限に活用でき、大規模な開発者コミュニティが豊富なリソース、ツール、サポートを提供します。ミニ プログラムは、スーパー アプリを介してトラフィック エントリとして使用することも、企業独自のアプリで実行することもできます。企業のアプリは、ミニ プログラム ランタイム SDK を統合するだけで、ミニ プログラムの実行機能を取得できるため、ミニ プログラムの配布が広がります。チャネル。ミニ プログラム エコシステムは、開発者がユーザーの行動、アプリケーションのパフォーマンス、使用状況を理解するのに役立つデータ分析および統計ツールを提供します。開発者はこれらのツールを使用して、データ駆動型の最適化と改善のための主要な指標とデータを取得できます。これらのツールは、開発者がユーザーの行動とアプリケーションのパフォーマンスをより深く理解するのに役立つ視覚的なレポートとグラフを提供します。
PWA とアプレットはどちらもモバイル アプリケーション開発の分野で一般的な技術ソリューションであり、それぞれに独自の特徴があります。開発者の観点から見ると、PWA には広範なブラウザ サポート、クロスプラットフォーム機能、および成熟した Web 開発エコシステムが備わっています。小規模なプログラムは、トラフィック エントリ、アプリケーション ストアのサポート、ハードウェア統合の点で優れています。
6. まとめ
PWA は先進的な概念であり、技術の探求ですが、この概念が競争上の優位性に直接発展することはありません。2023年になりましたが、プロモーションコストやアプリケーションコストが低いPWAは依然として小規模なプログラムの影に隠れており、アプリケーション開発の現状を依然として打破することはできていないようです。さまざまな国内プラットフォームやプラットフォーム監査要素の強い影響に加えて、PWA には依然としていくつかの明らかな欠点があります。PWAはブラウザベースのWebエンド技術ですが、ネイティブAPPと比較すると、ハードウェアレベルでの呼び出しができないなど、システムレベルのさまざまな機能が明らかに不十分であり、アニメーションやレンダリングのパフォーマンスもネイティブAPPに比べて大幅に劣り、サイズが大きい計算量や処理量、音声や映像も弱点です。
では、PWA の適用範囲が広がるとしたら、最優先のブレークスルー ポイントはどこでしょうか?
道具を上手に活用しよう
成功するフロントエンドエンジニアはツールの使い方が上手です。近年、海外ではMendix、中国ではJNPFなど、ローコードコンセプトが普及しています。この新しい開発手法は、グラフィカルなドラッグアンドドロップ構成インターフェイスを備えており、コード拡張により、B サイドのバックグラウンド管理 Web サイトの構築効率が大幅に向上しました。
JNPF は多くの人に使用されており、機能のマスターであり、これをベースにあらゆる情報システムを開発できます。
原則は、開発プロセスで繰り返される特定のシナリオとプロセスを個別のコンポーネント、API、データベース インターフェイスに視覚化し、ホイールの繰り返し作成を回避することです。したがって、プログラマーの生産性が大幅に向上します。
公式 Web サイト: www.jnpfsoft.com/?csdn、時間があれば、知識を広げることができます。
これは、Java Boot/.Net Core に基づく、シンプルなクロスプラットフォームの迅速な開発フレームワークです。よく使用される何千ものクラスがフロントエンドとバックエンドでカプセル化されており、拡張に便利です。コードジェネレーターが統合されているため、フロントエンドとバックエンドでのビジネスコードの生成をサポートし、迅速な開発を満たし、作業効率を向上させます。フレームワークは、フォーム、レポート、グラフ、大画面、その他の一般的に使用されるデモは直接使用するのが簡単で、バックエンド フレームワークは Vue2 と Vue3 をサポートしています。
データベースモデリングからWeb API構築、ページデザインまで、より技術要件の高いアプリケーション開発をサポートするため、従来のソフトウェア開発とほとんど変わりませんが、ローコード可視化モードのみで、「足し算」「追加」を構築する繰り返し作業が不要になります。 「削除、変更、クエリ」機能が縮小されます。