Run offline web app when user is offline - html5-appcache

I'm making my web app to run offline. I have made an offline version. Now, I want to let the user know some kind of link to click to go offline page.
How I can cache the offline page whereas user is browsing online pages ??
Update:
here is the code I'm using on online version.
setInterval(function () {
if(!navigator.onLine){
$('.status').html('Click here to run offline version');
}
}, 250);
and offline.html contains an html file and manifest file as well.
<html lang="en" manifest="app.manifest">
UPDATE # 2
I got the solution myself. What you have to do is, put the following iframe in the online version like this
<body>
<iframe src="http://site.com/index.php/m/m_offline/" width="0" height="0"></iframe>
It will cache the offline version. Remember to add the manifest file in your offline version. hope this helps to someone else as well.
Thanks

I got the solution myself. What you have to do is, put the following iframe in the online version like this
<body>
<iframe src="http://site.com/index.php/m/m_offline/" width="0" height="0"></iframe>
It will cache the offline version. Remember to add the manifest file in your offline version. hope this helps to someone else as well.

Related

Can Chrome open files (PDF etc) directly in browser for an intranet application?

My ASP.Net MVC app is an intranet app, and in the HTML, I put an anchor link to PDF files that are stored on our network. Chrome does not open these files in the browser if you click on the link, however if you copy the link off the webpage and make a new tab, paste the link in, it will open.
Now, both the app and the files are on the same domain so how can I get PDF to open automatically in a new tab? I have looked at the various Chrome extensions, but they don't seem to work. There must be a way to get local/network based files to open in your intranet using Chrome, please don't say I have to resort to awful Internet Explorer!
Any help much appreciated.
Have you tried to use HTML iframe tag to display the PDF?
Example:
<iframe id="frameID" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Out of date for you, but I recently solved this problem on an apache2 server on ubuntu. I believe it's a matter of security from the client browser- so that a webpage can't open client files maliciously
What solution was
mount the network share drive on my web server
html point to pdf inside the mounted drive
(Optional on Apache) use a .htaccess rule to prevent folder indexing (listing all files/folder)
therefore the webpage was opening its own file, not the clients; so firefox/chrome/et al will allow this to happen
The fix should be in your mvc project . Just make sure the action returns FileStreamResult . example:
return new FileStreamResult(new FileStream(filePath, FileMode.Open), MimeMapping.GetMimeMapping(filePath));

Error loading external URL in Phonegap 2.5

I created a new Phonegap 2.5 project from scratch, and I've been trying to load an external URL in it, but I keep getting input boxes popping up on startup before loading the actual URL. I first get a pop-up with the URL of the website, then in the input box it says "DeviceInfo","Device652321624". If I click Cancel, it pops up 2 more times before loading the website. On the website itself, it loads some relative URLs, but others cause the entire page to refresh and the input boxes to pop up again.
I set the URL by setting <content src="http://phonegap.example.com" />, which is just a regular website with Javascript. I even tried commenting out all Phonegap specific code (no more ondeviceready calls), but it still causes the problem. http://www.google.com loads for me, so I'm not sure what else to check. And it works with the Android version that I've developed.
If it helps, I've also seen this message in the XCode log: Resetting plugins due to page load.
I've had the exact same problem today.
I fixed it by checking the include of the cordova.js file (this js is generated when you create the project using the create command.
( called cordova.js in the renamed cordova project version. probably phonegap.js in phonegap ?)
anyway my include was :
<script type="text/javascript" src="js/cordova.js"></script>
whereas je js file was in the project root :
I changed it to
<script type="text/javascript" src="cordova.js"></script>
and every things is fine now.
also, the 'create' command for Android generate a different js file. make sur that the new one generated for ios is used.
hope that helps !
Problem is you are using android's cordova.js instead of ios's cordova.js.
Just make sure you are using the proper one.

Why have our site's links stopped working in IE today?

The company website is DNN-based: http://www.mrisoftware.com. This morning I was alerted that links "don't work", but nothing has changed today, so I'm stumped.
I verified that this is the case in Internet Explorer, although Firefox and Chrome are fine. The behavior: when the link is clicked on, it focuses, but the target URL doesn't resolve. A right-click opens in a new tab. I've tried poking around for answers on Google but this doesn't seem to be a common enough problem to have obvious answers at the top, and I'm stumped.
Naturally, the site was developed by an outside contractor, so we don't have a Web person here I can just ask (apart from me...and I'm, as above, stumped.)
I tested it locally, and it seems that these two lines are causing the problem:
<script src="http://munchkin.marketo.net/munchkin.js" type="text/javascript"></script>
<script>mktoMunchkin("155-CYD-020");</script>
They add the following line to every <a href=""> tag:
_mchInsLnk="true"
This causes them to not function right.
Based on what you and #MarcVeens have said it looks like the marketing analytics firm your company uses (Marketo) updated their link tracking script and broke IE8 in the process.
You can contact their support here, I imagine they are aware of the problem but there are no updates on their company blog.
As a temporary workaround you could use the following code which targets all versions of IE save for IE8 (the '!' in !IE8 is the NOT operator).
<!--[if !IE 8]>
<script src="http://munchkin.marketo.net/munchkin.js" type="text/javascript"> </script>
<script>mktoMunchkin("155-CYD-020");</script>
<![endif]-->

