モバイル

Apache Cordovaチュートリアル：Cordovaを使用したモバイルアプリケーションの開発

注意： これはもともと書かれていたので、私はこの記事を更新して [メール保護] 0.0、 [メール保護] 、および [メール保護]

モバイルアプリケーションは、スマートフォンやタブレットからスマートウォッチに至るまで、あらゆる場所に忍び寄り、まもなく他のウェアラブルにも登場します。ただし、リソースが限られている場合や、開発者が1人ではなく単一の開発者である場合は特に、個別のモバイルプラットフォームごとに開発することは徹底的な作業になる可能性があります。モバイルアプリ開発会社。

これは、精通したApacheCordova開発者 HTML5、CSS3、JavaScriptなどの標準的なWebテクノロジーを使用してモバイルアプリケーションを開発する方法を提供することで、便利になります。

2009年、Nitobiというスタートアップが、開発者が標準のWebテクノロジーを使用してモバイルアプリケーションを作成できるようにすることを目的として、ネイティブモバイルリソースにアクセスするためのオープンソースAPIであるPhoneGapを作成しました。 Nitobiのビジョンでは、ほとんどのモバイルアプリケーションは間もなくPhoneGapを使用して開発されますが、パフォーマンスの問題や特定のハードウェアにアクセスする方法がないため、開発者は必要に応じてネイティブコードを作成することもできます。

コルドバPhoneGap？

本当にそんなことはありません。何が起こったのかというと、アドビは2011年にNitobiを買収し、オープンソースコアをApache Software Foundationに寄付し、ApacheCordovaのブランドを変更しました。よく遭遇する一般的な例えは、CordovaはPhoneGapであり、WebKitはChromeまたはSafariであるというものです。

明らかに、CordovaとPhoneGapの違いは最初は最小限でした。時間とともに、 Adobe PhoneGap コルドバはオープンソースコミュニティによってサポートされていましたが、現在もサポートされていますが、独自の機能セットを開発しました。このApacheCordovaのレビューとチュートリアルでは、Cordovaアプリの開発について詳しく説明します。その一部は、PhoneGapに適用される場合がありますが、これはPhoneGapチュートリアルと見なすべきではありません。 それ自体 。

ApacheCordovaの機能

本質的に、Cordovaには、ネイティブに開発されたアプリケーションに関して制限はありません。 Cordovaで得られるのは、ネイティブコードのラッパーとして機能し、デバイス間で一貫性のあるJavaScriptAPIです。 Cordovaは、デバイスの画面全体をカバーするWebビューを備えたアプリケーションコンテナーと見なすことができます。 Cordovaで使用されるWebビューは、ネイティブオペレーティングシステムで使用されるWebビューと同じです。 iOSでは、これがデフォルトのObjective-CですUIWebViewまたはカスタムWKWebViewクラス; Androidの場合、これはandroid.webkit.WebViewです。

Apache Cordovaには、デバイスのカメラ、GPS、ファイルシステムなどへのアクセスを提供する、事前に開発されたプラグインのセットが付属しています。モバイルデバイスが進化するにつれて、追加のハードウェアのサポートを追加するだけで、新しいプラグインを開発できます。

.hファイルc ++

最後に、Cordovaアプリケーションがインストールされますネイティブアプリケーションと同じように。つまり、iOS用にコードをビルドするとIPAファイルが生成され、Android用にAPKファイルが生成され、WindowsPhone用にビルドするとXAPファイルが生成されます。開発プロセスに十分な努力を払うと、ユーザーはネイティブアプリケーションを使用していないことに気付かない可能性があります。

ApacheCordovaの機能

ApacheCordova開発ワークフロー

コルドバで開発するときにたどることができる2つの基本的なパスがあります。

プラットフォーム固有の開発をほとんどまたはまったく行わずに、アプリケーションをできるだけ多くのプラットフォームにデプロイすることを意図している場合は、クロスプラットフォームワークフローを使用する必要があります。このワークフローをサポートする主なツールは、Cordovaコマンドラインインターフェイス（CLI）です。これは、さまざまなプラットフォーム用にアプリケーションを構成および構築するための高レベルの抽象化として機能します。これは、より一般的に使用される開発パスです。
特定のプラットフォームを念頭に置いてアプリケーションを開発する場合は、プラットフォーム中心のワークフローを使用する必要があります。このように、ネイティブコンポーネントをCordovaコンポーネントと混合することにより、コードをより低いレベルで微調整および変更することができます。このアプローチをクロスプラットフォーム開発に使用できたとしても、プロセスはより長く、より面倒になります。

プラットフォーム中心の開発への切り替えはかなり簡単なので、通常はクロスプラットフォーム開発ワークフローから始めることをお勧めします。ただし、最初にプラットフォーム中心のワークフローを開始した場合、ビルドプロセスを実行すると、CLIによってカスタマイズが上書きされるため、クロスプラットフォーム開発に切り替えることはできません。

前提条件とCordovaのインストール

Cordovaに関連するものをインストールして実行する前に、アプリケーションを構築する予定のプラットフォームごとにSDKをインストールする必要があります。この記事では、Androidプラットフォームに焦点を当てます。ただし、他のプラットフォームを含むプロセスも同様です。

見つかったAndroidSDKをダウンロードする必要がありますここに。 Windowsの場合、SDKはインストーラーとして提供されますが、LinuxおよびOSXの場合、SDKは簡単に抽出できるアーカイブとして提供されます。パッケージを抽出/インストールした後、sdk/toolsを追加する必要がありますおよびsdk/platform-toolsあなたのPATHへのディレクトリ変数。 PATH変数は、ビルドプロセスに必要なバイナリを探すためにCordovaによって使用されます。 Javaがインストールされていない場合は、先に進んでAntと一緒にJDKをインストールする必要があります。 ANT_HOMEおよびJAVA_HOME JDKとAntのbinフォルダーに設定する必要があり、Android SDKをインストールした後、ANDROID_HOMEを設定します。 Android/Sdkへの変数。 3つのすべての場所*_HOME変数もPATHに含める必要があります変数。

SDKをインストールした後androidコマンドがコマンドラインで使用できるようになります。それを実行してSDKマネージャーを開き、最新のツールとAndroidAPIをインストールします。あなたはおそらく必要になるでしょう Android SDKツール、Android SDKプラットフォームツール、Android SDKビルドツール、SDKプラットフォーム、Google API Intel x86 Atomシステムイメージ、AndroidSDKのソースそして Intel x86エミュレーターアクセラレーター（HAXMインストーラー） 。その後、android avdを使用してエミュレーターを作成できるようになります。

Cordova CLIはNode.jsとGitクライアントに依存しているため、先に進んでNodeをダウンロードしてインストールします。 nodejs.org 、およびGit from git-scm.com 。 npmを使用してCordovaCLI自体をインストールし、追加のプラグインをインストールします。Cordovaは、必要な依存関係をダウンロードするために、舞台裏でgitを使用します。最後に、実行します

npm install -g cordova

…CordovaCLIをグローバルにインストールする（npm install cordovaだけでは不十分です）。

要約すると、これらはあなたが必要とするパッケージです：

Java
蟻
Android SDK
NodeJS
行く

そして、これらの環境変数を更新する必要があります。

PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME

アプリケーションのブートストラップ

Cordovaが正常にインストールされていれば、Cordovaコマンドラインユーティリティにアクセスできるはずです。ターミナルまたはコマンドラインを開き、最初のCordovaプロジェクトを作成するディレクトリに移動します。アプリケーションをブートストラップするには、次のコマンドを入力します。

cordova create toptal toptal.hello HelloApeeScape

コマンドラインは、コマンドの名前cordovaと、それに続くサブコマンドcreateで構成されます。サブコマンドは、アプリケーションが配置されるフォルダー、アプリケーションの名前空間、およびその表示名の3つの追加パラメーターを使用して呼び出されます。これにより、次の構造のフォルダーにアプリケーションがブートストラップされます。

toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

wwwフォルダにはアプリケーションコアが含まれています。ここに、すべてのプラットフォームに共通のアプリケーションコードを配置します。

Cordovaを使用すると、さまざまなプラットフォーム用のアプリを簡単に開発できますが、カスタマイズを追加する必要がある場合もあります。複数のプラットフォーム向けに開発する場合、さまざまなplatforms/[platform-name][assets]/wwwのソースファイルを変更する必要はありません。ディレクトリは定期的にトップレベルで上書きされるためwwwファイル。

