window.cordova and window.FirebasePlugin are not accessable

[SamiraHuber]

Hey together,
I am new to Cordova - only did web and app programming before and I am currently struggling a lot and I hope someone could maybe help me.

I want to show a web page inside cordova to make notifications and location accessible. I had an old app as an example which doesn't work anymore since the server for an API call changed and since it uses really old versions, I thought it is better to rebuild it. But now, I just struggle in so many small things.

So I load the app with InAppBrowser
var browser = cordova.InAppBrowser.open(url,'_blank','location=no,zoom=no,hidden=no,hardwareback=no,toolbar=no');
But inside the app, I don't have access to window.cordova

but in the old project, this was run to load the cordova.js file

var isCordovaApp = !!window._cordovaNative || !!window.cordova;
if (isCordovaApp) {
      var cordovaScript = document.createElement('script');
      cordovaScript.type = 'text/javascript';
      cordovaScript.src = '***injected***/cordova.js';
      var cordovaPluginScript = document.createElement('script');
      cordovaPluginScript.type = 'text/javascript';
      cordovaPluginScript.src = ***injected***/cordova_plugins.js';

      document.head.appendChild(cordovaScript);
      document.head.appendChild(cordovaPluginScript);

So there, window.cordova seemed to be set.

But neither I are the files (cordova.js, cordova_plugins.js) included in the web-project, nor is this called, since isCordovaApp is false.

I than thought I just try to add this scripts directly and this worked, except: I cannot access window.FirebasePlugin (from the firebasex plugin). It is installed and from a javascript file inside the cordova app, I can do all the things I want. But not from the website. The Plugin-Script was loaded inside the web, but no chance. And really no idea on how to get it to work...

I ran it on my android device. I use chrome inspect to check the console logs.

Any idea what I miss or do wrong? I really appreciate any idea, tip or info.

[breautek]

So I load the app with InAppBrowser
var browser = cordova.InAppBrowser.open(url,'_blank','location=no,zoom=no,hidden=no,hardwareback=no,toolbar=no');
But inside the app, I don't have access to window.cordova

In App browser context does not have access to the cordova bridge and this is by design. The in app browser is intended for viewing remote-based untrusted web content. It's a security issue (and a policy issue with Apple & Google) if remote content can access native device APIs. Therefore plugins are restricted to the main app webview.

The InAppBrowser window behaves like a standard web browser, and can't access Cordova APIs. For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova webview. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.

https://github.com/apache/cordova-plugin-inappbrowser?tab=readme-ov-file#windowopen

[SamiraHuber]

Thank you for the answer. Is there than a chance, how to call things like window.FirebasePlugin.hasPermission(function (data) {}) from the website to make it possible to send notifications?

I also tried it without InAppBrowser like this, but I had the same issues:
window.location = url;

[breautek]

I also tried it without InAppBrowser like this, but I had the same issues:
window.location = url;

While it is possible to make the main webview load an external site, your external site doesn't host the cordova API. It is possible to make this work, but it will be the wrong approach to take as it will open up security concerns.

I'm not very familiar with Firebase or Push messaging in general so I'm going to have to keep this generic. If I understand correctly, you have a mobile application (e.g. the Cordova App) and a remote server and you want to be able to push notifications to the mobile application.

Generally speaking, the cordova applcation should be a self-contained web app. That is it contains all the JS code, plugins, to run a web app locally. The web application can network (XHR) requests to a remote server for data, logging in, etc. Apple & Google both have an expectation that you're application can run gracefully while offline.

Push notification systems are usually a form of a Publisher-Subscriber System where you have a broker (e.g. FireBase), a publisher (usually a backend server) using a backend api, and finally a subscriber, usually a client listens for published messages via a client side API (e.g. the firebase cordova plugin).

For firebase, their introduction guide goes into more detail on the architecture: https://firebase.google.com/docs/cloud-messaging

[SamiraHuber]

Thanks again for the detailed explanation. I feel like I somehow need to access the firebase tool "FirebasePlugin" that I load over the cordova app. But if I understand you right, this is the wrong approach to somehow get this into the context of "window"?

[breautek]

The cordova plugin would be an interface to the "SDK on device" part of the architecture. Generally speaking a plugin would integrate the native API for the running platform.

So android implementation of the plugin, the plugin will integrate with the Android transport layer.
the ios implementation of the plugin would integrate with the iOS / APNs,
... so on

It would be used to setup a "subscriber". Like I said earlier I'm not really familiar with Firebase, but there is going to be some way to tie users to some kind of identifier so that the backend can push notifications to specific users. Usually backends have an ability to push a notification to specific users,or a group of users, or to do a broadcast (to all users).

Generally speaking you don't use "Web / JS" SDKs on Cordova environments because they likely assume a traditional website setup, which Cordova is not that kind of environment. The plugins fills in the gap to bridge the cordova web environment with the native APIs. Generally you don't need to be too concerned about the native integrations, unless if you start developing plugins yourself but it's good to understand the architecture.

Generally speaking you don't use "Web / JS" SDKs on Cordova environments because they likely assume a traditional website setup

This is not to say you can't use web frameworks and such, for example in my cordova apps I do use ReactJS. Just that some frameworks assumes a traditional web environment will likely have some caveats or issues. Generally these are frameworks that involves API keys, since API keys are typically tied to a domain, and your cordova application doesn't have a "domain". But native SDKs have other abilities to restrict your API usage safely. I hope this makes sense.

Edit: reword to avoid confusion with the Apache core platform implementations