How do you force an iPad home screen bookmarked web app to refresh?

I've run into a problem where I add a web app to my iPad home screen (iOS 5.0.1 iPad 2), and when I open it it appears to be caching something behind the scenes, independent of Safari.
I've cleared out everything from Safari that's available in Settings (Clear History and Clear Cookies & Data), and when I navigate to the web app with Safari I see the app in its current state. However if I open the home screen bookmark I get the app in a pre-changed state.
I've seen a lot of information about using a cache.manifest to cache resources for offline use, but I'm not sure if that's relevant to this since I would like the exact opposite: cache nothing.
I've gone to the level of not even testing external resources; if I change some arbitrary test string in the body element of my index.html, the home screen bookmark does not show the updated text.
Another workaround is to add ?v=1 to your Javascript and CSS links. For example:
<link rel="stylesheet" type="text/css" media="all" href="./css/ipad.css?v=1">
<script src="./js/ipad.js?v=1"></script>
It seems one doesn't have to update the number when your file has changed, as far as I can tell. Apparently, on an iPad 2 with the latest software update installed, it is enough to just hint at something dynamic.
Create a cache.manifest that instructs it never to cache resources referenced by the main html page:
CACHE MANIFEST
# Version 1.0000
NETWORK:
*
Use it in your index.html:
<!DOCTYPE html>
<html manifest="cache.manifest">
Now whenever you change that manifest file -- for example, by increasing the version number in that comment -- the browser will redownload index.html also.
Ensure your page gets reloaded when the cache is updated:
<script>
function updateSite(event) {
window.location.reload();
}
window.applicationCache.addEventListener('updateready', updateSite, false);
</script>
The Safari Developer Library has good documentation.
I think I found a workaround:
The new version of the site only appears when the index.html file changes.
(the first file to be loaded)
If you leave the index.html and only change some js in other files then the site doesn't load the new version.
For our iOS webclip apps we are using the following. So far no cache problems:
1- We have one cache manifest file called 'manifest.appcache.php'
<?php
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
header('Content-type: text/cache-manifest');
?>
CACHE MANIFEST
CACHE:
# Don't cache anything
FALLBACK:
# Nothing
NETWORK:
# Request everything from server
*
2 - In the HTML file we have:
<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache.php">
<head>
...
I have an angular app I'm developing and ran into this issue when trying to test it on an iPad. By adding a meaningless query to the end of the url I was able to get a current version of all the assets.
www.somesite.com?meaninglessquery
You can force the open web app to reload without using the cache if you have the Safari Web Inspector open and pointing at your open web app. With the Web Inspector active, press SHIFT + COMMAND + R (on a Mac). You may need to refresh one more time to trigger the updated assets.
I've had luck with powering off the device.
I had changed the app manifest; but presumably, you need a refresh or something to get the browser to look for it.
Since I removed the browser chrome, there's no reset button. We tried "closing" the app (haha) and swiping the app away; but I presume iOS tends to keep things running anyway.
Shutting down did the trick to get it to refresh.
Maybe there's some gesture for refresh I don't know. Perhaps one should tuck a little "check for updates" refresh button into cached web apps.
The latest Safari (v12.0.1) developer tools has a "Ignore resource cache" button at the top right of the Network tab. Check that, then reload.

Firebug lite on iPad

Already found this page with some helpful hints.
Problem is I need to debug a web application on a CMS using an iPad and Safari.
So far I haven't been able to make firebug-lite work. I am working in a secured environment having no internet acces, but can copy files using a USB-key.
I have copied firebug-lite.js to the local server and included the file in a script tag in the head:
<script type="text/javascript" src="http://my_server/js/firebug-lite.js"></script>
Unfortunatly when I open the page in the CMS I cannot see the firebug-lite-button on the page. Verifying the source code firebug-lite should have been loaded on the page. There is no way to get a right click menu to inspect anything.
What can I do to make firebug-lite work on the iPad? What am I doing wrong?
Start Firebug Lite already opened, as per http://getfirebug.com/firebuglite#Options :
<script type="text/javascript" src="proto://path/to/firebug-lite.js#startOpened=true"></script>
I think you won't be able to inspect elements, but you can navigate to the elements in the DOM tree provided by Firebug Lite.
It looks like Firebug-lite has problems with the iPad browser since late 2010.
The problem (ticket on official tracker) has not been yet solved.
Have you tested the problematic page in Safari/Chrome/Chromium for desktop? Since they use Webkit, the same system used with mobile Safari/Chrome, you may be able to duplicate the error and find its solution. You can open Chrome's debugger with right click, Inspect element.

Resources