I am just beginning to dip my toes into the PWA waters and have started by playing with the manifest.json on a site I am building. My goal is to get it to open up in fullscreen.
I am getting some very strange behavior on iOS.
I add the PWA to the home screen fine and it correctly uses the short name as specified by the manifest. But when I try to open it things go off the rails. The app seems to attempt to load in fullscreen per the manifest but then stops and the website instead opens in a new Safari tab, twice. I have two new tabs both pointing to the URL of the PWA.
Does anyone have any idea what is causing this strange behavior?
Hopefully this is not too late for you.
I had the same problem and I realize it is course by manifest link tag in the header:
<link id="manifest_link" rel="manifest" href="/manifest.json">
The moment you have this, any link or redirect from your PWA will launch Safari regardless of internal or external link.
One solution is to have the link remove from header with javascript after you load the file:
var manifestlink = document.getElementById("manifest_link");
document.head.removeChild(manifestlink);
However that might course some issues for android. You have to test your scenario with on both thoroughly.
Related
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.
I have a web app, hosted in a phonegap application (i use phonegap build for this)
The setup is simple, but shouldn't really matter in this case. I'll tell you anyways because sometimes the devil is in the details, right? :)
The details
The phonegap app is really just the minimal setup with one single html. That html actually serves as a splashscreen - the background of HTML has an image. There is a meta refresh tag, set to redirect the page to an external url. I'll call it myurl.com from now.
The website at myurl.com is build using jquery mobile and angularjs. I use that adapter floating around to handle the problem with both frameworks wanting to manipulate the dom on page load. This is the domain the app is really hosted on and where the whole application is run.
The setup
One page has a link to an external page. That page has a bootload of javascript, showing some fancy stuff. If you click the link - your app takes you to that page. That is great! It actually works on all devices. On my desktop browser and android app, i simply hit the hardware (or browser) BACK button and i'm returned to my app at myurl.com. Iphone on the other hand doesn't have a back button :(
My first attempt is creating a landing page that has a back button/link and an iframe to host the fancy page. It works on desktop and android even though i get some exceptions/errors in the console. It doesn't load on iphone - i can only suspect security issues. I am told that what i'm trying to do with the iframe won't work which i think is true.
How do i deal with this? I actually tried the InAppBrowser like this:
var ref = window.open(url, 'random_string', 'location=yes');
And i checked my config.xml has this:
<preference name="stay-in-webview" value="false" />
I also added this to my page:
<script stype="text/javascript" src="phonegap.js"></script>
Leaving out the phonegap.js file since phonegap build promise to include the correct version.
It still opens the page in the same view/app without the possibility to go back - i get the excat same result as just opening the link the normal way.
Help me {insert jedi name here}, you're my only hope!
EDIT:
I found the problem. The phonegap.js file is automaticly deployed ON the device so only the first index.html (with the meta refresh) actually links correctly. The pages on myurl.com is not linking to the file. I placed the phonegap.js on myurl.com and it's working. Only problem, the phonegap.js is different per device - meaning only the device i picked the phonegap.js from is working - the other devices break!
Anywhere i can link to the native apps files? i tried file:///{path}/phonegap.js but it doesn't work. I can see/guess the path, which is different per device, but for iphone its
Payload{name}.app\www - it won't load from there though... i also tried
http://localhost/phonegap.js
but that doesn't work either.
Any ideas?
FINAL EDIT
I decided to go back to the drawing board and place all the html files on the device instead. I'll implement JSONP on my ajax api instead so i can let the API live on myurl.com and still access it from the phone. It's probably also the intended way to make a phonegap app - i just liked the other approach more...
I actually just answered a question like this the other day. You can find it here. In short, see below:
Ensure you have <script src="phonegap.js"></script> in each of your pages that wants to use the inappbrowser
You should NOT need to include a plug-in tag in your config.xml. I am pretty sure that around 2.5 they included inappbrowser in the core build functionality.
To open a link in the inappbrowser, use this javascript:
function openURL(urlString){
myURL = encodeURI(urlString);
window.open(myURL, '_blank');
}
This will open the passed URL in the inappbrowser. If you change window.open(myURL, '_blank'); to window.open(myURL, '_system'); it will open the passed URL in the system browser.
Finally, your item clicks look like this:
<a href='#' onclick='openURL("http://www.urlyouwant")/>
Also, depending on the version of phonegap you are using, stayinwebview is depreciated.
***Based on your edit: Do not put phonegap.js in your project directory. When you upload it to build, it will include it in your project.
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.
I'm playing around with a simple web app locally, and can't quite figure out why it is not caching correctly on the iPhone. I am serving a .manifest file with the correct MIME-type, and the site works perfectly fine with my local server turned on or off on desktop Safari, Chrome and Firefox. It is only mobile Safari that is failing to cache the site. Any ideas why this might be?
It seems to be an iOS bug.
I found out that mobile safari will always run into an application caching error if you have at least one web view opened and the you clear the browser cache. I think that clearing the browser cache will destroy the cache database. All accesses to the cache database will then fail. It seems that the browser creates this database only on startup.
To get the application cache working again close all safari views and finally close the browser by returning to the home screen. Now applicaton caching should working. Some mobile devices also requires switching on and off.
If you know a methode to detect this situation let me know it, please.
I had a similar issue but Safari and iPhone were both NOT working whilst IE and Firefox were working. The reason was complex. One was a misspelling of the word "manifest" in the HTML tag. Silly mistake and very frustrating that IE and FF still worked offline. The other issue was that I was using default.asp as the main page of my app and not including this in the manifest.
My app was mydomain.com/myapp/ and thus the browser never saw the "default.asp". Also, according to the HTML5 spec, the main page need not be in the manifest but apparently Safari sees that a little differently...
I can confirm that the bug is also present on iPAD running iOS 4.3.
I spent quite some time to make the offline application cache work on iPad. I can confirm that the workaround mentioned in the previous post works.
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.