I created Phonegap application that holds web pages in file system. When I open any of these web pages from filesystem, only chosen page is loaded, but related files (images, css etc.) not.
For example there is webpage in filesystem under path:
cdvfile://localhost/temporary/1/
In this directory there are files like: index.html, style.css, img/background.png etc.
When I open file index.html only this file is opened, but page has no styles and no images. These related files have relative path in index.html.
This situation is on iOS platform only. On Android platform and on google chrome all works. Why is that and can I fix it?
EDIT:
I just figured out that links and js loaded from file work. For example:
link
opens right page. But css like:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
are broken.
EDIT:
Unfortunately, this is an open bug in cordova project: https://issues.apache.org/jira/browse/CB-6532
See https://stackoverflow.com/a/22801512/276648
I ended up using a relative path (ie something like ../../Documents/MyApp/temporary/1/) instead of the full path (ie cdvfile://localhost/temporary/1/) to fix the CSS issues in iOS.
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
Related
I'm using pwa in my angular application, when ever I serve my application using ng serve refreshing the page cause manifest.webmanifest not found. Is there any workaround to prevent this. Thank you.
Please add the below code in your index.html and also check the manifest file in your project. You can changes the extension of your manifest file to .json. It worked for me
<link rel="manifest" href="manifest.json">
Also, please check the MIME type of your response(should be application/manifest+json or application/json) based on file extension
Since most of the example available in Internet is working based on Internet.
I would like to download and use. I don't want to use either CDN or openlayer.org in my code.
Is it possible to use openlayers without a CDN?
Yes. Like any library, you can download locally. This page has some download links to get the CSS and JS files: https://openlayers.org/download/
You download and unzip those into a folder that is accessible from your web server. Usually this is a scripts subfolder
Then you simply reference them as explained here:
https://www.w3schools.com/css/css_howto.asp
https://www.w3schools.com/tags/att_script_src.asp
(note these are very basic W3C references. You should really know this)
So if you downloaded those .js and .css files into a scripts subdirectory you do this:
<script src="scripts/theopenlayersscriptfile.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/theopenlayerscssfile.css">
Edit:
After some experimenting and investigation, you mention that it is trying to access https://c.tile.openstreetmap.org/4/6/6.png
I googled and found this link
https://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example
Which says
With this example you can browse your tiles stored localy without any webserver. I use this to check my tiles I downloaded to use in Osmtracker. But you can also browse Tiles rendered by any other techniques.
The instructions at this link appear to explain exactly what you want to do - it has references to all of the files you are trying to use.
To easily update my app, I copy the content of the www folder to the phone and then do a window.location = workingDirectory.toURL() + "/index.html".
EDIT - note that this works until Phonegap 3.4, but not on 3.5 (nothing seems to be happening when I try to change the location). If instead of toURL I use toNativeURL, then it works also on 3.5. Using toNativeURL also fixes the current issue on iOS.
Copying all the files and opening the index works fine on both iOS and Android. The problem on iOS though is that there is absolutely no styling to the page, as if the links to the CSS files weren't working. Everything is working fine on Android.
My links are relative (eg <link href="css/reseter.css" rel="stylesheet">). Links to other pages or to scripts do work.
Here is the simplified main page I open:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<div class="red">I should be red but I'm not!</div>
This correctly takes me to the other page.
</body>
</html>
style.css
.red { color: red; }
main.js
alert("HELLO is correctly displayed");
I correctly get the alert (its title is cdvfile://localhost/) and I can also correctly go to page2.html. The only problem is with the styles.
If I open the page in Safari pointing to my computer, the style is correctly displayed.
I tried a few things, to no avail:
Add <base href="cdvfile://localhost/persistent/MyApp/"> in the <head>
Update all my href and src to have the full cdvfile path (eg use <link href="cdvfile://localhost/persistent/MyApp/css/reseter.css" rel="stylesheet">)
I finally got it working in PhoneGap 2.9 by using fileSystem.root.fullPath. On PhoneGap 3.3 it only return /. Is this a bug on PhoneGap 3.3 that when using cdvfile, everything seems to work except the CSS files?
I decided to temporally use a relative path to my app for iOS on PhoneGap 3.3: ../../Documents/MyApp/index.html. I don't know if it's safe to use or not.
EDIT In Phonegap 3.5 (I haven't tested in 3.3), using work window.location = workingDirectory.toNativeURL() + "/index.html"; (ie using toNativeURL instead of toURL) works.
Check the following link (the plugin was changed):
http://cordova.apache.org/news/2014/02/10/plugins-release.html
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
I created a new Phonegap 2.5 project from scratch, and I've been trying to load an external URL in it, but I keep getting input boxes popping up on startup before loading the actual URL. I first get a pop-up with the URL of the website, then in the input box it says "DeviceInfo","Device652321624". If I click Cancel, it pops up 2 more times before loading the website. On the website itself, it loads some relative URLs, but others cause the entire page to refresh and the input boxes to pop up again.
I set the URL by setting <content src="http://phonegap.example.com" />, which is just a regular website with Javascript. I even tried commenting out all Phonegap specific code (no more ondeviceready calls), but it still causes the problem. http://www.google.com loads for me, so I'm not sure what else to check. And it works with the Android version that I've developed.
If it helps, I've also seen this message in the XCode log: Resetting plugins due to page load.
I've had the exact same problem today.
I fixed it by checking the include of the cordova.js file (this js is generated when you create the project using the create command.
( called cordova.js in the renamed cordova project version. probably phonegap.js in phonegap ?)
anyway my include was :
<script type="text/javascript" src="js/cordova.js"></script>
whereas je js file was in the project root :
I changed it to
<script type="text/javascript" src="cordova.js"></script>
and every things is fine now.
also, the 'create' command for Android generate a different js file. make sur that the new one generated for ios is used.
hope that helps !
Problem is you are using android's cordova.js instead of ios's cordova.js.
Just make sure you are using the proper one.
I'm working on my first PhoneGap app with JQuery Mobile and I've having a problem getting the included icons to show.
When I reference a local instance of the .css file, like so:
link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
I don't get any icons. Just dark circles. I can see that the css is loading, because if I throw in a bogus path the results don't look like JQuery Mobile at all.
But when I reference a CDN, like so:
link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
I get nice buttons, no problems. I'm using Firefox to view output, but builds all the way onto an Android device show the same symptoms.
I'd punt and use the CDN, but I'm under the impression that if I want the app to run disconnected, then I should just include the .CSS file.
I've double checked my local CSS and downloaded it a second time, but no change. Anyone seen anything similar?
Make sure you have the jQuery Mobile images directory in the same directory as jquery.mobile-1.0.1.min.css.
I've just started with PhoneGap and had the same issue with JQuery Mobile.
Once I added the images under the www folder, I set the Build Action for each image to "Content." By default, mine were set to "Resource."
After this, the images appeared in my Windows Phone Emulator.
Hope this helps.
Chuck