この時点で、config.xmlを開くこともできます作成者や説明など、アプリケーションのメタデータをファイルして変更します。

以下を使用して最初のプラットフォームを追加します。

cordova platform add android

後で気が変わった場合は、ビルドプロセスからプラットフォームを簡単に削除できます。

cordova platform rm android

プラットフォームディレクトリを調べると、androidに気付くでしょう。その中のフォルダ。追加するプラットフォームごとに、Cordovaはプラットフォームに新しいディレクトリを作成し、wwwを複製します。その中のフォルダ。たとえば、Android向けにアプリケーションをカスタマイズする場合は、platforms/android/assets/wwwのファイルを変更できます。プラットフォーム固有のシェルツールに切り替えます。

焦点を絞った設計の質問をする方法を学ぶ

ただし、CLI（クロスプラットフォーム開発に使用）を使用してアプリケーションを再構築すると、Cordovaは各プラットフォームに加えた変更を上書きするため、バージョン管理下にあることを確認するか、プラットフォーム固有の変更を行ってください。クロスプラットフォーム開発が終了した後の変更。先に述べたように、クロスプラットフォームからプラットフォーム固有の開発への移行は簡単です。他の方向に移動することはできません。

クロスプラットフォームワークフローを引き続き使用し、プラットフォーム固有のカスタマイズを行う場合は、最上位のマージフォルダーを使用する必要があります。 Cordovaバージョン3.5以降、このフォルダーはデフォルトのアプリケーションテンプレートから削除されましたが、必要に応じて、他のトップレベルディレクトリ（hooks、platforms、| _）と一緒に簡単に作成できます。 + _ |、およびplugins）。

プラットフォーム固有のカスタマイズはwwwに配置され、トップレベルのソースファイルの後に適用されますmerges/[platform-name]フォルダ。このようにして、特定のプラットフォーム用に新しいソースファイルを追加するか、トップレベルのソースファイル全体をプラットフォーム固有のソースファイルで上書きすることができます。たとえば、次の構造を考えてみましょう。

www

プラグインディレクトリには、各プラットフォームのプラグインの情報が含まれています。この時点では、wwwのみが必要です。次の構造を持つ必要があるファイル：

android.json

アプリケーションをビルドしてAndroidデバイスにデプロイしましょう。必要に応じて、エミュレーターも使用できます。

Cordovaは、アプリを構築および実行するためのいくつかのCLIステップを提供します：{ 'prepare_queue': { 'installed': [], 'uninstalled': [] }, 'config_munge': { 'files': {} }, 'installed_plugins': {}, 'dependent_plugins': {} } 、cordova prepare、cordova compile （これは前の2つのショートカットです）、cordova buildおよびcordova emulate （これにはcordova runが組み込まれており、エミュレーターも実行できます）。ほとんどの場合、エミュレーターでアプリをビルドして実行したいので、これで混乱することはありません。

build

必要に応じて、USBポートを介してデバイスを接続し、USBデバッグモードを有効にして、最初のApacheCordovaアプリケーションを次のコマンドを実行するだけでデバイスに直接デプロイできます。

cordova run --emulator

これにより、すべてのファイルがcordova run にコピーされます。必要なすべてのタスクを実行します。

アプリケーションをビルドするプラットフォームの名前や特定のエミュレーターを指定することで、ビルドプロセスの範囲を制限できます。例：

platforms/*

または

cordova run android --emulator

実践的なApacheCordovaチュートリアル

Cordovaとそのプラグインの使用法を示す簡単なチュートリアルアプリケーションを作成しましょう。デモ全体はにありますこのGitHubリポジトリダウンロードして、この短いCordovaチュートリアルと一緒にその一部を確認できるようにします。

作成した初期設定を使用して、コードを追加します。架空のApeeScapeデータベースに新しいプロジェクトを追加し、既存のプロジェクトを表示したいとします。 index.htmlを開き、次の方法で2つのタブを設定します。

cordova run ios --emulator --target='iPhone-8-Plus'

Bootstrapとを追加したことに注意してください jQuery 依存関係としてのモバイル。最新のハイブリッドアプリケーションを構築するために、はるかに優れたソリューションとフレームワークが開発されていることに注意してください。ただし、ほとんどの（すべてではないにしても）Web開発者は、これら2つのライブラリに精通しているため、初心者向けのチュートリアルに使用するのが理にかなっています。必要に応じて、GitHubからスタイルシートをダウンロードするか、独自のスタイルシートを使用できます。

Hello ApeeScape

 Search Projects
 Post a Project

に移動しましょうファイルを作成し、次のように削除します。

index.js

Cordovaアプリケーションの推奨アーキテクチャは、シングルページアプリケーション（SPA）のセットアップであることを忘れないでください。このように、すべてのリソースはアプリの起動時に1回だけ読み込まれ、アプリケーションが実行されている限りWebビューにとどまることができます。さらに、SPAを使用すると、ネイティブアプリケーションで一般的ではないページのリロードがユーザーに発生しなくなります。そのことを念頭に置いて、2つのタブを切り替える簡単なコントローラーを設定しましょう。

var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener('deviceready', this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

これまでのところ、コントローラーには2つのメソッドがあります。1つは検索ビューをレンダリングするためのもので、もう1つはプロジェクト後ビューをレンダリングするためのものです。 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; } で初期化しましょう最初にファイルを上部で宣言し、onDeviceReadyメソッドで作成します。

index.js // top of index.js var controller = null

最後に、// inside onDeviceReady method controller = new Controller(); にスクリプト参照を追加しますindex.htmlへの参照の上。検索ビューと投稿ビューはGitHubから直接ダウンロードできます。部分ビューはファイルから読み取られるため、Chromeなどの一部のブラウザは、ページをレンダリングしようとしているときに、クロスドメインリクエストについて文句を言います。

ここで考えられる解決策は、たとえばindex.jsを使用してローカル静的サーバーを実行することです。 npmモジュール。また、ここでは、PhoneGapやIonicなどのフレームワークの使用について考え始めることができます。それらはすべて、ブラウザーでのエミュレート、ホットリロード、コード生成（スキャフォールディング）など、さまざまな開発ツールを提供します。

とりあえず、以下を実行してAndroidデバイスにデプロイしましょう。

node-static

この時点で、アプリケーションには2つのタブがあります。最初のタブでは、プロジェクトを検索できます。

ApacheCordovaアプリケーション

2番目のタブでは、新しいプロジェクトを投稿できます。

ApacheCordovaプロジェクトが投稿されました

現在あるのは、Webビュー内で実行される従来のWebアプリケーションだけです。ネイティブ機能は実際には使用していないので、今すぐ使用してみましょう。よくある質問は、データをデバイスにローカルに保存する方法、より正確には、使用するストレージの種類です。行くにはいくつかの方法があります：

ローカルストレージ
WebSQL
IndexedDB
Webサービスを介してアクセスされるサーバー側ストレージ
他のオプションを提供するサードパーティのプラグイン

LocalStorageは少量のデータを保存するのに問題ありませんが、使用可能なスペースが3〜10 MBであるため、データ集約型のアプリケーションを構築している場合は十分ではありません。この場合、IndexedDBがより良いソリューションになる可能性があります。 WebSQLは非推奨であり、一部のプラットフォームではサポートされていません。最後に、Webサービスを使用してデータをフェッチおよび変更することは、SPAパラダイムにうまく適合しますが、アプリケーションがオフラインになると機能しなくなります。 PWAの手法とサービスワーカーが最近、これを支援するためにコルドバの世界に登場しました。

また、Cordovaのコアのギャップを埋めるために、追加のサードパーティプラグインが多数用意されています。ファイルプラグインは、デバイスのファイルシステムへのアクセスを提供し、ファイルの作成と保存を可能にするため、非常に便利な場合があります。とりあえず、ローカルSQLiteデータベースを提供するSQLitePluginを試してみましょう。次のコマンドを実行して、プロジェクトに追加できます。

sとcの法人の違い

cordova run android

SQLitePluginは、デバイスのSQLiteデータベースにAPIを提供し、真の永続化メカニズムとして機能します。次の方法で簡単なストレージサービスを作成できます。

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

GitHubからプロジェクトをフェッチおよび追加するためのコードをダウンロードして、それぞれのプレースホルダーに貼り付けることができます。 Controller.jsの上のindex.htmlファイルにSQLiteStorageService.jsを追加し、コントローラーのinit関数を変更してコントローラーで初期化することを忘れないでください。

SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: 'demo.toptal', location: 'default'}) : window.openDatabase('demo.toptal', '1.0', 'DB para FactAV', 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

service.addProject（）を垣間見ると、navigator.geolocation.getCurrentPosition（）メソッドが呼び出されていることがわかります。 Cordovaには、電話の現在地を取得するために使用できるジオロケーションプラグインがあり、navigator.geolocation.watchPosition（）メソッドを使用して、ユーザーの位置が変更されたときに更新を受信することもできます。

最後に、データベースにプロジェクトを追加およびデータベースからフェッチするためのコントローラーイベントハンドルを追加しましょう。

initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

コンソールとダイアログプラグインを追加するには、以下を実行します。

renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = ' Click to open map '; $div.find('.project-location').html(url); } else { $div.find('.project-location').text('Not specified'); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

cordova.consoleプラグインは、cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console を有効にすることで、デバッグを支援します。エミュレーター内で機能します。

これらのどれがサーバー側のWebアプリケーションの保護が難しい理由ではありません

Chromeリモートデバッガーを使用してAndroidアプリケーションを簡単にデバッグできます。デバイスを接続したら、右上隅（[X]ボタンの下）にあるドロップダウンメニューをクリックし、[その他のツール]を展開して、[デバイスの検査]をクリックします。リストにデバイスが表示され、デバッグコンソールを開くことができるはずです。

Safariは、USB接続デバイスまたはエミュレーターで実行されるiOSアプリをデバッグするための同じ機能を提供します。 [Safariの設定]> [詳細設定]タブで開発ツールを有効にするだけです。

cordova.dialogsプラグインは、ネイティブ通知を有効にします。一般的な方法は、console.log()を再定義することです。次の方法でcordova.dialogsAPIを使用するメソッド：

windows.alert

overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback 'ApeeScape', // title 'OK' // buttonName ); }; } } 関数はoverrideBrowserAlert内で呼び出す必要がありますイベントハンドラ。

これで、データベースから新しいプロジェクトを追加したり、既存のプロジェクトを表示したりできるようになります。 [場所を含める]チェックボックスを選択すると、デバイスはGeolocation APIを呼び出し、現在の場所をプロジェクトに追加します。

アイコンとスプラッシュ画面を設定して、アプリケーションに最後の仕上げを加えましょう。以下をdevicereadyに追加しますファイル：

config.xml

最後に、ロゴ画像をwww/imgに配置しますフォルダ。

コルドバモバイルチュートリアルアプリケーション

あなた自身のCordovaアプリ

Apache Cordovaアプリ開発の基本的な手順を実行し、独自のJavaScriptアーキテクチャを使用して CSSスタイルシート。このCordovaチュートリアルは、使い慣れたテクノロジを使用してモバイルアプリケーションを開発する手段として、Apache Cordovaの可能性を示し、開発時間と、さまざまなプラットフォーム用に複数のアプリケーションを構築するために必要な労力の両方を削減する試みでした。

ただし、本番環境に移行するアプリケーションを構築する場合は、既存のフレームワークを使用することをお勧めします。事前定義されたアーキテクチャでアプリケーションを構造化することに加えて、これにより、アプリケーションをネイティブのルックアンドフィールに近づけるのに役立つ一連のコンポーネントが提供される場合もあります。注目に値するいくつかのフレームワークはイオン、 Framework7 、ウィックス、ラチェット、 Kendo UI 、および Onsen UI 。頑張ってください！

関連： Cordovaフレームワーク：IonicとFramework7

基本を理解する

コルドバとは何ですか？

Apache Cordovaは、標準のWebテクノロジーを使用してクロスプラットフォームのモバイルアプリを作成するためのフレームワークです。基本的に、これはデバイスの画面全体をカバーするWebビューを備えたアプリケーションコンテナです。

PhoneGapとは何ですか？

現在、PhoneGapは、ApacheCordovaの上にAdobeによって構築された製品を指します。もともとは、Adobeがそれらを取得してApacheCordovaとしてオープンソース化する前にNitobiによって作成されたフレームワークでした。

WebViewとは何ですか？

AndroidのWebViewとiOSのUIWebViewは、それぞれのオペレーティングシステムがWebページを全画面表示するために使用するクラスです。開発者はそれらを使用してWebブラウザーを構築できます。または、Apache Cordovaの場合は、それらを使用して、ネイティブアプリであるかのようにWebアプリを表示できます。