I'm trying to build a "native web app" using HTML + JS on iOS. As you may know you can add such an application to the homescreen and it will more or less look just like a normal native app.
However if I quit such an app and reopen it again it reloads the whole page again. This also happens when switching to such an application from another over the multitasking bar.
Is this expected behaviour or is there a way to stop the device from doing this?
As an example you can add the jqTouch-Demos from here to your homescreen and test it: http://jqtouch.com/preview/demos/main/
You could save the state of your app in localStorage. On restart, check to see if the state is running, then restore the app to where it last was.
Same problem here.
Anyway, if you don't want to reinvent the wheel you can use a tool like PhoneGap (http://www.phonegap.com/). Native web application wrapper with built in access to a number of native features.
Also, you store the application locally (fast, secure) and you can of course charge for it ;)
It's under BSD or MIT license.
Update: as this answer is receiving downvotes, I added this explanation.
Your problem might not be the actual reload, but the fact that Mobile Safari treats your user's cache and cookies differently when your web app is opened through the browser, than when it's 'installed' as a web app to the home screen. Although the solutions proposed here that use localStorage will work, they're a lot of work for client-side logic that can be avoided if your server is already responsible for persisting the session state of your user. The 30-second solution is to simply explicitly set the session cookie to have a longer lifetime.
This allows you to keep the state intact even between device reboots, so even though it doesn't technically stop the web app from being reloaded when launched from the home screen, it is an easy way to restore the state for the user without him/her noticing the reload - which in many cases I suspect is the real problem.
For a more elaborate discussion of this strategy and code examples, take a look at these questions and my answers there:
Maintain PHP Session in web app on iPhone
iPhone "Bookmark to Homescreen" removes cookies and session?
You might want to look at using cache-manifest to prevent it loading the files.
Matt Might has a good writeup here:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Basically you change the html tag to this
<html manifest="cache.manifest">
and write a cache.manifest file on the server which specifies which files should be kept in the device cache and which should be reloaded dynamically from the network.
CACHE MANIFEST
local1.file
local2.file
NETWORK:
network1.php
network2.cgi
You also need to make sure your web server serves up .manifest files with the MIME type text/manifest, or else this won't work. If you're using apache, put the following in your .htaccess file:
AddType text/cache-manifest .manifest
Related
I'm trying to optimize my application in Ruby on Rails, and I realized that the pictures in my application is what most long does it take to load, but I also noticed another problem, which is that google chrome isn't caching the images.
I noted this because in the Google Developers Console you can see that Google Chrome makes a request to load the images that are canceled before the images are truly loaded.
This can be seen here, first I open the Google Developers Console, then refresh the page and within the first requests there you can see the ones of the images, but they are canceled immediately.
After that you can see the requests that actually loaded the images.
I don't understand why is this happening if in the response headers you can see that the Cache Control is set to public with max-age = 31536...
I put the images in my application this way:
<div class="col-xs-3"><%= image_tag "#{#hero.id}/ability_1.png", class: "center-block"%></div>
And the images are organized in folders in app/assets/images
Is there a RoR way to fix this?
Edit: Now testing my app (which is in Heroku) in Windows I noticed that in fact Google Chrome caches the images sometimes, but it happens like the 50% of the times (and when I was in Ubuntu in development it didn't work a single time), while in firefox the first time the images are loaded, but the subsequent times I load the same view I can't even notice the reload, it's beatiful, Why google Chrome is not like that? Is normal that Google Chrome acts so weird?
The most important thing to realize when analyzing browser caching is the "Status Code". In your example, you can see you got a "304", which stands for "Not Modified" Which means the browser "could potentially use it's cache". So you ARE in fact caching. Caching != Not hitting your web server.
The definition according to Mozilla:
This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.
It sends the etag and last-modified to your web server, and your web server then looks at those meta and say "Nope, this file hasn't changed, so feel free to use your cache", and that's it. It actually does not send the file again. You can see that the "Size" is much less then when it's a "200" status code, where the web server IS sending the file, and the timing should me much shorter as well.
In Chrome you can force "non-caching" by checking the "Disable cache" option in the Network tab.
Hope that helps!
It looks like Chrome does handle image caching differently. What type of reload are you doing (following links, pressing enter in the address bar, Ctrl+r)? It looks like if you press enter in the search bar it will respect max-age but if you use Ctrl+r Chrome sets max-age to 0.
expires_in max-age cache control doesn't work
Chrome doesn't cache images/js/css
You can force caching with manifest file. There's plenty of docs on the web about the topic. Here's a starter: http://www.w3schools.com/html/html5_app_cache.asp
the request headers contain max-age=0. Try setting that to a big number!
Clicking a mailto: link will open my default mail client. In a similar manner, I would like to launch an Electron app with my-app:. What is the best way to achieve this and gracefully fallback to a standard http link if the app isn't installed?
Furthermore, I would also like to be able to pass through some extra details my-app:foo/bar. How would this be intercepted inside of Electron when it launches?
I have read some docs on what I think might be relevant stuff: http://electron.atom.io/docs/v0.36.0/api/protocol/ however as a frontend dev there's some gaps in my understanding of how the overarching process works. Any help much appreciated!
Electron has evolved quite a bit since this question was first posted.
You no longer have to dive quite as deep and can skip the Electron protocol API. Instead, use the app.setAsDefaultProtocolClient(protocol[, path, args]) interface and its siblings app.removeAsDefaultProtocolClient(protocol[, path, args]) and app.isDefaultProtocolClient(protocol[, path, args]).
These enable you to register a protocol identifier your-protocol:// and receive arguments:
The whole link, including protocol, will be passed to your application
as a parameter. Electron API docs
I'm not sure if it is possible to do what you want to do. Depending on whether you want to launch your Electron app from an actual browser window or simply from another Electron instance.
I found this other Stack Overflow post link that shows a workaround (though I'm afraid it won't graciously default to anything) and explains how it could be dangerous to launch programs directly from the browser.
If you want to launch your Electron app from another Electron app however you might want to check this out link.
This morning when I opened my heroku app in the browser, I noticed a banner advertisement was placed on the bottom. I added an instance (as to not be a free plan) and restarted my server, and it was still there.
I dug through their knowledgebase and stackoverflow, can't figure out how to remove these. Right now I am removing them with JS, but the goal is to not receive the extra load / advertisements.
Heroku will not inject adds into your site whether it's free or not. As mentioned in comments to your question, you should check whether it's something that's done by the network you're on. Maybe try accessing your site using https (i.e. https://paddlar.herokuapp.com/rivers) - with that, the network should not be able to modify responses.
this is fo debugging purpose, please take into account the following:
the user logs in to his/her account so manually fetching a url will not work - the screenshot must happen together when the user access his admin pages.
would love to receive guidelines specific for ruby on rails and heroku (i guess heroku is not much an issue i just dump the screenshot to s3).
so ideally like i mentioned in #1, when a user access a page, my app also takes a screenshot of the entire page and dumps it in a tmp folder.
can anyone point me how to handle that?
In order to get a screenshot of what the user is currently seeing, you have to have some code on the user's machine that uses the underlying operating system API to take the screenshot. The API calls involved are different for Windows, Mac OS X and Linux.
Ruby on Rails executes on the remote server and generates HTML and JavaScript etc. that is sent to the user's web browser. The HTML is rendered by the browser and the JavaScript executes within the browser's sandbox, where it has no direct access to the operating system API. The important point is that there is no direct interaction between the server-side code and the OS running on the user's computer. If this were possible then it would be a massive security hole.
Therefore it's not possible to do what you want programmatically unless you can first install a client-side program on the user's computer that can talk to your server-side code. It cannot be done using Ruby on Rails alone because it's a server-side web framework.
You can't do this without a user sending a screenshot themselves.
My iPhone app relies on a vendor's XML feed to provide data. But that feed is not locked down. The vendor could change the format of the XML at any time, although so far they've promised not to.
Since I might want to tell my app to use a different URL for its data source, I'd like to set up a single "Command Central" Web page, on my own server, to direct the app to the correct data source.
In other words, each time my app starts, in the background and unseen by the user, it would visit "http://www.myserver.com/iphoneapp_data_sources.xml" to retrieve the URL for retrieving data from my vendor. That way, if my vendor suddenly changes the exact URL or the XML feed that the app needs, I can update that Web page and ensure that all installations of the app are using the correct XML feed.
Does anyone have any advice or examples showing this kind of approach? It seems as if this must be a common problem, but so far I haven't found a well-established design pattern that fits it.
Instead of connecting your iPhone app directly to the vendor's XML feed, you could use a page on your own server as a proxy.
The iPhone app connects with http://www.yourserver.com/proxyxmlfeed.xml, which redirects to the correct vendor URL, http://www.vendorsserver.com/realxmlfeed.xml. This way, if for some reason the real XML feed URL changes, you only have to change the URL the proxyxmlfeed.xml file redirects to, and you're done!