PhoneGap “Failed to load resource: the server responded with a status of 404 (Not Found)”

Question

I have a web application that I recently tried converting into PhoneGap, but for some reason, when running it on my android, it doesn\'t have access to the internet. When de

Answer 1

Using the Desktop App and PhoneGap Build I was having the same problem.

The issue was that index.html and config.xml were not in the root when first created in Desktop App. This is required according to http://docs.build.phonegap.com/en_US/introduction_getting_started.md.html.

Because they were in different folders, no configuration and no whitelist was loaded into the app resulting in a bunch of 404's.

To fix, I just moved config.xml into the same root directory as index.html and rebuilt on PhoneGap Build.

Answer 2

It could be you do not have the version set for your phonegap compiler. Here is what you need to know.

From Top Mistakes by Developers new to Cordova/Phonegap you have hit:

• #6 Not setting the "phonegap version" for your compiler
• #7 Not setting "version" for you plugins
• #10 Not adding the new "white-list" and "white-list plugin" parameters in config.xml.

From the Phonegap Build Forum, Petra Adds:

I would add: without announcement, PGB changed the default PGB-version from 3.7.0 to cli-5.2.0. This causes all those who have not set 'phonegap-version' in config.xml to be confronted with the sudden need of splashscreen and whitelist plugins and additional whitelisting specifications in config and html.

Also, several plugins seem not to build correctly with cli-5.2.0, causing log file error messages about "Class ***.java".

For #6 & #7

With the CLI version, if you do not assign a version for your platform OR in ''Phonegap Build'' if you do not set the phonegap-version in config.xml, YOU WILL GET THE LATEST VERSION. If you are lucky, your program just works as expected. If you are not lucky, you'll get a set of cascading error.

Luckily for all of us, Holly Schinsky has written a nice blog post to explain it all:

Cordova/PhoneGap Version Confusion
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

For #10

This relatively * NEW * requirement means ? to access ANY website or resources on the web, you MUST use the whitelist and the whitelist plugin. This requirement goes into affect if you are using cordova-android@4.0.0 or better; including cli-5.1.1. If however, your version is before 4.0.0, let use say 3.5.0 or 3.7.0, then you will not have to add the white-list requirement.

To be clear, the "whitelist" has been around for a bit, but the plugin and requirement is very new. As you would expect, when the "whitelist" was added, the defacto open-access feature was deprecated. Or said another way, the defacto open-access feature was planned and scheduled to be eliminated. This change marks a step in removal of the open-access feature.

In addition, the Content Security Policy (CSP) has caught numerous developers - because it was soooo poorly publicized. This CSP needs to go in every single HTML page you used, just like you have to wait for 'deviceready'. The documentation is buried in the bottom of many of the latest documentation pages.

Related Links

Phonegap Build Forum: Notes for upgrading to cli-5.1.1 on PGB and now required Whitelist

• Cordova Whitelist Guide
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide

Answer 3

For those having this problem while using Phonegap 6.3.1, you should whitelist the urls properly and use the cordova-plugin-inappbrowser plugin.

Read on for how to do this.

---

First, ensure you have whitelisted the urls you want to open. You do this by adding them to the hrefs of <access> tags, <allow-intent> tags and allow-navigation tags in your config.xml file at the root of the project. You need all three tags. Something like the following:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
        xmlns="http://www.w3.org/ns/widgets"
        xmlns:gap="http://phonegap.com/ns/1.0">

    ...

    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

    ...

</widget>

(Note: the "*" in the above hrefs allows the opening of any url/path. In production, you probably want to restrict to certain urls/paths)

Next, in your index.html file, add the following javascript:

<script type="text/javascript">
    document.addEventListener('deviceready', function() {
        var url = 'https://www.google.com' // change to whatever you want
        cordova.InAppBrowser.open(url, '_self', 'location=no');
    }, false)
</script>

This script uses the cordova-plugin-inappbrowser plugin, which, if you generated your application using the standard Phonegap template, should already be included in your config.xml file.

The script waits for the device to be ready, then uses the cordova-plugin-inappbrowser plugin to open the given url. The '_self' parameter means it opens the page in the Phonegap webview and the 'location=no' means that there will be no address bar. For other parameter options see the documentation for the cordova-plugin-inappbrowser plugin (link above).

Finally, to test the application in the appropriate emulators (assuming you have the Phonegap CLI installed), run the following command(s):

phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace