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

どうやって Mendix プログレッシブウェブアプリ (PWA) は機能しますか?

プログレッシブウェブアプリ (PWA) は、ユーザーエクスペリエンスを向上させるためにブラウザーの機能を段階的に利用する特別なタイプのウェブアプリケーションです。 Mendix プログレッシブウェブアプリは Webアプリケーションただし、PWA は、部分的または完全にオフラインで動作するオプション、デバイスのホーム画面に追加するオプション、デバイス機能と Web プッシュ通知のサポートなど、より多くの機能を提供します。PWA はモバイルアプリで使用されることが多いですが、デスクトップアプリにも使用できます。

開発者は、Webアプリを作成するのと同じような方法でPWAを作成できます。この対称性により、開発者は使い慣れたすべてのオプションを利用でき、既存のコンポーネントと知識を再利用できます。さらに、開発者はオフラインファーストアプリのパフォーマンスと可用性を向上させるアプローチ。

開発者は、ユースケースに必要なPWA機能だけを有効にすることができます。たとえば、 ホーム画面に追加 サポート、リソースキャッシュ (ページ、スタイル、ロジックなど)、または完全なオフラインサポート。開発者は、カメラや位置情報サービスなどのデバイス機能を活用する機能を追加したり、Web プッシュ通知のサポートを追加したりすることもできます。利用可能な機能はブラウザーの機能によって異なることに注意してください。

で説明したようにどのように Mendix マルチチャネルアプリケーションをサポートしますか? のセクション フロントエンドPWAは、 Mendix アプリケーション。ザ・ Mendix クライアントは、JavaScript、HTML5、CSS3 に基づくリッチなシングルページアプリケーション (SPA) である Web アプリのレンダリングを担当します。PWA は、サービスワーカーを使用してデータをキャッシュし、パフォーマンスを向上させます。

WYSIWYGページエディタを使用する Mendix Studio Proでは、ユーザーはページやインタラクションをモデル化して、ローカルで実行したり、Studio Pro IDEから直接展開したりできます。ローカルで実行する場合、変更は直接表示されます。これは、 即時更新 現在の状態を維持しながら UI を即座に再読み込みする機能により、アプリのテストとプレビューが簡単になります。

アプリがクラウドにデプロイされると、静的リソース（HTML、CSS、JavaScript）がフロントエンドサーバーにデプロイされ、リソースをキャッシュして効率的に提供します。PWAは、パフォーマンスを向上させるためにユーザーのブラウザにリソースをキャッシュすることもできます。メインエントリは index.html ページを読み込み、 Mendix クライアントはページをレンダリングし、イベントの処理を開始します。認証が必要な場合、エンドユーザーはログインページまたは ID プロバイダーにリダイレクトされます。 Mendix キャッシュ無効化メカニズムを適用することで、新しいバージョンを展開するときにキャッシュの問題が発生しないことを確認します。

この Mendix JavaScriptクライアントはUIをレンダリングし、ブラウザ内でのアクションを処理し、HTTPS経由でAPIを介して通信します。 Mendix ランタイム。このリッチクライアントは、サーバーを呼び出すことなく多くのアクションを実行できるため、コストのかかるサーバー間の往復回数を最小限に抑えることができます。クライアント側の機能その事実 Mendix アプリはアクセシビリティガイドラインに準拠しながらブラウザの戻る/進む機能をサポートしているため、優れたパフォーマンスで Web アプリを効率的にモデル化できます。

どのように Mendix さまざまな画面サイズとデバイスをサポートしていますか?

Mendix ページはデフォルトでレスポンシブなので、画面サイズに合わせて自動的に調整されます。これにより、デスクトップからスマートフォンまで、さまざまな画面サイズですぐに使用できる Web アプリが実現します。ユーザーエクスペリエンスを最適化するために、スマートフォンとタブレット用に個別のモバイル Web チャネルを定義できます。デバイスタイプ (スマートフォン、タブレット、デスクトップなど) は、他のシナリオのロジックでも使用できます。

Mendix は、優れたユーザーエクスペリエンスを構築するために役立つ、デバイスごとにいくつかの共通パターンとベストプラクティスを提供します。また、これらのパターンをカスタムバリアントで拡張することもできます。ユーザーインターフェース設計.