Peculiar PWA Bug on Safari IOS 13.1.2 - redirect

I don't know if this is specific to the newest update of IOS 13, but I'm having some really strange PWA behavior. When I initially add it to my homescreen, links on the page open in safari rather than inline on the PWA (none of the links are set to __blank by the way), but when I sign in with oAuth on safari and then add it to my homescreen, it functions like it should and it works normally with links. (Currently using Passport with Node and Express for authentication) I don't know if there's some security infrastructure or something to do with packets, but it's really strange and I'd like to resolve this as soon as I can before my userbase gets frustrated.
I've tried looking through my manifest but everything is up to spec as far as PWA standards go. I have the display set to standalone, I have all my tags setup correctly, Lighthouse audit also says it should work. I've looked through the passport docs, traced my authentication code, but nothing seems to work.

It looks like Apple changed the home screen/standalone web app behavior in iOS 13, but I cannot find any official documentation on this. Now it seems that if you did not have a manifest.json setup before the web app was added to the home screen, it only treats the initial page as being in scope for the standalone view. Hence any other link/redirect opens in another window or the in-app browser.
We have a web app installed on our user's home screens that was written years ago and functioned just fine up until iOS 13 without a manifest.json file. I had to rewrite the WebSQL code in our app to use IndexedDB instead since they completely dropped WebSQL from home screen web apps in iOS 13, even with WebSQL re-enabled in the Safari advanced setting. When I started testing on an iPhone, any link or redirect, even using window.location.assign or any number of other methods would always open the next page in an in-app browser with a minimal UI. This also messed with the page geometry as what was a full height page with no scrolling, was now scrollable with our 'Next' button elements pushed off the bottom of the screen. Since we have some scrollable panels in the middle of some pages it wasn't obvious how to get to the end of the page (you have to scroll a fixed element to scroll the whole page) so that was not going to work for our users.
Long story short, adding a bare minimum manifest.json file to the web app (doesn't even need the scope setting) and deleting and re-adding the web app to the home screen then makes it behave as before with all pages showing in the standalone view. Adding a manifest.json to an already installed home screen app does not affect the behavior.

Related

iPhone web-app from home screen always reloads switching between apps

I'm working on a mobile web app (website) that requires you to add it to the home screen. When you open it, and switch to another app, then go back to my web app, the whole app reloads. It shows the splash screen and doesn't even remember where you last were.
Is there a way around this? I can't find any details in the iOS docs.
It seems that this topic will answer your question.
You can't avoid this refresh behavior. You should work with the HTML5 local storage to persist the state of your application and use it when the application is launched to restore his state.
Here is a link to the Safari Developer Library focussing on your question.

Jquerymobile HTML5 Iphone App Add to Home screen

I'm creating a Mobile App with JQM and JSP I'm using Bookmark bubble to do this, but I just want to ensure I understand what is happening behind the scenes here.
Is the static HTML generated by my JSP saved locally on the iPhone?
Does clicking on the APP always get fresh info from my online server or does it cache?
I'm assuming it still uses Safari to render? And just hides the toolbar etc?
If instead of hosting this online, I packaged it as an Apple App and it went on App store,
would the device still use safari to render it?
Thanks!
Documentation is at: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html
It's possible to cache the page(s) locally.

IPhone Safari 302 Redirects open new windows

I have a fairly standard ASP.Net web application which is used via mobile safari on the iPhone.
Some users who have a link to the web application placed on their desktop via profile are reporting that when navigating between pages (which I do on the server with Response.Redirect after specific events or via standard anchor tags in other cases (no target specified)) that Safari opens a new window instead of reusing the existing window.
Because of this, any login token/cookie etc (i'm using the built-in ASP.Net membership stuff), is now gone for that new browser window and the login prompt is shown.
The problem doesn't happen every time, and I can't seem to replicate it on my device (but i'm not deploying the shortcut via profile)
As you can probably imagine, it's quite frustrating for the users to have to log in every time, and you can't fix an issue you can't replicate.
My question is, has anyone heard of this issue and/or know a workaround?
The app is NOT iPhone specific, that is, it is used in a full desktop browser as well, and the logins stay like you'd expect there - and the same window is reused repeatedly.
I've considered a few possibilities, but have been drawing a blank as far as what might be causing this or how I can resolve it.
Do you have any iPhone meta tags set (to remove the url bar or the toolbar, for instance?) If you do, the phone will assume it's a native web app, and urls will open in a new safari window, like they would for any other native app.
If you are taking advantage of using the web app in full screen mode (where it is bookmarked to the launch screen next to native apps) you can prevent it from jumping out of fullscreen mode by and in to safari replacing type links with javascript.
location.href = '/yourPath';
This is a nifty trick which even works if you are linking to an outside URL, like doing an OAuth to Facebook and back.
I have a blog post on this here: http://www.aaroncoleman.net/post/2011/07/29/Keeping-iPhone-Web-App-in-Fullscreen-mode-from-Homescreen-Launcher.aspx

Simplest way to incorporate iPhone file upload when building app with Appcelerator's Titanium Developer

Sorry for the long explanation. Thanks in advance to all who are taking their time.
I am an Ubuntu user who has set up Titanium Developer on a MacMini in order to build an app for the iPhone (and ultimately some other platforms).
Rather than having any local code built in, the app simply points to my website. To do that, all I needed to do was change Titanium's tiapp.xml file to include my website URL. I wrote no other code, nor did I need to include any other files. It simply compiled and ran in the emulator without a hitch.
I've got just one problem: I need to upload files to my website and Apple, as most of you know, has disabled the input field type=file. I've got it working in all other browsers. The action simply calls a php file and passes the file info.
If I didn't have an app, and someone was just manually navigating to my site with the iPhone's Safari browser, I could get around the problem by using CliqCliq, which is a very cool iPhone app. Basically, I use JavaScript window.open() to launch CliqCliq's QuickPic browser in a second Safari window. The user chooses a file; QuickPic uploads it; and the user is returned to the second Safari window that I launched with window.open(). The user closes the window and Safari returns them to the first window (i.e., my website).
The problem is that my website is being shown in my app. (By the way, I don't have my developer license yet, even though I signed up a few weeks ago, and I can't test this in the emulator because I can't install QuickPic into it, I assume.) I wanted to repeat the same steps, described in the previous paragraph, using an iFrame but that didn't seem to work (i.e., the iFrame was blank despite my designating a src). I also tried having a hidden window by using old-fashioned frames and setting the col-width to 0. That also did not work (i.e., Safari, if I recall correctly, opened a separate window).
I'm working a little blind, since I can't test anything on the iPhone, but I figure I have two options: I can either find a way to launch a QuickPic in an iFrame -or- I can find some way to incorporate the Apple toolkit file chooser into the Titanium app.
The problem with the first option -- but again, I don't know until I can try this on the iPhone -- is that I assume both apps (mine and CliqCliq's) could not run at the same time. Even if I had a hidden window, invisible iFrame, etc., the moment it launches QuickPic, I assume my app would quit(?).
The problem with the second option is that I don't have clue as to how to incorporate a file picker into my app by using Titanium (keeping in mind, everyone, that I know very little). Brian at CliqCliq has even offered to give me some code if I can't make Apple's file picker work but again, I'm not sure what to do next.
What do you folks think? What's the best method? And, what's the easiest thing for a simpleton to do?
Thanks.
<input type="file"> is not supported on the iPhone. You'll need to use Titanium's APIs, specifically the Media one (openPhotoGallery or showCamera).
As a side note, Apple reportedly rejects apps that are just a webview displaying a website. You may want to consider putting most of the app code in local storage and using AJAX to fetch content.

iPhone Configuration Utility - Add webclip for webapp

I'm using Apple iPhone Configuration Utility to configure in-company mobile phones. I'd like to add to home screen an icon for a in-house web application we have developed. Using the Web Clip section, it's easy to add the webclip to home screen, however, we have two issues:
The webclip doesn't show up the png icon defined for the page (in meta tags).
The page loads up in Safari but is not "stand-alone" (fullscreen) (same thing, this property is defined in meta tags).
Note these issues are not encountered when adding the webclip to the home screen directly from Safari Mobile on the device.
Best
Use the iPhone Configuration Utility. There, in the section for web clip you can set full screen and and the icon. As far as I remember, you need to have those things set there and in the meta tags.
We use this feature quiet a lot and it works very well.