apple-mobile-web-app-capable doesn't open in safari - ios

Noticed this in iOS8 today and I'm not sure if this has always been the case or if it is something that's come in with iOS8.
My company's website, if I save the page to my home screen, adds the icon as expected. But when you open it, it doesn't open in safari, it opens as it's own standalone app. For example, double tapping the home button will show this app open, operating independently of safari.
I gather it has something to do with the apple-mobile-web-app-capable meta tag. Can anybody confirm if this is new or if it has always been the case. Also, some insight as to whether the above meta tag is actually responsible for this. Documentation specifies the default is to open in Safari.

Yes, the apple-mobile-web-app-capable meta tag will do this and it has been around for several iOS versions.
See more here:
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2

Related

iOS PWA standalone: how to force opening in a new window

I have a PWA saved on the home screen, this opens up standardly without search bar nor the bottom buttons (share, tabs, etc..).
So every link gets opened inside the PWA, and that is expected.
I have a problem when showing pdfs as they normally open in Safari with the "share" button and all the bottom bar, but in the PWA they open up without bottom bar and without any share button.
So my idea is to open the PDF link (http://www.mywebsite.com/download/pdf/12345) in a new safari window,.
I tried putting target="_blank" on the PDF link but this did not solve the problem.
I also tried forcing the iOS behavior by opening the app in safari with safari://http://www.mywebsite.com/download/pdf/12345 but with no luck.
How do I open a New Safari window to a link?
OK, the ONLY working solution is to tell iOS you are going onto another domain.
PWA stays in your app frame ONLY if you stay in the same domain.
To open a link within your domain in an EXTERNAL window (or inside the PWA but with Safari standard controls) you have to send it to an external/different domain.
So the PWA is on https://www.mywebsite.com/ and you want to open a PDF with all Safari control buttons, you just create a SUB domain and point the link to it, like https://media.mywebsite.com/download/pdf/12345 at this point the PWA thinks you are on a different domain and does the correct rendering! 🎉
You can try to use window.open(url).
But, remember to put it in an element with onclick event attribute.
For example,
<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>
Reference: window.open(url, '_blank'); not working on iMac/Safari
EDIT
You can set a scope in manifest.json to customize where to open an external link.
You can refer https://developers.google.com/web/fundamentals/web-app-manifest on the property scope.

Open Safari to the last tab that was opened

Is it possible to open Safari from code that will reopen Safari with the last tab open? I've searched around and I can only find how to open Safari with a URL (not what I want) or open it to a blank page (also not what I want). Is it possible to reopen Safari in its last state?
e.g. someone is on Google on Safari. They then hide the app and launch my app. I'd like my app to open Safari and show Google - I don't want to use the delegate bundle passed in during activation as the website may be expired or dynamic and so I don't want to reload the page.
Thanks

iOS: Run code only after it's been added to the home screen

I'd like know if there's away to run a bit of code only after it's been installed to the home screen on iOS. This is for internal use only so I don't need it to work on other platforms. Just iOS.
Basically, I want to add a few custom icons to iOS devices that do specific things. One will open a PDF and that's the one I'm having a hard time working with.
So, here's the flow...
User goes to URL on their iOS based device, there is nothing to see here, but then they add the URL to their home screen. Once they click on the home screen icon, the page opens and redirects to the a PDF that lives online. The pdf can live online since they will always have wifi.
Any suggestions?

iPad Home Screen App refreshes on every open

I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
I'm under the impression this is simply the nature of the "home screen" web apps that operate outside of normal Safari. I have an app that operates just fine in Safari with some minimal state saving, but the blasted non-Safari version refreshes every time. EDIT: Even the showcased O’Reilly example that uses a cache manifest reloads every time when added to the home screen.
You may want to look into creating "routes" (URL fragments) that point to a controller/action pair. Look into the MVC PhoneGap example (If not using PhoneGap, you can scroll past all of that stuff and implement your own data model and store). Also see this Sencha Touch MVC tutorial.
Also, most of the rendered sencha touch components seem to maintain state between changes of the active item. For example. I have a main TabPanel that contains all sub panels. When switching between tabs on the main TabPanel's TabBar, each sub panel maintains its rendering, unless I've set a listener or controller action to do otherwise.
Hope this helps.

Add icon to home screen like Safari

I saw the Bug Me iPhone app and was intrigued by the ability to add icons to the home screen. I figured it would work similar to the way that Safari achieves it.
There as a similar question here that said it was not possible:
Implementing "Add to Home Screen", ala Safari
Clearly there is a way and I am not looking in the right places.
Has anyone else worked it out yet?
You have to use Safari.
BugMe saves the note on home screen by:
Upload the note to their server.
Launch Safari by -openURL: with a URL to their server.
In Safari, the user is instructed to press the "+" key to add a special bugme:// link to home screen.
There's no other ways if only documented methods can be used.
For private APIs, create a UIWebClip object and use -[UIApplication addWebClipToHomeScreen:].

Resources