JS not working in APK

—

### ✅ 1. **Check `deviceready` Event**
Cordova JS **only works after the `deviceready` event**. If you’re initializing Framework7 or other scripts before this, they may silently fail.

**Fix:**

document.addEventListener('deviceready', function () {
    // Initialize Framework7 and your app code here
    console.log('Device is ready');
    initializeApp(); // your init logic
}, false);

—

### ✅ 2. **Framework7 & Cordova JavaScript File Order**
Ensure the order of script tags in `index.html` or `home.html` is correct:

<!-- Cordova must be first -->
<script src="cordova.js"></script>

<!-- Then Framework7 -->
<script src="framework7.bundle.min.js"></script>

<!-- Then your app script -->
<script src="js/app.js"></script>

—

### ✅ 3. **Production Path Issues**
In build mode, **relative paths might break**, especially if you're using `file://` protocol in Android WebView.

**Fix:** Use proper relative paths (`./js/app.js`) and avoid `/js/app.js` (root-relative).

Also make sure all assets are bundled correctly inside `www/` before running `cordova build`.

—

### ✅ 4. **Console Logs Hidden**
You might think JS is not running just because logs are not visible.

**Solution:**
– Use **Chrome Remote Debugging** to inspect your WebView:
– Connect your Android phone
– Run `chrome://inspect` in your desktop Chrome browser
– Click "inspect" under your app
– Open console to view errors

—

### ✅ 5. **Minification Issues or Syntax Errors**
Sometimes the minified JS or bundling causes errors. Try replacing your script with a raw, unminified version to debug.

—

### ✅ 6. **Whitelist & CSP Restrictions**
Check if **Content Security Policy (CSP)** or **whitelist plugin** is blocking JS execution or external requests.

Make sure your `index.html` includes:

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: gap:;">

—

### ✅ 7. **Check Cordova Plugins**
Ensure your plugins are installed and compatible. Sometimes missing or incompatible plugins can silently break JS code.

—

### ✅ 8. **Framework7 Initialization**
If you're using Framework7 + jQuery, ensure you're initializing correctly **inside deviceready**.

Example:

function initializeApp() {
    var app = new Framework7({
        root: '#app',
        name: 'MyApp',
        id: 'com.example.myapp',
        panel: { swipe: true },
        routes: [/*...*/],
    });

    var mainView = app.views.create('.view-main');
}

—

### Final Step: Test in Browser
Before building the APK, test your app in a browser (`cordova serve`) or Android emulator. Then inspect after APK install via **`chrome://inspect`**.

—

If you can share your `index.html` and `app.js` or `initializeApp()` code, I’ll help spot any exact issues.

<script>

</script>

<script>

</script>

<script>

</script>

–>

<script>

</script>

<script>

</script>

<script>

</script>

—

## ✅ Recommended Fixes

### 1. **Ensure all JS runs *after* Cordova `deviceready`**
Your `js/f7-init.js` and `js/index.js` must **not initialize Framework7 or bind events until `deviceready` fires**.

✅ Wrap everything inside:

document.addEventListener('deviceready', function () {
    // Init Framework7 and app logic
    initializeApp(); // call your own method to initialize
}, false);

If you already do this in `f7-init.js`, good. Otherwise, it's mandatory.

—

### 2. ✅ **Verify File Paths in Built APK**
Sometimes after `cordova build`, files are not included or paths change unexpectedly.

Check:
– Does the `www/js/` folder have all your `.js` files after build?
– Are they **not accidentally in `platforms/android/app/src/main/assets/www/js/` only**?

—

### 3. ✅ **Enable Debugging via Chrome**
Use `chrome://inspect` on your desktop while the app is open on your Android device. This helps see:
– Any JavaScript errors
– Network request failures
– Missing file errors (404s)

—

### 4. ✅ **Use `console.log` at Every Step**
In `f7-init.js` and `index.js`, add logs like:

console.log("Cordova ready");
console.log("Framework7 initialized");

Then check if they show up in `chrome://inspect`.

—

### 5. ✅ **Fix `cordova.js` 404 in browser**
If you test your app in the browser and see a 404 for `cordova.js`, it’s **expected** — it only exists in the actual Cordova environment.

So don’t worry about it in browser, but ensure it’s loaded in real device via `chrome://inspect`.

—

### 6. ✅ **Add Fallback for `cordova.js` (optional but useful)**

To prevent console errors in browser testing:

