OIDC and PWA (add to home screen) - progressive-web-apps

Update: Basically the same issue as Standalone PWA breaks login but on iOS.
If you add a web app to the home screen, Chrome on android shares the local storage with the same domain in the browser. You can test this by going to https://wilfrem.github.io/add_to_homescreen_test/ then adding to home screen and see you have the same id when opened from home screen. (I did Nexus 5x)
If you do the same in iOS Safari you get a new id. (i did iPod iOS 12.1.1)
The oidc-client-js library sets a session reference in local storage and then recalls that on the web app
s signin callback. So if you try to log in from a web app opened from the home screen on iOS, it opens the OP (oidc provider) in Safari, then redirects back the web app's url, but in Safari not the opened from home screen web app, so because of the different local storage you get:
No matching state found in storage
How are you supposed to use oidc with an iOS opened from home screen web app if the local storage isn't shared across the same domain? Or how do I get iOS to reopen the correct window(the one opened from home screen) when redirecting back to the web app? Or how to I get iOS to never leave the fullscreen app when navigating to the OP (oidc provider) in the first place?
edit:
Here is a narrative to explain the issue.
open my.app.com
add to home screen
open app from home screen
click login button
login button calls UserManager.signinRedirect()
UserManager.signinRedirect() calls OidcClient.createSigninRequest()
OidcClient.createSigninRequest() stores signin state in localstorage and navigates to my.op.com see on android my.op.com opens a Chrome tab and on iOS my.op.com opens Safari
complete signin process on op
op redirects to my.app.com/signin-callback.html here is the problem
On android my.app.com/signin-callback.html opens in the app opened from the home screen, on iOS it stays in Safari. So you get:
No matching state found in storage
I'm not having difficulty with the error, based on what is happening the error is completely expected, I just don't know how to get Safari to behave in a way that will work with the library.
If its relevant this is my manifest.json
{
"name": "omitted",
"short_name": "omitted",
"theme_color": "#omitted",
"background_color": "#omitted",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "omitted",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "omitted",
"sizes": "512x512",
"type": "image/png"
}
]
}
add also removed scope but didn't have any change, in behavior.
update:
also tried setting start to full domain, not just relative /, still no change.

I have already experienced this problem and it has helped me.
See if it helps!

Related

PWA - Chrome Add-To-Home-screen adds as WebAPK but not to home screen

I have a Progressive Web App that meets all the Google Chrome criteria for installation and passes the Audit tests. Using Chrome, when I surf to the PWA's URL and select "Add To Home screen" (either from the menu or from the popup) it will install as an app via WebAPK - as expected. The correct icon shows in the app list. However, the app icon is not added to the Home screen - it is not on any of the home screens.
Shouldn't it also be added to the home screen as that is the expectation of "Add to Home screen"?
This SO thread suggests adding to both is the usual functionality. But that is not happening for me. PWA add to home screen does not work as expected
If it should also be added to the home screen, any suggestions as to what I may be doing wrong or where to investigate?
If it doesn't also add to home screen - shouldn't it? Or change the menu item to "Install App" - so the user expectation is set correctly?
EDIT 2021-09-18:
It's been 2 years since this post and I've been distracted with other things (as many have the last 18 months). But coming back to this project, I still have this issue. Thanks to CherryDT for suggesting to update this post instead of creating a new one.
I created a minimal PWA (called PWATest) that successfully registers a service worker and shows the browser prompt to install the PWA. The browser prompt in Android Chrome (now Version 91.0.4472.124) shows at the bottom of the mobile screen and says "Add PWATest to Home screen". When I tap that prompt, the "Install app" dialog shows and I select "Install". I see "Adding PWATest...". After it is installed, the app icon is in the applications area with all the other app icons but there is no PWATest icon on the home screen (any of them).
I have cleared the cache and asked a friend to try with no difference.
I just went to bmw.com and installed their pwa. Same thing. The app icon showed only with the other application icons - no icon on the home screen.
I tried my pwa using Samsung Internet and again same result.

PWA launch icon

Is it possible to create & submit an PWA launcher icon to a website marketplace?
The launcher icon should work like a "Add to home screen" PWA function.
What I am trying to achieve is a PWA store making it easy for users to Add an icon to their homescreen for launching a PWA website. Please advice.
If you mean that in your web marketplace, you want to get the icons of submitted PWA then, you can get the PWA launch icons from either the link tags:
<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
or from the manifest.json icons section:
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
You can set the icon to be displayed according to sizes on home screen in manifest.json file.
https://developers.google.com/web/fundamentals/web-app-manifest/
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
This is posible neither in iOS nor in Android:
Regarding the icons
Android depends on the manifest.json file at the root of your domain to handle the information about the PWA.
iOS: You may be able to change the icon and launch screen at the top of the page holding the link to the PWA, but this will not help you in any way, because Safari iOS does not allow you to generate a bookmark programmatically.
Regarding the actual link saved to the desktop
Android Chrome checks the status of both the manifest and the certificate in the site before popping up the option to save a PWA to the Home Screen. If the popup appears in your site it will be for your PWA, not for the linked PWA.
iOS does not have a way to programmatically add bookmarks. This seems to be on purpose, as a security measure. The only way to add the bookmark to the desktop is using the Safari Share button. Safari does validate your certificate at that moment before downloading the custom icon.
I understand that Android now lets you install PWAs from the Play Store, but the process to publish them there is convoluted.
What you can do
Provide great information for users on how to install the PWAs listed in your site.
Provide code to generate an install popup system in iOS for the developers publishing in your store, branded. We had to do that screen for this website and it took quite some time to get it right.

Ionic Not working in safari but works in crome and android phone

I am debugging my app.
it works well in crome and my note3 phone.
but If I test in safari,
login page doesn't change to dashboard page after login but token and Id is in localStorage it just stays in login page(1).
and form gets all messed up when keyboard appears. also it doesn't looks like it follows responsive web design that I gave(2).
could solve it when I don't use location.reload() in last part of my login function after $state.go('app.dashboard') but then when I am in dashboard and click menu then it doesn't bring all the data. but if I reload menually again then it loads up and samething happens in crome.
I don't know why it does do this at all

Save website to homescreen on iPhone vs. direct entrance - differences?

When I enter http://pattern.dk/sun/ (web mobile app) it asks me to add it to homescreen of iPhone. Otherwise I only see "add to home screen" message and not actual application. Adding it to homescreen and running it from there makes it display application.
But I would like to open that application in Chrome. Setting "iPhone iOS5" user agent in Chrome makes it display the same "add to home screen" message and not application itself.
I'm wondering what are the differences between entering application added to iPhone's home screen and Safari entrance? Can I see that application in Chrome in any way?
The distinction can be made using JavaScript:
if (window.navigator.standalone) {
// Web app on the homescreen
} else {
// Mobile Safari
}

Tell if WebApp launched via URL or link on iPhone home screen

Is there a way of telling whether my Web Application has been launched from a button on the user's iPhone home screen? I want to display a "add this WebApp to your home screen" prompt if the user has accessed the WebApp via safari by typing in a URL.
window.navigator.standalone
True if you have launched from the Home Screen. False if in the Safari browser.
Documented here:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
It works with OS 2.1 and up.
In Safari, the scrollY will start at a negative value if inside Safari, and at 0 if running as an application.
Likely the viewport will change as well (if it does, this is a more reliable method)
jQTouch detects this (try the demo). It's open source, so you should be able to find out how.
If I remember correctly there's a thing in the server log that shows what the user's previous page was. So the only way I can think of is if the user was on a previous page display the "add" thing, and if they didn't don't