Hybrid online and offline app developed with PhoneGap technology

Currently, I am working on developing a Sencha-touch app that will be packaged with Phonegap. To simplify the development process, I am utilizing Phonegap as a shell to load my online website. This setup has been successful so far, eliminating the need to constantly build and distribute the app whenever changes are made. Instead, I can simply update the content on my online website.

However, I have now encountered an issue where I need to incorporate some PhoneGap events like 'resume' and 'deviceready'. To enable these events, I must include the cordova.js file in the index.html.

The challenge I face is that the index.html resides on my server rather than in the Phonegap www folder. When attempting to include cordova.js in the index.html using:

<script type="text/javascript" src="cordova.js"></script>

The application searches for cordova.js on my webserver and fails to locate the file. Although I could place the cordova.js file on my server, it varies for each platform, making it difficult to determine which platform-specific cordova file needs to be loaded.

Is there a method to include offline files (from the Phonegap www folder) in my externally loaded index.html document? Alternatively, do you have any other suggestions?

Thank you, Stefan

javascriptcordova

Answer №1

To begin, place the index.html file in the assets\www directory as the starting point of your application.
Within the index.html file located in the assets\www directory, insert the following code within the head tag. This code will redirect to your website URL.

<script>
    document.addEventListener("deviceready", onDeviceReady, false); 
    function onDeviceReady() {
        // It is now safe to utilize the Cordova API
     window.location="http://your.website/index.html"; }
</script>

Ensure that CORS is enabled. Follow these steps to enable CORS on the client side.
Specify in the config.xml properties that Cordova can safely load your website (you may omit the subdomains part if not needed)

<access origin="http://your.website" subdomains="true"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of batch file conversion and how to effectively utilize it

I am facing an issue with a small batch script that I have been working on. The purpose of this batch script is to execute a Javascript file that converts an XML file to a csv file, followed by running a Python script to analyze the created csv file and ge ...

javascriptpythonwindowsbatch-file

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

I've been working on a UI layout that includes checkboxes on the left, a data table on the right, and a drop zone box. The aim is to keep the table data updated whenever a new file is dropped, and also filter the data based on checkbox selection. I ma ...

javascriptreactjstypescriptredux

Tracking the number of div elements using the variable i

In my coding project, I have implemented a functionality where each time I create a new div element, the variable 'i' representing the number of divs increases. However, I also need it to decrease dynamically when I delete a div without needing t ...

javascriptjqueryhtmlajax

Receive real-time updates on incoming messages in your inbox

I'm seeking advice on implementing live update messages in my code. Here's what I have so far: <script> function fetch_messages(){ var user_id = "1" // example id $.ajax({ url: "do_fetch.php", t ...

phpjavascriptjqueryajax

The request for data:image/png;base64,{{image}} could not be processed due to an invalid URL

I am facing an issue with converting image data that I receive from the server using Angular.js for use in ionic-framework. Here is the code snippet I have been working with: $http.post(link, { token: token, reservationCode: reservatio ...

javascriptangularjshtmlionic-framework

performing a query on two tables with sequelize

There must be a more efficient way to accomplish this task with fewer lines of code. I am not very experienced with databases and I am new to sequelize and node. The user id is passed as a parameter and I need to check if there is a corresponding user in ...

javascriptnode.jssequelize.js

Having trouble getting Tailwindcss to work with Next.js - what could be causing the configuration issue?

Why is tailwind not displaying correctly in my next.js project? I'm concerned that there might be a problem with my settings. In the styles folder, I have a file called tailwind.css @tailwind base; /* Write your own custom base styles here */ /* S ...

javascriptreactjsnext.jstailwind-csscss-purge

Calculating Vertex Normals in Three.js

Upon running geometry.computeVertexNormals() in a THREE.BoxGeometry, the resulting vectors seem to be incorrect after calculating the vertex normals. Is this an error or expected behavior? For reference, consider this example: geometry = new THREE.BoxGeo ...

javascriptthree.jsnormalsvertices

Enhance the worth of an item stored in mongodb

When sending a request to a MongoDB database, I often encounter scenarios where I need to manipulate objects. For instance, consider this sample object: { id: "1", requestType: { "api1": { count: 12, firstTime: 12 }, "api2": { ...

javascriptnode.jsmongodbmongoose

Assistance in tackling AJAX and HTML issues

My HTML code is structured in a way that includes a menu with various options. In JavaScript, I iterate through each item and assign a click event listener to them. However, I am facing an issue with determining what data needs to be fetched via AJAX whe ...

javascripthtmlajax

Creating interactive links with SVG map shapesWould you like to learn how to make

I'm currently working on a project that involves creating an interactive map of the United States. The idea is that when a user clicks on a state, they will be taken to a static page for that particular state (for example, Alaska). I need help figurin ...

javascripthtmlcsssvginteractive

Enable automatic dropdown menu activation on mobile browsers specifically tailored for Android devices

Is there a way to automatically trigger the opening of a combobox on Android device browsers? Here is the code I have: <!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ...

javascriptjqueryhtmljquery-mobilemobile-website

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

javascriptphpandroidcssipad

Raycaster fails to detect intersection with plane

I am currently working on detecting collisions with terrain by adjusting the heights of a plane's vertices. Unfortunately, my Raycaster is only accurately detecting collisions about 10% of the time. To see an example of one of these failed detections ...

javascriptthree.js

Choosing a default selection in a nested v-for loop for a select box

Currently, I have a list of items that users can add new items to. Each item is required to have a select box, and the selected value from the select box should be assigned as the item's value. In an attempt to bind the select box to the item using t ...

javascriptselectvue.jsvuejs2

Using the $.post method for passing array get variables

Currently, I am attempting to send an array via GET method, which is typically done in the browser using a syntax like: val[]=whatever&val[]=secondwhater.... However, I am unsure of the equivalent syntax for jQuery as I encountered errors when tryin ...

javascriptajaxjquery

What sets apart `ng-if` from `data-ng-if`?

Can you explain the distinction between ng-if and data-ng-if? Although they appear to function similarly, I'm struggling to discern the specific difference as there isn't much information out there on data-ng-if. ...

javascriptangularjs

Google Analytics Experiments implemented on the server-side

Curious about the necessity of including the JavaScript cxApi when conducting experiments server-side. Is it possible to send the selected experiment and variations using PHP, or perhaps by injecting a JavaScript snippet internally (without relying on exte ...

javascriptphpgoogle-analyticsuniversal-analyticsgoogle-experiments

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

phpjavascriptjqueryajaxpost

Testing Events in Redux using Mocha

I have been developing a React component that consists of a field and a Submit button. The event 'onMapPointAdded' is triggered when users enter text and click the Submit button. I am looking for guidance on how to test this functionality. Any ...

javascriptunit-testingreactjsmocha.jsredux