I've got a single page html5 application with a manifest file and many resources to be cached. When I open the page from the browser (both android chrome and ios safari) it starts downloading the file listed in the manifest. After that, I press "add to home screen" and the app-like icon is created but on iOS if I open the app from the icon in the home screen it downloads again every file listed in the manifest, this doesn not happen on android.
Is it supposed to behave like this or I am missing something?
<!DOCTYPE html>
<html manifest="manifest.appcache" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>app</title>
<meta name="viewport" content="width=768, initial-scale=1.0, user-scalable = no">
<link rel="shortcut icon" href="/icona.png">
<link rel="apple-touch-icon-precomposed" href="/icona.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
...
manifest.appcache
<?php
header('Content-Type: text/cache-manifest');
?>
CACHE MANIFEST
CACHE:
#lastupdate <2014 Jul 16 Wednesday 18:37:18>
/myresource1.png
/myresource2.png
NETWORK:
/myresource3.png
/myresource4.png
FALLBACK:
UPDATE
Before pressing add to home screen I wait the "cached" event, I know it has been fired because it close my progress bar
function cachedEvent(e) {
$('#progressBar').css('display','none');
}
applicationCache.addEventListener('cached', cachedEvent);
Related
It is possible to display an react/angular web application on WebView component ?
I build angular(angular cli) and react application in prod mode.
Next, prepared files I put inside ./assets folder.
After changes inside webpack.config.js and run
tns run android --bundle than nothing is shown beside of static texts.
home.component.tns.html
<GridLayout>
<WebView src="~/assets/seatmap/index.html"></WebView>
</GridLayout>
home.component.tns.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.x.css"></head>
<body>
<img src="favicon.ico"> // not displayed
<img src="./favicon.ico"> // displayed
<app-root></app-root> // nothing is displayed
<b>This text is displayed</b>
<script type="text/javascript" src="runtime.x.js"></script>
<script type="text/javascript" src="polyfills.x.js"></script>
<script type="text/javascript" src="main.x.js"></script>
</body>
</html>
Javascript files are loaded. There is no problem with path.
When I change src to any external web site (src="http://facebook.com") everything is ok.
Duplicate of NativeScript WebView loading local resources in src document
It's known issue with iOS, please refer my answer there which includes possible workarounds.
What code do I need to add to my website in order to get a rich link when someone sends a link of my website via iMessage and not just the standard icon, title, hyperlink?
The code you need is the following:
<html>
<head>
<title> </title>
<meta name="og:title" content="Insert Titel for iMessage"/>
//Will be used if internet is to slow to load image or video
<link rel="icon" href="link to your icon" type="image/png" />
<meta name="og:image" content="link to your image"/>
<meta name="og:video" content="link to your video"/>
</head>
...
</html>
I am using Bootstrap 3 for my website and I can't figure why it's not responsive on iOS (shows like the desktop view). I have already do a quick search about this problem and yes I use the template code provided by Bootstrap but it still doesn't seem to work. Here is the beginning of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laurent Doucet — Graphic designer</title>
<meta name="description" content="—">
<link rel="icon" href="img/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
Here is my website: http://www.laurentdoucet.be
Thanks a lot for the help.
Your use of frames is preventing your viewport tag from working.
You need to include a viewport meta tag in the outer page also:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>www.laurentdoucet.be</title>
</head>
<frameset>
<frame src="http://www.bepxlagency.be/laurentdoucet/" name="redir">
<noframes>
<p>Original location:
http://www.bepxlagency.be/laurentdoucet/
</p>
</noframes>
</frameset>
</html>
I've found a strange issue when using JQM + IE10 and touchscreeen on a Windows 8 tablet. When using an external mouse och the trackpad everything works as expected but when I'm using the touch screen normal links in JQM are not working.
Having two very basic JQM pages, b.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is b.html
link to a.html
</body>
</html>
and a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is a.html
link to b.html
</body>
</html>
Navigation gets stuck on the second one using the touch screen, mouse and trackpad working fine. I guess this is connected to JQM ajax navigation model and the new touch events in IE10, but can't figure out exactly how to solve this.
Chrome is working fine with both mouse/trackpad and touch screen.
EDIT: Might have found a possible workaround, adding this to the css
a {
-ms-touch-action: none;
}
I have a page being showed in two frames
<frameset cols="140,*">
<frame src="resources/nav-bar.html" id="nav-bar" frameborder=0 scrolling="no" noresize="noresize" />
<frame src="resources/home.html" id="main" frameborder=0 scrolling="yes" noresize="noresize" />
</frameset>
Then in the frame named nav-bar I have links targeted to main like this:
Personal details
In Google Chrome and Safari this works with no issues but IE10 for Windows 8 when run from the Start opens the link in a new tab instead. Nevertheless if I run IE10 from the desktop I have no such issue. How can this be fixed? Thanks in advance.
EMILIO!
It's a sad little problem and apparently Microsoft is aware of it. (See http://support.microsoft.com/kb/2793437, for example.) What makes it even sadder is it seems to only appear on Windows 8, IE10 running on Windows 7 does not exhibit this problem. I manage to solve it by replacing the markup for the page I am using to navigate around, in your example the resources/nav-bar.html file. I changed:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blah blah</title>
<link rel="stylesheet" href="./some.css" type="text/css" media="screen" />
</head>
...
to
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blah blah</title>
<link rel="stylesheet" href="./some.css" type="text/css" media="screen" />
</head>
...
Give it a go.
Try using property name.
name="main"