deviceready

deviceready

index.html and the deviceready Event

<content src="index.html" /> in config.xml names the start page. BookNest's index.html (cordova create) is a shell: a header, an empty <main> holding Waiting for deviceready..., a footer, and two scripts in this order:

The end of BookNest's www/index.htmlHTML

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

cordova.js must load before any script that uses Cordova 129 . It sets up the bridge, loads the plugin modules and then fires deviceready on document. Until then plugin APIs are undefined, so everything that touches the device starts in that handler. The event is sticky: a listener added after it fired still runs at once. BookNest's handler ends by logging the time since the page started loading, which the WebView console (Remote Debugging) shows:

The end of BookNest's deviceready handler in js/index.jsJavaScript

  showList();
  console.log(`BookNest: deviceready after ${Math.round(performance.now())} ms`);
});

Output

BookNest: deviceready after 2977 ms

That is three seconds on an emulator sharing a busy machine, including the fetch() and the first render; a phone is much faster, but the placeholder text is what users see meanwhile. Cordova fires other lifecycle events on document the same way: pause and resume when the app leaves and returns to the foreground (save the cart in pause), and on Android backbutton, which replaces the default of closing the activity.

MENU