I had an issue with an Angular2 app (that makes use of Angularfire2) where a FirebaseListObservable was loading considerably slower on mobile Safari compared to any other browser when deployed to production. The production domain was a custom one - not one provided by Firebase.
Running an iOS simulator using XCode, I could see the below error in the Safari web browsers's console.
The solution was to look at the firebase-auth info message, not the errors themselves.
To fix, I had to add my custom domain to the Firebase console to the list of 'OAuth redirect domains'. At the time of writing, this can be found here: https://console.firebase.google.com/project/[YOUR_PROJECT_ID_HERE]/authentication/providers
Related
I'm working toward adding PWA functionality to a web app for a client. However, I'm getting variattions between my test app and my implementation. on all apple devices, my client app has a readonly url bar that I cannot seem to get rid of. I created a stand alone test app with angular and added on the pwa functionality using Angular's pwa package as outlined here.
Here are the varying results. test app is on the left, and client app is on the right:
The apps as the appear install on my mac
The supporting manifest files
As far as I can tell everything is the same but I'm getting different results. What am I missing?
The only difference I can think of to explore at the moment are the hosting environments. The test app is on netlify and the client app is on an AWS setup through CloudFront.
Here are the headers that are being returned by the index page for each:
This was due to the manifest file not living on root of the site. It was instead inside of an offline folder.
As Apple announced Service Worker support for iOS 11.3 a few months ago, I recently started trying to get a service worker to work on iOS. On Safari it works as expected, after vising the website, it works offline. However, when trying to use the same feature in Chrome, I had intermittent results. Specifically, the service worker would only work every other page refresh, with the original refresh after going offline being one of the ones not working.
I know that Chrome on iOS is built on a version of Safari, therefore I am confused about this behavior.
Is this due to incomplete support from Chrome iOS for Service Workers? Because it is Chrome on iOS, I'm not sure of any easy way to debug it either, so any other tips to help track down the problem would be appreciated. Thank you!
Chrome for iOS do not support service workers currently(as of Apr-2020) and also the "Add to home screen" option is not available, if you are interested in that. Any offline page loading that you are experiencing should be from regular browser cache.
Here is an official documentation from Apple's web-kit page.
Update: A previous version of this post stated the Service Worker API
is available in all applications using WKWebView. At this time it is
only available in Safari, applications that use
SFSafariViewController, and web applications saved to your home
screen.
Notably, Chrome uses WKWebView as its browser engine in iOS, which don't have service worker support yet as per the above statement(which you can find in the link provided above). So the only way you can use Service worker in iOS is to use Safari browser or use one of the above supported web-views inside a native app.
Here is an article on what all PWA features iOS is still missing. Remember, this is a fast growing area. Always check if what is applicable now, especially if the documentation/article is getting older.
Here is an adapter to help debug in Chrome dev tools for pages loaded iOS - webkit/safari. Hope it becomes as easy as Android Chrome debugging one day!
Chrome for iOS is open source (https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html)
We can install the Chrome app with our developer signed certificate on an iOS device, launch the Chrome App, and start testing.
It is technically feasible.
As an update in January 2021: the official documentation from Apple's web-kit page still says the same thing, and I just battled a very difficult to debug issue in Chrome iOS - posting here in case it helps someone.
I had an iFrame containing a cross-origin Angular 10 PWA with Service Worker enabled, and the iFrame content would not show after an initial load - no errors, no server logs, just blank. The only solution that worked was to self-destruct the Service Worker per Angular's docs, and now the iFrame loads fine.
I can't seem to find an answer to this seemingly simple question. I have an app that i've built using the command line phonegap tools and when i start this app it opens up. i am using something called ios_sim (https://github.com/phonegap/ios-sim) which launches the app in the simulator and does not launch xCode (i don't quite understand why this is a feature, it seems like xCode has some useful tools)
Anyhow, my app is not functioning the same way that it does in the browser and i need to debug it. I have also already installed Charles to inspect the requests and i can verify that the correct data is coming from my API so my assumption is that there is some sort of javascript error in rendering the page (the page is partially rendered btw).
All i want to do is view the javascript errors. the same way that you would in the console if you were looking at a web page.
how do you do that?
You have to use Safari Remote Debugging with Web Inspector. See in the relating cordova docs how to do that!
We've just been developing an update for our iOS application where we need to open up a web view and display a web page hosted on a 3rd party site. This has worked locally when building directly to a device using xCode, the application works as expected; the web page loads and we can interact with it as expected. However, if we build the application and deploy to test flight, on the same device the webview functionality no longer works. Everything else works as expected but when the webview opens it just stays blank - the web page doesn't load/display. It's the same device, the same code base and same 3rd party link, so the only difference is the provisioning profile we're using (dev vs ad-hoc). Looking in application services I can't see any thing that looks like we should be setting (in fact our dev/ad-hoc provisioning profiles have the same settings). We are looking to see if there is any event we can hook into to get more detail but the application isn't crashing. Has anyone come across something similar before or point us in a direction/area that could help throw more light on the problem (might be searching for the wrong thing, but not found anything on google / stackoverflow).
In the end this appears to be down to a difference in the execution of the code when built and when deployed (maybe deployed is faster). We traced that all the relevant calls were being made using Charles proxy and looking in somme logging we had running on the web server. To try and find out where the code was getting to we added "alert boxes" - with these in place both versions displayed the web page correctly (locally built and deployed through test flight). As we couldn't leave the alert boxes in :) the solution was to move where we set up the web call and also to programmatically create the web view, rather than using one attached to the XIB. Still haven't got to the bottom of what exactly was happening.
I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?