So here's my problem. I made a website, which by popular demand, people want it to be an app on there phone (because apparently people are to lazy to google it and use precious internet :3 )
So I did some research and came across the android webview, and after a few tutorials I got my website working as an app. However this app still needed internet.
So I tried to just put my website files (Which are inside a folder called version) inside the android res folder
WebView/app/src/main/res/
But when I try to access it with the following code
String url = "/res/version/english.html";
WebView view = (WebView) this.findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl(url);
It comes up with the "Webpage not available" message.
Does anyone know how I can fix this. Thanks
My suggestion would be to look into Cardova or PhoneGap. They provide extremely robust tools to program with HTML, CSS, Javascript, etc and then acts as a native bridge between Java or Objective-C if you're developing for iPhone.
You will still have access to many of the core native API's such as Camera, Accelerometer, etc. My company uses these religiously as we mostly have web developers on staff. I would highly suggest it.
I figured out what I did wrong. First off, I needed to add this at the start of it
"file:///"
Then I needed to make an assets folder, and then put all my files into it. And the last mistake, I need to access the access folder by doing this
"file://android_assest/*"
Related
I have a nuxt.js 3 generated javascript app, which is just some html, JS & other assets. My issue is that passing a file://<path>/index.html as a url to a web_view means that assets are broken since all addresses are origin-relative, e.g. /home/index.html, /_nuxt/entry.123456.css, not path-relative like home/index.html. (i think it would not work for subpages anyway, being path-relative)
How to overcome this?
is there any way to set the web_view to know where to get the static files from? there are no other requests from the web_view other than GETs for static assets & changes of location. I'm thinking something like request interception and rewriting the path or even the response. but that sounds just like a server, so:
I guess I'm gonna need a http server. Can you suggest me some simple up-to-date library that can serve files within an android app? Or can you point me to some API from android native toolbox to open a socket and serve static files via http response? Also, will such a server be accessible for other apps, for the whole android device on localhost? I would like to avert that; the only consumer of the files should be the web_view.
To avoid obvious counter-question - but why? It's that I intend to build a hybrid android app, that does simply open a web_view full-screen. I am aware of limitations of such solution and I'm fine with that. The android part is where I'm not well experienced. If this gets too over-complicated, I'm gonna just change the way how to produce the js app in the first place. but nuxt.js is my best option for now.
I am trying to create an app (to be specific a catholic prayer) from old printed book(No copyrights violation involved ).
Since i am newbie to Android app development, i think the easiest way (for me ) to do this for me as follows
01. create web page with scan images from that book, and use phone gap to generate android version of this webpage.
My problem is this: Once i generated the android version , i was not able to see the image files. instead of that i can see only ? mark.
I want images to store in locally(inside the phone) with the app so once users download this will not required to have an active internet connection to display those images.
I have added the web page preview and screen shot from my android phone
.
Please help me to fix this issue.
Thank you.
First look at the debug.
Don't forget to add
<uses-permission android:name="android.permission.INTERNET" />
Add this to make a new Webview.
WebView webview = new WebView(this);
setContentView(webview);
webview.loadUrl("Your URL");
Otherwise try this tutorial:
http://www.technotalkative.com/android-webviewclient-example/
I am developing android phonegap application. which has around 65 images (~10kb size for each). My application is working as expected on Ripple chrome plugin as well as on Chrome and FF browser. but when I load it on emulator some images are not able to load.
I have attached screenshot for the reference.
I tried using the jQuery preload plugin but no luck.
Can anyone help me please! Thanks
EDIT:
I have tried the same code without any change on iPhone and WindowsPhone7, Images are showing up fine on both the platform.
Try creating an identical copy of the image (../image_copy1.png, for example), and swap that code out in lieu of the image location that isn't working.
Sometimes emulator programs freak out with file paths either due to localized caching of data or actual logistical errors in the emulator program itself. Dreamweaver has similar problems, as do a host of other dev/testing suites - local caching of images is not an uncommon problem. You can circumvent this issue sometimes by uploading a copy of the desired file (but not copying it within the program itself) - causing a fresh, noncached upload of it. This is by no means a "proper" solution, but it's a quick and dirty workaround for a buggy emu/dev program.
If you are loading the images from an external source, you may need to 'whitelist' the source. Did you add the domain name into the Cordova config file? It is under res/xml/config.xml
<access origin="www.example.com" />
I know that it is necessary for cross domain AJAX requests but not sure for images, you could give it a try.
Can't help much.
Emulator acts cranky some times.
I have faced the issue multiple times.
At the best, you can try creating another avd-image... but at least I cannot guaranttee that it will work.
I have what I think is a fairly standard set-up of an existing web-app and would like advice on how best to adapt it for creating native versions via PhoneGap, in a way that we can keep developing the web-app and updating the phonegap generated versions from it with minimal rework.
I am a PhoneGap novice. I have searched around and tried various suggestions from StackOverflow etc with no luck, at least for my set-up.
The app is developed in GWT and consists of:
static resources in a shared folder for all of the app
/static/ with images, fonts, css.
The css define some font-families, referencing font files in /fonts
We refer to these static resources from html files and JavaScript code using absolute
paths.
static resources in a number of sub-folders (by GWT modules FYI)
Such as /LoginGadget, which will have GWT generated html, Javascript and sometimes subfolders with css and css-images.
GWT-RPCs
These are basically servlets where GWT takes care of serialization etc, and are accessed from our client code via XHRs under the covers
PhoneGap Build
I have started looking at creating a packaged app using PhoneGap and run into some problems where I need advice (Android example).
I have created /assets/www and put an index.html file in there and got it going.
I copied a version of our /static/ folder and our /LoginGadget folder under that "root" to see, and started it using
super.loadUrl("file:///android_asset/www/index.html");
which works.
In all our GWT generated html and Javascript files we have references to static resources using both absolute (e.g. "/static/....") and relative paths (e.g. from a LoginGadget Javascript, it might reference "css/some.css").
The relative paths work, as they reside "under" the folder where the html/js that references them lie.
Problem 1
However, references to absolute paths fail, despite PhoneGap starting by saying:
DroidGap: url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www/
I expected a reference to "/static/images/file.png" from say index.html to be appended to the "baseUrl" to give file:///android_asset/www/static/images/file.png and hence work, as that is where the file lies.
I have had to modify index.html to use "static/image/file.png" for it to work.
But I'd have to recompile all our GWT app with a different configuration to modify all references to resources, and references from other files in sub-folders back to "/static/" won't work if modified to be just "static/".
How can I get absolute path references to "map" to /assets/www or similar?
(See below, I've looked at using the "base" tag....)
Problem 2
The GWT RPCs make the XHR request to the server the html/js was served from.
This works great as the app doesn't have the host server name hard-coded, and is in fact deployed on many different appengine appids/domains for testing etc.
Here the html/js files are "served" from file:/// hence I need to specify the server somehow.
I tried specifying with the "base" tag as documented, but then any reference I have in my html/js to a resource that doesn't specify "file://" seems to be made to the server specified in "base"..... hence I am not loading my local resources anymore and I basically have a web-app served from my server.
Want
What I'd like to do, is to be able to take the (pretty large) compiled and tested app from my wab-app's war (/static and all my /GWT-Module folders) untouched and copy them into /assets/www on my PhoneGap app and then add some boiler plate or start-up code and run as is.
Sounds like a big request, but I think if I could properly specify two things:
file path to use as "root" for absolute paths for resource requests that don't specify a http/https protocol (or other protocols.....which I already see are handled in DroidGap.java)
server (protocol, hostname, port) to use for any XHR requests
Then everything would come out in the wash!
I thought this would be a faily "standard" setup and already covered. Maybe it is and I'm just missing something.
Comments? suggestions?
Thanks in advance for any help.
Do you know about mgwt? http://www.m-gwt.com
Its a mobile framework for GWT built by one of the GWT Steering Committee members and it has phonegap integration for GWT apps as well.
There is a lot of docs in the projects and a very friendly user group.
Let me address your problems with a little more detail:
Problem1:
If you are using absolute path you will get that inconsistent behavior with phonegap, since the browser builds those urls locally and a reference to / means the root entry on the phone.
Using absolute URLs is a bad idea most of the times and I would recommend you to change that in your app (as you already did).
Problem2:
To use GWT RPC with phonegap read this blog post that I made to address the issues: http://blog.daniel-kurka.de/2012/04/gwt-rpc-with-phonegap-revisited.html
We solved these problems with two separate actions:
1) I wrote an ant target that as part of our build takes the web-app, and replaces the paths in all internal url references it finds, making them fit what's needed for them to work within the app. It still seems a major bug in phonegap to me. Maybe it's been fixed in newer versions?
2) We subclassed the RPC service class and modified it to have a static member that is the service endpoint. At the start-up of our phonegap app we modify the end-point to point to the desired server and presto.... all our GWT RPCs point to the right place.
I was trying to display a webpage of a url on a plain WebView, and some of the images are not showing. However, everything shows up fine in the browser for the simulator.
Is there a difference between the rendering via WebView vs. the Android 2.3 Browser?
There are several things added to the Android browser. They add things in to handle JavaScript, to handle switching to native functionality for videos, etc. Luckily the Browser is open source so you can get the Android code base and see what they do.
Yes could be a difference. If you are passing the web text-plain to the webview directly it doesn't understand the images which are references depending the local path instead the goblal path reference.
I mean, if you have a <img src="/images/image.png" /> here you are referencing depending on your directory, and the browser try to look up image.png into your root, and if you have <img src="http://www.whatever.com/images/image.png" /> then you are referencing it globaly. So I think this is the main that you could have.