Redirect from one PWA to another PWA shows the address bar - mobile

So, here's the problem: I have two sites with PWA configured and both are working just fine, Site-A and Site-B.
And what I would like to do is, when I'm visiting Site-A via the standalone app, to redirect it to Site-B.
Although the redirection works without any problem, Site-B is loading with the address bar visible. Is there any way to prevent this and show Site-B full screen too?
Thank you everyone!
Kind regards,
Stratos

In Feb 2021, there's no way to do this, but it's coming.
Chrome and Edge are working on something called Declarative Link Capturing that will allow you to do this, but it's still in design/development. You can follow along on the Chromium tracking bug #1163398

Related

Uppy ReactJs - handle access to microphone/webcam in iframe

First post after decades as a frequent visits, thanks all for the help throughout the years!
Im building a solution that will require webcam/microphone access.
The solution will be running in an iframe in another system.
We cant controll the attributes on the iframe to add allowed="..." and our solution is (and must) hosted on another domain.
IE, we cant show the promt for the user allowing access to webcam/mic
We want to use Uppy webcam in an popup window, but, as we noticed, the actual promt for access occurs in the "mainpage" and not the popup, so we cant seem to reach it.
If we run the solution when its not in an cross-origin iframe (new tab), everything works perfectly!
Any suggestions on how to work around this issue?
Regards
Pär

Force SPA Add to home screen popup to display even after adding to home

I am developing a PWA using react JS
There is a requirement that we need to display the add to Home screen even after the App has been added to the Home screen for the first time
Can any body suggest if this is possible and how?
INFO: Mostly this app will be run on Google Chrome and Safari
Refer to this answer. You simply can't do that, unless you want to do it in specific development/test machines where you can set the below chrome flag,
chrome://flags/#bypass-app-banner-engagement-checks
You can't expect all your end users to set this flag, so this can't be a solution for all the real users.
I also don't see why you would have to show the banner even after adding to home screen, for any other use case. Browsers don't allow this for obvious reasons. It will be annoying the user, if the prompting is left to developers. Linked answer have more clarification on the same.

Web App - manifest.json not applied if it's in a sub-path

I am attempting to create a react based web app. I got it working the way I wanted, and it behaved as a web app the way I expected -- for now, that means to me that on my phone, from chrome, if from the chrome menu I choose 'Add to Home screen' it shows up as if it were an app (showing up with its own icon & launching in a new window outside of chrome).
After getting that working, I decided to reorganize so that the path would be the way I wanted it - from mydomain.com -> apps.mydomain.com/appName. I moved the code to the proper directory, and when I browse there I see my "app".
I noticed an issue right away where the static assets were not loading, I fixed that by adding a symlink in www/mydomain.com pointing to www/mydomain.com/appName/static. At this point, I thought my app was properly reorganized.
Unfortunately, when I tried "add to Home screen" from chrome, it now makes a regular shortcut, which to me seems to indicate the manifest.json isn't being applied. This all adds up to me to be a fundamental issue I don't understand with code organization for sub-paths which gave me pause.
So my question is: What do I need to do to properly host my web app in a sub-path?
Notes:
I am using nginx - I am suspicious that my issue lies in configuration there, and if more info on my configuration there is needed, I can provide it.
Regarding the change to apps. - sorry if it obfuscates the problem somewhat, to note I just added an alias - thus apps.mydomain.com appears to be equivalent to mydomain.com - I only noted it in case that assumption was wrong and part of the problem.
Pardon my question language if it's wrong, I am new-ish to web, and may not be using the lingo properly - that also is why I am probably having difficulty just googling this.
Thanks!
I think I figured it out. My app was made with create-react-app, and in the package.json I edited the homepage to be my path.
Found this out from here:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

Using a custom domain on GAE. Won't let me past Step 4

I'm trying to use a custom domain with a static site hosted on AppEngine. Once I get into Google Apps to add the domain, I just get stuck on this page. Basically, I can't get past Step 4 as per the instructions here. I click "Accept" and hit the activate button but the page just refreshes. I spent about a half hour on the phone with "Lewis" from Google phone support and he eventually told me to try App Engine support lol. During the support call we attempted to get this to work multiple times using both the latest Chrome and FF browsers with cookies/cache, etc. cleared.
No reputation, so no screenshot but like I said, the problem is at Step 4 where you have to accept GAE's terms.
Looks like similar problem here. Anyone have the same problem and/or know of a solution? Thanks
You can try other way to activate, like a html page.
I have used this method to activate.
My activated page seems those:
By html to activate => //i.stack.imgur.com/t3nM1.png ;
By operators to activate =>//i.stack.imgur.com/fZTWH.png;
Can you see them?
By the way, I am in China, so, these uploaded images that I can not see them.

AngularJS app is not loading on Safari (iOS 5.1.1) back button. Any suggestions?

I've ran into an issue with Safari on iOS 5.1.1 and Angular where I am doing paginated results. After I decide to leave the page that is hosting the app, and then come back to the page by using the browser's history back button.
The application is not initialized so as I scroll again, the pagination functionality is not triggered.
Since 5.1.1 doesn't provide a web inspector, I had to rely on console.log to print events that I want to see that it's executing. On initial load, I see everything ok, but when I am back through the back button nothing fires.
My usual ways of fixing this are not working. Here are the things I've tried:
Used manual bootstrapping of Angular app
Made the page not support caching and expire the page as soon as it's rendered.
Neither of these helped, which is why I am here asking for some suggestions. Unfortunately it's not a very easy thing to replicate through a Fiddle or a hosted HTML file so I am unable to provide one. Hoping that some of you may have experienced this before.
Thanks in advance for any help.
Answer is quite late and I hope you found a solution already but it might be useful for others.
Unfortunately I won't be able to answer why the app is not initialized (due to the lack of code) but I can give you some tools/tips to ease the debugging (assuming you have the iOS simulator).
Debuging on mobile safari can be done either :
with weinre and get the features of the web concole,
or by enabling remote debugging in Mobile Safari itself, see here
Yea, same problem here with iOS 7. It must send the DOM structure over before running any javascript. Kinda pointless...
Since the problem is with mobile safari and since it supports popstate event, you can use this event to detect when the user is back in combination with $location.path(), for example:
$(window).bind("popstate", function () {
alert(location.pathname + $location.path());
});

Resources