<script type="text/javascript">
    if (typeof cordova === 'undefined') {
        document.write('<script src="js/mock-cordova.js"></script>');
    }
</script>

Where `js/mock-cordova.js` is an empty file for testing only.

—

### 7. ✅ **Check for JS errors like `Uncaught TypeError` or `undefined`**
– If `Framework7` is undefined — likely wrong path
– If `$` or `jQuery` is undefined — jQuery didn’t load
– If `cordova` is undefined — `deviceready` missed or `cordova.js` failed

—

## ✅ Summary Fix

Here’s the correct structure:

<script src="cordova.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="lib/framework7/framework7-bundle.min.js"></script>
<script>
  document.addEventListener('deviceready', function () {
      console.log("Cordova ready");

      var app = new Framework7({
          root: '#app',
          name: 'MyApp',
          id: 'com.example.app',
          routes: [...]
      });

      var mainView = app.views.create('.view-main');

      // Your custom logic
  }, false);
</script>
<script src="js/index.js"></script>

—

If it's **still not working**, please paste:
– Your `f7-init.js` code
– Your `index.js` code
– Console error from `chrome://inspect`

And I’ll debug the exact problem.

This usually happens because of **JavaScript not re-initializing properly after the app is resumed** (i.e. from background to foreground).

—

## ✅ Root Cause:
When you reopen the app:
– Cordova doesn't reload the page
– Your previous JS state (like views, event bindings, or DOM references) might be stale or lost
– Framework7 components (like buttons, views, or routers) don’t re-bind automatically

—

## ✅ Fix: Use Cordova’s `resume` Event
You must **listen to the `resume` event** and re-check Framework7 state or rebind as needed.

### ✅ Add This:
In your `index.js` or `f7-init.js` (after `deviceready`):

document.addEventListener('resume', function () {
    console.log('App resumed');

    // Optional: Re-initialize router/views if needed
    if (!app || !app.views || !app.views.main) {
        console.log('Re-initializing Framework7 view');
        app = new Framework7({ /* same init config */ });
        app.views.create('.view-main');
    }

    // Optional: manually rebind click handlers
    // $('.your-button').off('click').on('click', function() { ... });
}, false);

—

## ✅ Also Ensure:
1. **Event handlers are not lost**:
– Use **delegated jQuery** events if you're dynamically loading pages:

$(document).on('click', '.some-button', function () {
         // Always works, even after reopen
     });

2. **Views are not duplicated**:
– Only create views once. If you do `app.views.create()` on every `resume`, check if it already exists first.

3. **Router working properly**:
– Framework7 router can break if app state is corrupted. Try:

app.views.main.router.refreshPage();

4. **No background cleanup breaks state**:
– On some Android devices, system may kill background JS memory but keep WebView shell running → re-init is required on `resume`.

—

## 🔄 Optional Full Safe Reset on Resume
If issues persist, do a soft reload:

document.addEventListener('resume', function () {
    if (window.location && window.location.reload) {
        window.location.reload(); // full reset of JS context
    }
});

⚠️ Use this only if necessary, as it reloads the whole app.

—

If you can share a snippet of your init code or navigation logic, I can suggest a more targeted patch.

Here’s a refined fix strategy that preserves performance while guarding against failure:

—

## ✅ Safe & Smart Fix for Intermittent Resume Issues

### 1. **Use `resume` Event to Recheck Framework7 State**

Inside your main `index.js` or `f7-init.js` (after `deviceready`):

document.addEventListener('resume', function () {
    console.log('App resumed');

    // Check if the app or main view is still valid
    try {
        if (!app || !app.views || !app.views.main) {
            console.warn('Framework7 state missing, reinitializing app...');

            app = new Framework7({
                root: '#app',
                name: 'MyApp',
                id: 'com.example.app',
                routes: [...], // your routes
            });

            app.views.create('.view-main');
        } else {
            // Optional: refresh current page to restore interactivity
            app.views.main.router.refreshPage();
        }
    } catch (e) {
        console.error('Resume error:', e);
        location.reload(); // last-resort fallback
    }
}, false);

—

### 2. **Ensure DOM Is Fully Ready Before Binding Events**

Sometimes the DOM isn’t ready yet after resume. Add a short timeout:

document.addEventListener('resume', function () {
    setTimeout(() => {
        console.log('App resumed — checking DOM & re-attaching events');

        // Rebind any dynamic buttons if needed
        $(document).off('click', '.btn-do-something').on('click', '.btn-do-something', function () {
            console.log('Button clicked after resume');
            // action
        });

    }, 300); // delay slightly to let DOM settle
});

