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>
Related
I have used $.mobile.changepage to do the redirect in my phonegap+jquerymobile projects. However what makes me confused is that I need to put the script of all the pages to the same file index.html. If not, the redirect page can not execute the function in its header.
for example, my index.html seem to be
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
then, my device will redirect to test.html which seem to be
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
However, the script will never execute in test.html. Then I put the script to index.html, what I expect to be is done. Whatever, if I put all the script to the same page, the project will become harder and harder to be preserved. Appreciated for your help.
Intro
This article can also be found HERE as a part of my blog.
How jQuery Mobile handles page changes
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To be more precise, even BODY is not fully loaded. Only first div with an attribute data-role="page" will be loaded, everything else is going to be discarded. Even if you have more pages inside a BODY only first one is going to be loaded. This rule only applies to subsequent pages, if you have more pages in an initial HTML all of them will be loaded.
That's why your button is show successfully but click event is not working. Same click event whose parent HEAD was disregarded during the page transition.
Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Unfortunately you are not going to find this described in their documentation. Ether they think this is a common knowledge or they forgot to describe this like my other topics. (jQuery Mobile documentation is big but lacking many things).
Solution 1
In your second page, and every other page, move your SCRIPT tag into the BODY content, like this:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
This is a quick solution but still an ugly one.
Working example can be found in my other answer here: Pageshow not triggered after changepage
Another working example: Page loaded differently with jQuery-mobile transition
Solution 2
Move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
In the end I will describe why this is a part of a good solution.
Solution 3
Use rel="external" in your buttons and every elements you are using to change page. Because of it ajax is not going to be used for page loading and your jQuery Mobile app will behave like a normal web application. Unfortunately this is not a good solution in your case. Phonegap should never work as a normal web app.
Next
Official documentation, look for a chapter: Linking without Ajax
Realistic solution
Realistic solution would use Solution 2. But unlike solution 2, I would use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
Final words
This problem can be easily fixed with a good page architecture. If anyone is interested I have wrote an ARTICLE about good jQuery Mobile page architecture. In a nut shell I am discussing that knowledge of how jQuery Mobile works is the most important thing you need to know before you can successfully create you first app.
Unlike normal ordinary HTML pages, jQuery Mobile uses ajax technology when navigating between pages. So make sure to import all your JS files and libraries in all your html pages.
If you notice closely you will see that JS files from previous page is taken into consideration when loading the second page. But if you force rrefresh the current page then the js files of the current page will be effective.
So as I said earlier make sure to import the js files in all the html files.
Also no need to call deviceready, use following syntax to call your page specific js functions
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
Jquery Mobile uses ajax to load a "page". A "page" here is a div with data-role=page. If you load a physical page index.html, you can navigate using changePage to any "page" div inside that page.
However, if you want to load a "page" from other physical page, jQM will only load the first "page" div from that page. What actually happen is you do not change page, jQM just load that particular "page" div using ajax and inject it to your current page.
You have two possible architecture where you put all your "pages" in a html page and navigate from there. Or you can have multiple page architecture. You can always mix this.
To physically change page, you need to add rel=external to your link.
I am experiencing problem with scc style do not apply when I adding my web app to a home screen of iphone and lunching app with shortcut(icon). So here is two examples. First open with safari.
here is the screenshot of same web opened with icon in iphone menu
So for some reason the css style do not apply for Melanie Wright on the second image and also icons for input fields still white not orange, if I open this web app with shortcut(icon).
here is my meta tags that I used to mimic the look like it is app
<!-- Iphone Icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Thank you for you time !
Browsers tend to cache css and script resources for a period of time.
Try clearing out the cache on the device or even manually force it to load a new file. Its a good way to know that you are not using a cache version of the css file.
Just add ?v=1 to the end of your file.
script.js?v=1
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.
I'm building a mobile oriented web site.
New phones most of all use new browsers which support html5 and css3. Very often they have touch screens. Probably owner of iPhone4 or Galaxy does not bother about page size so much - so it IMHO it is a good idea to use jQueryMobile for such user.
On the other hand there are smartphones which are also have touch screens but screen resolution is too small (i.e. 240x320) to use jQueryMobile.
There are also a number of phones which do not have touch screens and also there are number of users who switch off Javascript to do not load js files and save their money.
I tried to use Modernizr to determine if mobile phone supports touchscreen but unfortunately Modernizr.touch only shows if a browser support it.
It is known to use CSS Media Query Modernizr.mq() to determine the screen size and load different css files base on it but this solution doesn't solve problem with switched off javascript and old browsers like IE8.
There is also a good article http://www.alistapart.com/articles/return-of-the-mobile-stylesheet but unfortunately it has basically ideas not implementation.
Question: I'd like to load jQuery mobile for smartphones with min-width 480px. Otherwise load default css. It is possible to implement this for as many as possible mobile browsers?
Answer (result code):
<html class="defcss">
<head>
<link href="/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content( "~/Scripts/yepnope.js" )"></script>
<script type="text/javascript">
//<![CDATA[
if (window.screen.availWidth > 450) {
document.documentElement.className = document.documentElement.className.replace(/\bdefcss\b/, '');
yepnope(['//code.jquery.com/jquery-1.6.4.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css']);
}
//]]>
</script>
I would look into something server side and generate the files needed, Take a look at:
http://code.google.com/p/mobileesp/
http://blog.mobileesp.com/
http://wurfl.sourceforge.net/
http://www.handsetdetection.com/
There are some client side scripts but I haven't used any of them yet:
https://github.com/sebarmeli/JS-Redirection-Mobile-Site
https://github.com/miohtama/detectmobile.js
Related:
Mobile detection
Also what about Tablets?
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") %>' />