How do I go about allowing my webapp to be installed as an icon on a user's homescreen? Is the data cached locally, so that the webapp can be run when the user is outside of 3G?
I did a quick google, but my search terms were lacking. I noticed that Google Buzz allowed me to install locally, and I'm wondering what the process is for creating web apps, and if they get special treatment (full caching/running offline).
This behaviour is done with a meta tag titled apple-mobile-web-app-capable.
Details (and other meta tags useful for iPhone web apps): https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
<meta name="apple-mobile-web-app-capable" content="yes">
To set a nice icon for your app, you can specify a URL for your icon:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
<link rel="apple-touch-icon" href="/custom_icon.png" />
and a startup screen:
<link rel="apple-touch-startup-image" href="/startup.png" />
Data can be locally cached. You can store data using the various HTML5 JavaScript APIs and cache manifest.
See ceejayoz's answer for the various iPhone-specific stuff (icon, fullscreen mode), but in order to store the entire app locally (and run offline), you'll need to look at what's called a "cache manifest". This file, linked to in the opening html tag on your page, lists every resource the app needs to store locally.
Additionally, in order to store user data, if need be, you'll need to look into the client-side database. I don't know as much about that, so I won't try to explain it. :P
Apple has a decent page here: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256-CH1-SW1
that talks about both the cache manifest and local database storage. This should help explain what you need to do in order to make your application run offline.
Here's another example of what you are trying to do, may be helpful: http://mrgan.tumblr.com/post/257187093/pie-guy
Related
I am trying to store an Adobe Captivate HTML5 file in a bucket and then load the file and play the presentation. I've watched other videos on this and many people have successfully used Google Cloud Storage for this purpose, but they generally use it on a public bucket. My bucket is private and only accessible to a couple of users if it matters.
The file I'm trying to load will only go as far as showing a loading icon. Originally it only showed a blank page, and I was advised to add a tag to the with the "Authenticated URL" of the file and now it shows a loading icon but still won't load correctly.
Has anyone had this issue with html5 files before? Or know if there is anything in particular you need to do differently to view a file like this on a private bucket with a couple users vs allUsers?
Adobe Captivate HTML5 file, is still HTML codes. After you uploaded to the GCS, when you visit GCS bucket, actually you executed getobject, you downloaded the file to your browser, of course, the browser can write HTML file and display in your browser. Just set it to public to allusers, clean the browser cache. the try to use the public url visit again.
I'm working on a web application that will run on a device that uses Midori browser in "app mode". The application runs just fine, but I notice that the favicon (a PNG file) does not display -- just a white box as if the favicon was missing completely.
I can find no documentation about what I should expect here. The application (and the favicon) display just fine when I run it in Chrome.
I did see a few older forum posts:
When in app or private mode, the Midori window uses the page favicon as the window icon. source
the website's favicon is set as the window icon source
Other than that, I've seen the list of bugs that include "favicon" -- but nothing seems to shed any light on this for me. Help?
When Midori is started from the command line with --app http://test01-v0-16-attempt-1.test.realfavicongenerator.net/, it uses a 32x32 PNG icon declared with:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
This page is the test page of RealFaviconGenerator, which means that, when the page contains the package generated by RFG, its 32x32 icon is used (which is a sensible choice for a desktop browser by the way).
So you can:
Generate your favicon with RFG
Create a single 32x32 PNG icon manually and declare it.
If this fails, it might be interesting to check your server logs to see if Midori at least try to load your icon.
Full disclosure: I'm the author of RFG.
I've been developing a pretty complicated HTML5 web app for the past month. Last night my iPhone suddenly decided to cache all JS, CSS, and images and not load any updated copies. This happened on my partner's iPhone too, so I'm going to assume it's affecting all users of our app.
Needless to say, clearing the browser cache, deleting the web app, restarting the phone, & restarting the wireless connection do nothing to fix the problem.
Removing <meta name="apple-mobile-web-app-capable" content="yes"> solves the problem, but creates a new problem since we need the app to run like...an app.
We're not going to go around appending the old trick ?number to the end of all our scripts, stylesheets, and images either. That's ridiculous. Also -- if we were to implement something like this, it would have to be some sort of dynamic JS implementation. Our app is one HTML page that loads most scripts, and additional pages are AJAXed in, additional data is also obtained via AJAX. I guess this could be done, but I'm hoping for a more elegant solution. Ya know, I feel like I shouldn't have to do anything since this all worked without a hitch for an entire month.
Using the cache-control, expires, and pragma <meta> tags doesn't do us any good either, as this is purely an iOS web app problem. Caching works normally in mobile Safari, mobile Chrome, and all desktop browsers. It appears that iOS has a separate cache for apps, including web apps, that the user can not clear.
It seems that many SO users have encountered this problem, but I can't find any satisfactory solutions. Has anyone out there in a similar situation solved this problem? Could I use a manifest file to specify not to cache several files? It seems like manifest files are used to do the opposite.
For what it's worth, and it's not a perfect solution, we had to settle with appending query strings. I've written a shell script to make this and a few other tasks bit more automated, you can look at the source on GitHub. A few details:
It's designed for JS but can easily be edited to handle CSS too.
It takes all files listed in script_order.txt and compiles them with Google's Closure Compiler
Groups them into chunks under 25kb when possible (iPhone won't cache anything over 25kb pre-gzip, although apparently this extends only to browsers and not standalone webapps)
Outputs a PHP file with <script> tags that have a ?v=timestamp appended to the script filenames. If you're working with static HTML and can't include a PHP file, you could rewrite the output to append the script tags to your index.html file.
Another pretty hacky solution would be to save your JS/CSS with a .php file extension, and in those files set the headers to something like this:
<?php
header("content-type: application/javascript");
header('Cache-Control: no-cache');
header('Pragma: no-cache');
?>
window.alert('hello world');
EDIT:
Setting the date to 2, 3 or 4 days in the future, start the app from homescreen and then set the date back to normal also can do the trick.
I've got a repository on github with a .css file in it. Is there any way to have github serve this file in a way that I can consume it in a web page?
In other words, I'd like to be able to reference this source file at github directly, from an HTML file on my local computer or a live domain. Something like:
<link rel="stylesheet"
type="text/css"
href="http://github.com/foouser/barproject/master/xenu-is-my-lover.css"
/>
I've tried including a<link> to the "raw" source file (http://raw.github.com...), but github serves its Content-Type as text/plain, and consequently, Chrome and FF are not adding its content as CSS styles to the page—the file's data is being discarded and a warning is shown in the debugger consoles of the browsers.
Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/
Found something really cool. You get the raw link as: http://raw.github.com/...
Simply fetch the files from rawgit.com (or cdn.rawgit.com) instead of raw.github.com and DONE!
UPDATE:
You can also use raw.githack.com if you want to serves raw files directly from Bitbucket or GitLab
GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.
Check out https://gitcdn.link/ . Seems to work well.
Rawgit.com has shut down.
First Visit RawGit as suggested earlier
Next copy your file path from github into the RawGit box
RawGit will automatically produce two refrences to your web page
The Development and Production refrence
refrence the development link in your webpage if you are still developing
save/upload then reload your webpage
if there was no change it means your browser has saved your former refrence
clear your browser data then reload
Hope that helps?
You have to use RawGit which, is a part of MaxCDN, serve files directly from the GitHub repository with the correct content type header.
Full tutorial, click here
I've made a simple Web Application for the iPhone, it's just 6 pages each with an image on it and I use the Cube transition to switch between them, all static content.
I need this to work on an iPod Touch offline, i.e. visit it once, disconnect from WiFi, and then be able to browse the static site.
I'm trying to do this using the HTML5 manifest feature, but I'm clearly doing it wrong?
My Manifest file:
CACHE MANIFEST
index.html
main.css
main.js
Images/Appointments_Page.png
Images/backgroundStripes.png
Images/button.png
Images/button1.png
Images/button1_clicked.png
Images/button2.png
Images/button2_clicked.png
Images/button3.png
Images/button3_clicked.png
Images/button_clicked.png
Images/CloseIcon.png
Images/CloseIcon_pressed.png
Images/Efficacy_Page.png
Images/EfficacyGraph_Page.png
Images/Graph_Icon.png
Images/GraphIcon.png
Images/GraphIcon_pressed.png
Images/Home_Page.png
Images/Tolerability_Page.png
Images/TolerabilityTable_Page.png
Images/WebClipIcon.png
Parts/ButtonHandler.js
Parts/PushButton.js
Parts/setup.js
Parts/StackLayout.js
Parts/Transitions.css
Parts/Transitions.js
Parts/utilities.js
top of my HTML file
<!DOCTYPE HTML>
<html manifest="cache-manifest">
Hey I figured it out, leaving answer here in case it helps anyone else.
The problem I was having was that our server (IIS6) was refusing to serve my manifest file.
I had to add the MIME type ".manifest" using "text/cache-manifest".
Since then it's been caching fine, all 40+ files ranging from 1kb to 200kb.
Hope this helps.
I also wrote some tips on using the Manifest at: http://wecreategames.com/blog/?p=210
Other things to note: You need to reload the app TWICE to get the manifest's new contents, and you need to change the actual content of the manifest to force reloading the containing pages (I do this by changing a comment #v.03 to #v.04, or something similar).
As a note: Apple suggests:
"The HTML file that declares the manifest file ..... is automatically included in the application cache. You do not need to add it to the manifest file."
(https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW2)
So it would work with leaving "index.html" out of the manifest list.