—

### 3. ✅ **Bonus: Add a Visual Indicator for Debugging**

If you’re not sure whether the resume logic is being triggered:

document.addEventListener('resume', function () {
    $('body').append('<div style="position:fixed;bottom:0;left:0;background:red;color:white;padding:5px;z-index:9999">Resumed</div>');
});

—

### Summary:
– ✅ Use `resume` event
– ✅ Refresh or re-init if app/views are missing
– ✅ Add a short `setTimeout` to let DOM stabilize
– ✅ Use delegated events via `$(document).on()` to ensure handlers survive navigation or app pause/resume
– ✅ Reload as a last resort only if all else fails

—

Let me know if you'd like help turning this into a reusable `AppStateManager` or utility wrapper.

Here’s how to **safely enhance your setup**:

—

## ✅ Solution: Add Resume Handling to Refresh or Rebind

Append the following in your `f7-init.js` **after** your `window.f7App = new Framework7(…)` block:

document.addEventListener('resume', function () {
  console.log('App resumed — checking view status');

  // Safety check: Ensure main view still exists
  if (!window.f7App.views || !window.f7App.views.main) {
    console.warn('Main view not found, recreating...');

    // Create main view again
    window.f7App.views.create('.view-main');
  } else {
    try {
      // Optional: Refresh current route to re-render page components
      window.f7App.views.main.router.refreshPage();
      console.log('Main view refreshed');
    } catch (e) {
      console.error('Failed to refresh, reloading page...');
      location.reload(); // fallback if something fails
    }
  }
}, false);

—

## ✅ Optional: Protect Event Bindings in `index.js` or Dynamic Pages

If your button events are bound in pages like `customer.html`, use **delegated events** to avoid losing them:

// Inside index.js or within $(document).ready(...)
$(document).on('click', '.btn-navigate', function () {
  window.f7App.views.main.router.navigate('/customer/');
});

This approach survives:
– page refresh
– DOM replacement via Ajax
– Cordova resume

—

## 🔄 Optional: Force Full Refresh on Resume (If Intermittent Bug Still Occurs)

If all else fails:

document.addEventListener('resume', function () {
  setTimeout(() => {
    location.reload(); // Hard reset of app state
  }, 500);
});

But use this **only if resume issues are frequent and unpredictable**.

—

Let me know if you want to track active view or persist state across resume. I can help set up a more robust app lifecycle handler for Cordova + Framework7.

– Proper Framework7 Core/jQuery build setup
– Route definitions
– Cordova `resume` event handler
– Safe refresh or re-init logic on resume

—

### ✅ Full `f7-init.js`

// Initialize Framework7 app
window.f7App = new Framework7({
  el: '#app',
  name: 'FossettsCircusApp',
  theme: 'auto',
  routes: [
    {
      path: '/',
      url: 'pages/home.html',
    },
    {
      path: '/customer/',
      url: 'pages/customer.html',
    },
    {
      path: '/staff/',
      url: 'pages/staff.html',
    },
    {
      path: '/staff-login/',
      url: 'pages/staff-login.html',
    },
  ],
});

// Create main view
window.f7App.views.create('.view-main');

// Handle Cordova resume event
document.addEventListener('resume', function () {
  console.log('App resumed — checking view status');

  try {
    // If main view doesn't exist, recreate it
    if (!window.f7App.views || !window.f7App.views.main) {
      console.warn('Main view not found, recreating...');
      window.f7App.views.create('.view-main');
    } else {
      // Refresh current page to re-bind JS
      window.f7App.views.main.router.refreshPage();
      console.log('Main view refreshed after resume');
    }
  } catch (e) {
    console.error('Resume handling failed:', e);
    location.reload(); // Final fallback if something goes wrong
  }
}, false);

—

### ✅ Optional: Safe Button Bind in `index.js`

To prevent navigation button issues:

$(document).on('click', '.btn-go-customer', function () {
  window.f7App.views.main.router.navigate('/customer/');
});

$(document).on('click', '.btn-go-home', function () {
  window.f7App.views.main.router.navigate('/');
});

Use these instead of `.click()` or inline `onclick`.

—

Let me know if you also want:
– Back button behavior
– Offline detection on resume
– State saving between sessions

I can add that next.