Optimised way of debugging cordova app?

Questions
1

Hello there, I’m trying to add cordova plugin to framework7 app. My app.js is ,

import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles  
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles

import '../css/app.css';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component
  id: 'io.sapora.sapora_lite', // App bundle ID
  name: 'Sapora lite', // App name
  theme: 'auto', // Automatic theme detection


  // App routes
  routes: routes,


  // Input settings
  input: {
    scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
},
 // Cordova Statusbar settings
 statusbar: {
    iosOverlaysWebView: true,
   androidOverlaysWebView: false,
  },
 on: {
    init: function () {
  var f7 = this;
  if (f7.device.cordova) {
    // Init cordova APIs (see cordova-app.js)
    cordovaApp.init(f7);
  }
  
},
},
});

function onDeviceReady(){
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
}
 $$(document).on("page:init",'.page[data-name="home"]',function(e,page){
    document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady() is not firing up.On a closer inspection, i found out that root does not include cordova.js due to following line in index.html:-

 <% if (process.env.TARGET === 'cordova') { %>  
   <script src="cordova.js"></script><% } %>
  <!-- built script files will be auto injected -->

So i replaced above code with <script src="cordova.js"></script> on running again, it produces following error in browser(firefox) console.

Loading failed for the <script> with source “http://127.0.0.1:8080/cordova.js”.

My directory structure is;-

image
image271×556 6.77 KB

What i think is that it is actually happening because i’m using browser for testing the application? What are the software or plugin did you use(if you successfully integrated cordova plugin) when testing your framework7 application?

2

Actually I have cordova loaded in index.html
I use
simulate android --target=chrome
from the Cordova directory and it works.

You can also use the framework7 cli to create the correct directories and links

My only issue is that with F7 V5, using the CLI to generated directory structure, the simulate command works only inside Cordova dir but that is not automatically updated from the previous level www

3

Gagan, you’ve asked the same question across multiple posts. It would be helpful to consolidate them into one.

I think it would help you to study the documentation at https://cordova.io to understand how Cordova works. But the bottom line is that in your current debug scenario as you’ve described above, Cordova will not work. Firefox, Safari, Chrome or any web browser is not an environment that will support Cordova, unless you (as luigi37 stated) simulate Cordova within a web browser.

Microsoft has the extention ‘Tools for Apache Cordova’ for Visual Studio 2017 Community, and Visual Studio Code, which allows you to run Cordova and run certain plugins (but not all).

The bottom line is the deviceready event will not fire unless Cordova is running. And even if you hard-code a reference to cordova.js, it will not be included unless Cordova is running. So, your options are:

  1. Run your project on a physical device, using Xcode or Android Studio
  2. Run your project within the iOS or Android simulator
  3. Run your project on your desktop, using cordova-simulate (such as using Visual Studio Code)
  4. Use the Cordova CLI to server your project in a local webserver with cordova serve
4

I build apk from the project and yeah the code is working in the app. It would be great if framework7 can provide something like ionic wrapper. Or change directory structure so we can use simulate with current working directory. Thanks, for your help

5

Maybe this thread can sort your question: