We have a web application which allows users to view SVGs. These SVGs usually contain images which are loaded using a relative url. As we want this to be an iPad 'web app' we also want it to be added to the iPad user's homescreen and for it to be cached by the HTML 5 application cache so the user can view these SVGs and associated images offline.
When our application is loaded from the iPad home page icon, the application cache manifest is read correctly and all of the referenced resources are cached. The issue occurs when the user starts to use the application offline. During the use of the application, SVGs are added and removed from the page DOM. During this, some of the images in the SVG fail to be loaded from the application cache, even though they are definitely present and cached. Instead, a request for the image is made to the server, which obviously fails because the user is no longer online.
Interestingly enough, this issue doesn't seem to occur when navigating to a page in safari on the iPad. It seems to be specific to the full page web app view, although I can't guarantee it.
I can reproduce this quite easily using this HTML page:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function ()
{
$("#remove").click(function ()
{
$("embed").remove();
});
$("#add").click(function ()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function ()
{
$("embed").show();
});
$("#hide").click(function ()
{
$("embed").hide();
});
$("#reload").click(function ()
{
location.reload(true);
});
})
</script>
</body>
</html>
This SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
This image which is referenced by the SVG:
And this manifest file:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
And by following these steps:
Open safari and navigate to the location of the reproduction html file (we host it on a Windows 2008 / IIS server)
Add the page to the home screen using the 'Add to Home Screen' button.
Close safari and clean out the safari cache
Load the page from the newly added bookmark
Wait until the page is completely cached. Usually about 5-10 secs, but you could attach to some application cache events to log out progress is desired.
Turn off wifi (or what ever means of connection you use)
Load the page from the newly added bookmark
Notice that the page looks correctly cached. Use the add and remove buttons. You should notice fairly quickly that when you add using the 'add' button on the page. The image resource in the SVG isn't always loaded from the application cache, even though it's clearly cached.
When the issue occurs, you should see something like the screen shot below
I've already checked some obvious things:
Application cache manifest has the correct mime type
Manifest is downloaded
Resources referenced in the manifest are cached correctly
My questions are:
Does anyone know why this happens?
Are there any workarounds to this issue?
I've logged this as a bug with apple, so I'll update this question with any feedback I may get from them!
Thanks!
Andy.
Just a small "head's up!" if you're pondering this issue, as I was until an hour ago...:
The manifest file is case-sensitive.
I have a website designed for use on both the desktop, tablets and smartphones. On Android (4.0.3) I noticed that after enabling the HTML 5 App Cache, my SVG icons started to fail, just as in your case above. They appear as broken links, when the user refreshes the page (and the icons are attempted fetched from the cache).
I had written a letter in the folder name to my SVG icons in the wrong case, and fixing this immediately fixed the issue.
Related
When I click the AR quick look icon on my website it doesn’t show the 3d model and I get the message “object could not be opened”. The USDZ is currently hosted in a google bucket. Could the problem be with the way im hosting the USDZ? If so is there a recommend place for me to host USDZ files?
I'm posting this answer here since this question is the first Google result for the problem I had:
When referencing the usdz file exactly like Apple's documentation proposes, the AR button is rendered on top of the teaser image. When clicking the linked image, Safari opens the Quick Look screen, but the message "Object could not be opened." pops up. However, when I access the usdz file directly by its URL, the AR model does get rendered properly.
The problem was that the complete site was protected by HTTP Basic Auth configured with an .htaccess file. Apparently, Safari will not use the existing session to access the usdz file and thus the file cannot be loaded.
In my case, it helped to remove the HTTP Basic Auth protection from the site. As soon as the site was publicly accessible, the AR model could be loaded without any problems.
Hosting the USDZ file in a Google Storage bucket should work just fine, as long as the permissions on the bucket are set correctly so you can access the file. Safari will display the "Object could not be opened" message if there is any reason for not being able to open the USDZ file, and I haven't found a way to easily get more details than that.
Have you tried accessing the USDZ file url directly from Safari? It should show as zip file in the browser if the link, permissions, etc. is all correct.
Also, make sure that there isn't an issue with the USDZ file itself by downloading the USDZ file using the URL on a Mac and making sure that the file displays as expected in Quick Look in Finder.
If you can share some more details of what your code looks like and what you have tried it would be helpful. The minimal code that I used for testing is below and it works fine in Google Storage.
<html>
<body>
<a href="example.usdz" rel="ar">
<img src="example.png"/>
</a>
</body>
</html>
Embed a link to USDZ Files for direct AR-scenes usage.
Here's a code for multiple usdz files:
<html>
<head>
<meta charset="utf-8">
<title>Augmented Reality</title>
</head>
<body>
<div>
<a href="yourDirectory/ar_pixar_file_01.usdz" rel="ar">
<img src="ar_image_01.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_02.usdz" rel="ar">
<img src="ar_image_02.png" alt="AR Image" width="360" height="240">
</a>
<a href="yourDirectory/ar_pixar_file_03.usdz" rel="ar">
<img src="ar_image_03.png" alt="AR Image" width="360" height="240">
</a>
</div>
</body>
</html>
The most important part of this code snippet is rel="ar" attribute, indicating that the link attached to the image is referring to content usable with the iOS AR-Viewer.
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.
http://costruireunsito.blogspot.com/p/homepage.html
I tried absolutely everything unders the sun to make this work and it's not. The favicon display correctly in the favorite folder where I bookmarked the site, cleared the cache, reopened the browser and loaded the site again, but no luck:-(
It works in all other browser, but ie10. It shows a microscopic image of the icon. I used this site to make the icon: converterhttp://convertico.com/.
Has anybody any idea why it is still displaying incorrectly in the address bar of ie10? A real nightmare.
#user2065813 You can try to use a version to clear the cache: <link rel="icon" href="/favicon.ico?v=1" type="image/x-icon" /> Or if still doesn't work, remove the link from the head(if you have the favicon.ico on the root of your site, it will load it automatically).
My senior project is a web-based storytelling app to be viewed on iPad. The elements need to be touched with.
I was wondering if there was some sort of packaging service that will convert my pages into an independent app - I want to escape some of the features of Safari. Such as the address bar, tab bar, etc. I do not want people to be able to leave my project in the gallery.
Any ideas?
if you add this to your header:
<meta name="apple-mobile-web-app-capable" content="yes" />
you can then add to homepage and it'll remove the browser elements...but you will have to make the various page calls with ajax, or setting window.location...you can't just have traditional links (it'll reopen safari)
----------------------------edit:-------------------------------
Here's what I mean about window.location.
used to be linktext
now
<span style="text-decorate:underline;color:#00F;" onclick="viewPage('http://url');">linktext</span>
<script type="text/javascript">
function viewPage(p){
window.location=p;
}
</script>
i have this line in my asp.net-mvc page.
<link rel="icon" type="image/x-icon" href="/content/images/icons/favicon.ico" />
the favicon shows up fine in Firefox but it doesn't show up in IE8 at all.
any suggestions on why this doesn't work in IE8 ?
also, under RegisterRoutes, i have this:
routes.IgnoreRoute("favicon.ico");
i have tried everything on this page and it still doesn't seem to work for IE8
The Wikipedia article about favicon has a pretty good overview on how you specify the favicon and which file formats are supported.
The agreed standards is a bit in conflict with the de-facto standards. For example, the non-standard rel value shortcut icon has wider support than the standard value icon. You might want both a standard and a non-standard link tag to cover more ground.
Most browsers will pick up the favicon if you simply put it in the root folder, so that would be the best place to put it even if you also have a link tag that points to it.
Even if you do everything right, there is still no guarantee that the favicon will show up in any specific browser. Sometimes it simply doesn't work, for some unknown reason.
This seems to be an ASPX pages problem. I have never been able to show a favicon in any page for IE (all others yes Chrome, FF and safari) the only sites that I've seen that are the exeption to that rule are bing.com, msdn.com and others that belong to MS and run on asp.net. There is something that they are not telling us!
Even world-known sites can't show in IE eg: manu.com (most browsed sports team in the world) aspx site and fails to display the favicon on IE. manu.com/favicon.ico does show the icon.
Use "shortcut icon" instead
<link rel="shortcut icon" href="http://mydomain.com/content/images/icons/favicon.ico" />
This wikipedia page lists the compatibility
I would add that ideally for best browser compatibility the icon is best located in the root directory named favicon.ico if you are able to do this as most browsers will look there by default even without the link tag.
Is this locally?
Apparently: IE8 will never display the icon if the file is on your hard disk. It has to be on the internet. Other browers such as firefox will however show the icon even if they are on your hard disk.
EDIT
As this is happening locally and on the web-server - I would suggest saving down the stackoverflow icon to the same place as your icon and change the icon link accordingly. If it then works the problem is possibly with the file type of your icon file.
For IE, the Favicon must be in the root.
e.g
<link rel="icon" type="image/x-icon" href='<%: Url.Content("~/favicon.ico") %>' />