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

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.

Related

Redirect from one PWA to another PWA shows the address bar

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

Gatsby session check and SEO

I’m making app-ish gatsby website with authentication.
Im displaying user menu in header if user is logged in, and login button if not.
Until session is checked, I dont know if I should show menu or login button. Because of that I decided not to show website at all initially (if session cookie/token is not detected, website is loaded almost immediately, but initially its blocked too), until session information comes back from backend.
I did this by simply creating session reducer with initial state variable „checked” set initially to false - website shows content only when this variable is set to true, what happens after session check or after token/cookie presence check.
But, from what I understand, if I block website until session is checked and no content is shown I lose all static seo power of gatsby. I mean google bots won’t scan my website if theres no content shown initially. Am I correct?
What would be your approach to this problem? Changing from „log in” button (or not showing it at all initially) to usermenu in header looks weird.
In order for SEO to be correct, you can add loading in the menu and login button areas when detect.
But, from what I understand, if I block website until session is
checked and no content is shown I lose all static seo power of gatsby.
I mean google bots won’t scan my website if theres no content shown
initially. Am I correct?
Yes and no. If you block all your website before you check the cookie, yes. However, if you are only blocking the header part to show/hide one button or another, you are not blocking the statically of Gatsby. In addition, keep in mind that Google bots always make various crawls; one the check the "static" content (without JavaScript) and one of them awaiting the JavaScript response/rendering.
In your case, if you are only checking a local variable to decide which component render, you are not losing the SEO power of Gatsby, since you are only rendering (or not) a small piece of code.
In the worst case that the crawler wasn't able to detect that small piece of code, the SEO impact is meaningless, it won't affect the overall performance only to show/hide a component.
For further details about Google's crawlers check the docs.
What would be your approach to this problem? Changing from "log in”
button (or not showing it at all initially) to usermenu in header
looks weird.
I would say the best approach is the best UX response, since the SEO impact is meaningless. It may not be intuitive for a user to see a "Log in" button and once the cookie/reducer is checked change it suddenly to another content. I would prefer to awaiting the variable.

Web site added to home screen takes to long to show updates

I made a site using React and i added it to the home screen using Chrome and it works fine, but my problem is, when make a change to it, if i access it on the web it shows right away the changes, but on the home screen "App" it takes a long time for the changes to be visible.
Is there a way to force the updates, maybe delete the cache or force a ETag change?
Thanks in advance
#Franmcod, could you try the following:
Push F12 or Ctrl+Shift+J to "Open Developer Tools" on Windows, then you can right click on the refresh icon and select 'Empty Cache and Hard Reload'. this should remove what's cached in chrome and load the newer web page after you make the changes. for Mac use: Cmd+Opt+I.
Adam

Can't exit Salesforce Development Mode

When I have the Development mode enabled for my profile, and I open a custom VisualForce page, the code-editing window/frame appears on the bottom of the screen.
Problem: for 7-8 months now, this window does not disappear when I am done with the custom VF page and go on to strandard pages. It's just sitting there, and displays the code for the original VF page. In addition to that, it's keeping the custom VF's URL up in the address bar of the browser, which interferes with other VF pages which take a use of the URL data.
I have submitted this as an issue to SF Support, who had pounded on it for months, and did not resolve.
Have you experienced this problem before, or know how to fix?
I've had this problem before and found the Development Mode toolbar at the bottom of pages particularly annoying. It doesn't work with some of the Firefox plugins that I use. So, I turned it off.
To edit a page without Development Mode turned on, go to Setup > Develop > Pages (or Apex Classes for controllers).
If you'd rather keep Development Mode on you may want to try updating your browser, or try using a different browser (Internet Explorer, Firefox, Chrome).
You can also use the url parameter
core.apexpages.devmode.url=1
in the address of any VF page to temporarily disable the development Mode toolbar.

Paypal mobile styling

I've a mobile version of my site which has a 'Donate via Paypal button' on it which is working fine. It's a button generated from within the paypal account that when clicked brings users to my account and asks them to enter an amount to donate and then either login or pay with CC.
Problem is the Paypal page it brings me to is not mobile optimised. From reading online It appears Paypal only offer the mobile enhanced version if you're using Paypal Mobile express checkout which is far more involved than simply adding a link onto your page.
The system I have now is 100% functional and does everything I want it to, I just want it to switch to the mobile version when you go to Paypal, to be honest it's very surprising Paypal doesn't do this automatically. They should detect a mobile browser and just change the stylesheet or redirect to the mobile-login page.
Is there any way of getting the mobile-styled paypal page without having to jump through the hoops of using the express payment system? I know it's not masively difficult but it is when compared to the really simple version I'm currently using.
After hours messing with Pain Pal I finally figured out the issue. If you use a link generated by PP for donating ON THEIR SITE - ie. You go to Paypal and once there you enter the amount you wish to donate - the it won't style as the mobile site.
However, if you take the amount in on your own site and pass it to Paypal then it will auto change to the mobile site.
Ignore anyone on line (and there are plenty of people who do) telling you that to get the mobile styled site you need to use their mobile express checkout. You do not. At least not in the above scenario.
As stated here the mobile optimisation is not working for "Donate" buttons.
Which command did you use ?
With cmd=_donations its not showing the mobile version. When you use cmd=_xclick its mobile optimised, but then its not a "Donation" Site.

Resources