I am really confused by PWA on my iPhone.
First, before showing my code, I was trying to check how a good web-app look.
Searching in Google for best progressive web-apps i open all of them on my iPhone in Safari, and clicked the Share button and then Add To Home Screen. (Uber, Flipboard, Twitter, Google Maps, Ali-express, etc)
When opening the icons from home-screen, it will open Safari again with that same page i was at, just like any website.
No full screen
No separate window (just opens in Safari like a website)
No splash screen
On Chrome- no "Add to home-screen" button
Basically just a website with an icon.
Then i was trying to do so on my website using Google's pwacompat library on my page.
I have added those into the page head :
<link rel="manifest" href="manifest.webmanifest" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="../images/logo.png">
then the JS library at the bottom of my html :
<!-- webapp manifast library -->
<script async src="https://cdn.jsdelivr.net/npm/pwacompat#2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous">
</script>
Same again, i am adding this page to home screen, and nothing.
No full screen, no different window, just Safari.
Do i misunderstand a fundamental thing about PWA ?
iOS started very late to open to PWAs and it still needs extra attributes (as you used) to provide the full set of PWA features.
In Chrome DevTools if you go to Application tab (for your application), can you see that the web manifest with its properties is correctly displayed and the service worker as well?
As Mathias said, you need an HTTPS connection to be able to register correctly a service worker. Localhost however is considered "safe" for developing purposes.
I wrote a series of articles about PWA, you can have a look and follow along to see if you missed anything.
Here a list of browsers supporting service workers (to compare with the safari version you are using).
UPDATE
I answer here to your comments:
If some web sites that offers PWAs (eg. Uber, FB) work as PWA on other devices, but not on your phone, then I would try to investigate whether there is a setting missing on your side. I made a quick research and it seems that for iOS users some extra steps are needed to use/enable PWAs:
The user has to access the PWA URL with Safari and then manually press the Share icon and then “Add to Home Screen.” There is no indication that the visited website is a PWA.
About the "Add to home screen" in Chrome, I could not indeed find any official information when it has been removed. I can only say that I never seen it again since one of the latest versions (v74+).
Every pages of a PWAs should be linkable in order to benefit from sharing it via social media apps. Therefore if you have a working PWA and you send links to others, these should work as well. There are no special browser restrictions, given that the app is correctly implemented.
I leave you below some links where other people have similar issues with PWAs and iOS 12.2:
Link with discussion
Test PWA
Article with some tips (here there are some suggestions on how to make the PWA work on iOS)
Related
Many sites wants you to download their app when you visit their webpage via mobile safari. Is this a safari browser feature? Or is this something I need to code.
How can I do it? What exactly this feature is called?
This feature is called Smart App Banner. It requires you to set a specific meta-tag on your website to link it to your App Store app, like so:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
You can find out more in the documentation.
Google came up with a new feature called Google Web Light. This optimizes websites that are not mobile friendly and are heavy for users with slow connections. Sometimes even YouTube gets optimized.
They URL is like this "http://googleweblight.com/?lite_url= website url".
So, this causes some issues to websites. Mostly JavaScript issues. Take a look at these jQuery UI elements. Nothing seems to work.
Sure there is a link to view the proper website but users won't bother clicking and would leave thinking the website is broken.
How would you go around this. Is there anyway to detect if the users browser is showing the optimized website?
Here is an example of what it looks like:
This explains how to opt out of WebLite:
If you do not want your pages to be transcoded, set the HTTP header "Cache-Control: no-transform" in your page response. If Googlebot sees this header, your page will not be transcoded.
To detect WebLite instead use $(document).ready() in a script to detect if one of those new WebLite elements exists in the loaded DOM:
if (document.getElementById('lite-menu') != "null") {
alert("WebLite is being used") ;
}
If you have a fully responsite site then WebLite will only be used for slow connections
To those of you that land on this page because you keep getting redirects using Google Web Light:
Download firefox through Raspbian Repository (or your default linux distro repository) and then seek out a browser addon to change "user agent" to desktop (just search addons for "User Agent" and you'll find something). Once done, Google will no longer terrorize you with an service they think helps you so they force it upon you.
(This may apply to others not using Raspbian such as any mobile device or small screen computer).
I'd like to add to my website a piece of javascript code that will share the current page to the facebook's user profile.
https://www.facebook.com/sharer/sharer.php?u={URL}
It works well in the desktop version. In the mobile version it open a new Safari tab/window.
Is there a way to open the facebook native app with the share page?
If I'm reading this correctly, your question is very similar to another on the website. To quote an answer there:
The Facebook app does not officially support deep linking so what you are trying to do is not possible (right now).
I have been implementing PayPal Digital Goods Express Checkout in my (HTML5) web app to enable the 'in-app' purchase of extra app content. In my desktop browsers (Chrome, Safari, Firefox) the digital goods flow works without problems. In that flow popup windows are opened at some points, for instance when the user clicks the login button or the button to pay with his creditcard (i.e. without having a paypal account). The popups are no problem for the desktop browsers. However, in Mobile Safari on my iPad 2 popup windows are always opened as (new) tabs, even if a property string containing width, height, etc. is passed to a JavaScript window.open() command. This makes it impossible to implement PayPal Digital Goods Express Checkout and have a good user experience in both desktop browsers and Mobile Safari. When the web app is run full-screen on the iPad (using an icon on the home screen) opening the popups becomes even more problematic (or impossible).
In trying to solve my problem I came up with the following options, none of which has yet led to satisfying results:
Customize the payment flow. Of course this is possible to some point, but after having redirected the user to the 'incontext' Express Checkout page that forces the user to login to PayPal, customization is out of my hands (as far as I know). For instance, I cannot customize the login process itself and make it work in an iframe (instead of a popup window) instead. It would be cool if there were some advanced API commands that I could use server-side to make the user login to PayPal myself, using my own (iframed) login form, but this seems too far-fetched.
Make popup windows work like expected in Mobile Safari, preferably also when a web app is run full-screen. I don't think it strange that Mobile Safari opens new windows as tabs (there are other browsers that do this). I do think it is strange that popup windows that are opened from JavaScript, using window.open and a property string that defines the window's position and dimensions, are opened as tabs. Does anyone know how to make Mobile Safari open such popup windows normally without requiring the users to change some browser setting?
To demonstrate my problem (and show that I am not the only one facing it, though this site's owner probably doesn't know it ;-), go to digitalmagazine.autosport.com with your iPad and click the 'Pay with PayPal' button at the top-left of the page. Click the login button in the PayPal iframe. The site disappears and the login page (that is supposed to be opened in a popup window for an 'in-app' experience) opens full page.
I have also looked at the client side (JavaScript) techniques that are used by similar in-app payment systems, but those (understandably) also use popup windows. Therefore I would prefer the second solution that I have described above. That one will also involve much less work.
While PayPal supports the mobile platform, you will need to make some changes to fully implement it for iOS and other mobile operating systems. You will find the PayPal Mobile overview here: https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_api_ECOnMobileDevices
The process starts with changing the redirect command in Express Checkout flow to _expresscheckout-mobile, and then steps through a list of additional requirements for full implementation. Read the documentation carefully, as it can be a bit picky when it comes to supported NVP fields.
I'm developing a small site that will only be viewed in-app inside a UIWebView, and one page has several links to an external website. I'd like these to open in mobile Safari, but all links inside the app load within the webview. Modifying the source of the app isn't an option since the site needs to be live before any changes could be submitted.
Is there a way to force a link inside a UIWebView to launch mobile Safari using HTML/5 or Javascript? Mimic shouldStartLoadWithRequest? Sneaky, hacky workarounds or brilliant alternate solutions?
(And, out of sheer curiosity... why not?)
It would be bad design to let sites access the frameworks on the iPhone via simple HTML. This would open up all sorts of security holes. Its not web behavior you want to alter, so I think you may need to change the app source. I still don't understand why that isn't an option. Could you go into more depth?
One option would be to add a custom URL handler. Your website could then determine if the "broswer" is the app and serve custom URLs for those links you'd like to maintain (aka open) in your app. Then, any standard HTTP/s URLs would open in Mobile Safari.
In other words, have your web server provide urls like myappurl:// for the links you'd like your app to handle, and http:// which would open Mobile Safari.