Caching an offline version of a iPhone web app - iphone

I have an iPhone web app I am trying to write.
<meta name="apple-mobile-web-app-capable" content="yes">
This works fine and I can add it as a web app on my homescreen. I am trying to get it to cache the app so that it can work offline.
<html manifest="cache.manifest">
<?php
header("Content-type: text/cache-manifest");
?>
CACHE MANIFEST
index.php
img/arrow.png
img/back_arrow.png
(I can't edit the .htaccess so I'm using php to get the write content type)
The page caches fine on mobile safari and I can access it without an internet connection. However, when I add it to the home screen and then disconned the internet (using airplane mode) the app says "[app] could not be opened because it is not connected to the internet."
Where should I look to find out why it works fine in mobile safari but not as a web app?

Related

Ionic 2 In App Browser - Keep user within app, currently all website links go to Safari

I am wrapping a web app I have built in an Ionic 2 application so the client can release on the app store(s).
I am using:
https://ionicframework.com/docs/native/in-app-browser/
Which correctly loads up my testing IP but any anchor tags open up in the normal Safari browser. How can I keep the user within the in app browser?
This is how I set up the browser:
const browser = this.iab.create('my.ip.add.ress');
browser.show();
I have tried changing the links on my website to use all of the following variations:
target="_blank"
target="_system"
target="_self"
But nothing works.

iOS web apps in the switcher

I would like to write a web application that behaves identically to transmission's (the BitTorrent client) web interface.
If you exit the web app, and then access the application switcher, transmission's icon is there.
All of the typical meta tags for ios web apps are leaving me with safari's icon in the app switcher.
Any ideas on how to achieve this behavior?
If you take a look at the web app source code you can see what it's doing.
The magic sauce is
<meta name="apple-mobile-web-app-capable" content="yes" />
and
<link rel="apple-touch-icon" href="./images/webclip-icon.png"/ >
All of this is documented in the Safari Web Content Guide

iPhone Web App - Session & Current url lost when call answered

I have a multi-page website that is designed to work as a web-app on an iPhone.
It has the usual:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="/images/startup.png" />
The site doesn't use Sencha or Javascript to navigate between pages, just standard anchor links, and page-reloads (I'm aware that the standard approach to web-apps is to use a Sencha-like interface).
It works perfectly fine when launched from the iPhone homescreen, and works the same as when viewed through Safari.
An issue seems to arise, though, when a phone call is answered mid-session.
Once the call is complete, the iPhone (version 4 in this case) reverts back to the web-app, but instead of restoring the previously-viewed page it reloads the homescreen (the same page that is loaded when the web-app is initiated)
When viewing the site in Safari, and accepting a call, it doesn't do this and maintains the url and current session values.
Is this a known issue in web-apps? Is there a workaround?
(one idea I have is to maintain the session and url values in a local SQLite database, but I'm not sure if this is the best approach)
The trick is to do this:
// Start or resume session
session_start();
// Extend cookie life time by an amount of your liking
$cookieLifetime = 365 * 24 * 60 * 60; // A year in seconds
setcookie(session_name(),session_id(),time()+$cookieLifetime);
I tested this to work on iOS 4.2.1, 5.1.1, 6.0 and 6.1. The session is even restored after turning off and restarting the device.
For a more elaborate discussion of this strategy you can take a look at my answer of this question:
Maintain PHP Session in web app on iPhone
Instead of storing the login info in a $_SESSION variable, store it in a $_COOKIE. The cookie will be saved depending on when you set it to expire. As long as they log in "inside" the web app, or the regular web version (and the cookie is the same) they will not have to log in every time or when switching between the two.
I haved the same problem with my WebApp under iOS v10. It was not a problem of session and / or cookie (session mecanism was OK, based on a cookie with suffisant lifetime).
The problem is when running in WebApp mode (i.e. application launch from a desktop shortcut, not whithin Safari), the "context" is lost when switching to another app (for example answer a call). When you come back to the app, the requested URL is not the last one, but it is the URL saved into the desktop shortcut...
In my case, the shortcut was made from the login screen , so every time I switched back to my app from another app, it was the /login URL called... It looks like I was logged out...
So be careful of the URL shortcut on your web app.
At this point, I have not found a way to specify a specific URL when the user create the shortcut.

Android web app screen css help

I have a mobile application that I am building, it is made to support Android, iPhone and probably Blackberry. Most of the CSS and formatting is coded on a 1024px. I have formatted the site using an iPhone because it was in hand. After trying the site on an Android, the site seems to load as if the phone believes it is a full screen. So I only see a part of the page.
I use this line to have the app load correctly on the iPhone:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Are there any methods for Android? If I remove the user-scalable=no I can double tap the Android screen and it will be the correct size, but ideally that isn't how the site should load.

iphone web app to automatically redirect to app [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Rails: redirect_to 'myapp://' to call iOS app from mobile safari
I am trying to do what Facedialer does when it installs small webapps on your home screen so by clicking them it places a call.
I have my app with its custom url scheme working. If I try writing my custom url from safari it opens my app.
But I can't make it so the web app, when opened, redirects to my custom app.
I've tried with window.location.href="myapp://" and a lot of different variants without success.
The only way I have to make it is through META REDIRECT tag. But I need to avoid this solution since I want to discriminate if the user is opening the webapp from the home screen or if it's directly from safari. (using window.navigator.standalone)
Does it make sense?
Any advice?
Thanks
Reposting from: Rails: redirect_to 'myapp://' to call iOS app from mobile safari
have you tried window.location?
Sample:
<html><head>
<script type="text/javascript">
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
window.location = "myiosapp://"
}
</script>
</head>
<body>
Some html page
</body>
</html>