CordovaのWebページをブラウザからの開けるようにする

Cordovaの開発をする際に、Webページをサーバ上に配備して、アプリの再インストールすることなく、すぐにリロードすることができます。

【参考】
Cordovaアプリ開発の備忘録
Cordovaアプリ開発の備忘録(プラグイン編)

今回はさらに、通常のPCのブラウザからもWebページを開けるようにします。
そうすることで、ネイティブの機能を使わないロジックはPCのブラウザで開発し、ネイティブの機能を使うときだけCordovaのネイティブアプリから開発することができます。

ちなみに、この投稿は、以下の投稿の補足です。
　散歩ルート計画アプリを作った

index.html

通常は、こんな感じでcordova.jsをロードしていたかと思います。

index.html

  <script src="js/index.js"></script>
  <script src="cordova.js"></script>

この状態で、PCのブラウザから開くと、ダイアログがたくさん表示されて、まともに動作しないかと思います。
これを以下のようにいったんindex.htmlからcordova.jsを読むのをやめます。

index.html

  <script src="js/index.js"></script>
  <!-- <script src="cordova.js"></script> -->

動的にcordova.jsをロード

cordova.jsのロードをユーザエージェントの内容を見て判断します。
まずは、UserAgentを解析するためのライブラリを使いました（自身で判断してもよいです）

index.html

  <script src="https://cdn.jsdelivr.net/npm/ua-parser-js@1.0.35/src/ua-parser.min.js"></script>

Content Security Policyの設定もご注意を。

そして、index.jsか他のjavascriptで以下を実行します。
'Chrome WebView'か'WebKit'だったら、Cordovaのネイティブアプリからの起動だと判断するようにしました。厳密ではないので、適宜カスタマイズが必要かもしれません。

        const ua = new UAParser();
        console.log(ua.getBrowser(), ua.getDevice(), ua.getEngine(), ua.getOS());
        const browser = ua.getBrowser();
        if (browser && (browser.name == 'Chrome WebView' || browser.name == 'WebKit')) {
            const script = document.createElement("script");
            script.src = "cordova.js";
            document.head.appendChild(script);
        } else {
            this.onDeviceReady(true);
        }

Cordovaネイティブアプリからの起動とわかれば、cordova.jsのHTMLエレメントを追加しています。
これで、Cordovaが起動すれば、index.js内のonDeviceReadyが呼び出されるはずです。
逆に、Cordovaネイティブアプリでなければ、onDeviceReadyに引数true付きで呼び出していますので、その中で分岐処理ができるようにしました。

以上