Pregunta

I would like to create add an offline version of my website, so that it can be used by people who are not necessarily connected when using it ( I am thinking of gyms that are located in basements and do not offer a wi-fi connection ).

I did some research, but I couldn't find anything that specifically explains how to do what I need. I am beginning to think it just isn't possible...

If anybody can confirm that this is possible, and can think of a link to a tutorial for the following points, I would be extremely grateful.

  • it should work both on Android and ios without being altered ( both required entries in web.xml I guess, or any solutions )

  • it should create an clickable icon so that it can be launched like a native application ( not a link or button in the browser, such as Opera's speed dial ).

  • possibly a brief example of code. I am just thinking something that I can use as a starting point. An alert message when clicking on a button would be enough...

  • I tend to stay away from any frameworks as much as possible as a personal preference, but I am willing to give one a go if it's the only solution.

Thanks.

¿Fue útil?

Solución

Here are some resources that can get you started:

HTML5 Supports App Caching, and it works at least on iOS and I think more modern android phones as well. http://www.html5rocks.com/en/tutorials/appcache/beginner/

On iOS at least there are special meta-tags you can use in your html to make the page savable to the launch screen.

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

So you can look up how to best use those.

Those things should point you in the right direction, but keep in mind that anything stored for offline use needs to be small and efficient since there is usually a limit to the amount of data that can be stored offline. Also, some browsers require that the user grant permission before any data can be saved, but the request dialog is sometimes intimidating. (e.g. "This web page wants to save data on your computer without your knowledge, do you want to let it do that?")

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top