I converted my app to a PWA using the below documentation, but I have not been able to figure the “Add to Homescreen” option out. I’ve read online that the “Add to Homescreen” install banner prompt is no longer available on mobile devices. Users now have to manually choose the “Add to Homescreen” option under the share settings.
Has anyone been able to figure this out?
@garet.send The prompt only works on Android (well, should work). IOS doesn’t have the option yet, and users will need to do so manually.
@lantzgould thank for the reply. Is there a way to test the android functionality (without purchasing an android lol)
Also, I was not able to find the “Add to Homescreen” option on the Chrome browser on my IOS devices. Is this not an option?
You could try an online emulator if needed. Something like this (Note: I don’t have any affiliation with this, so be cautious whenever doing so)
Sadly, not an option. I use the Chrome Browser on my iPhone too. 
@lantzgould well that’s an unfortunate bad experience. Thanks again for your response.
One last question I have. So I will need to show a button/pop-up on IOS devices with instructions on how to “Add to Homescreen”. (terrible experience)
Is there a way in Bubble to only show this button/pop-up instructions to users on an IOS device?
Is there a way to hide this button/pop-up instructions when the user has already installed the H2HS? Google’s documentation uses the display-mode media query. I’m unsure how to go about this in Bubble. For example: if (window.navigator.standalone === true) { console.log(‘display-mode is standalone’);}
Hi its amazing tool. I just installed for my app works fine.
How we can get the option for IOS users.
It should work.
Notification alert > Instructions > Button > Trigger code
I’ve set up the Manifest and sw.js files correctly and validated them.
Where do I actually put this code below in Bubble? On Page Load/On Button press -> Run javascript?
I’m sure I’m close but just can’t figure it out!
To indicate your Progressive Web App is installable, and to provide a custom in-app install flow:
beforeinstallprompt event.beforeinstallprompt event, so it can be used to trigger the install flow later.beforeinstallprompt event #
If your Progressive Web App meets the required installation criteria, the browser fires a beforeinstallprompt event. Save a reference to the event, and update your user interface to indicate that the user can install your PWA. This is highlighted below.
let deferredPrompt;window.addEventListener('beforeinstallprompt', (e) => { // Prevent the mini-infobar from appearing on mobile e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; // Update UI notify the user they can install the PWA showInstallPromotion();});
hi there, have you succeeded in installing those files in order to have a PWA out of bubble app ?
Check out:
Did you figure it out where to put the code?
(I assume you refer to this: "let deferredPrompt;window.addEventlistener(‘beforeinstallpromot’, (e)=> { )
Is there a way to prompt the add to home screen using a button of your own? (instead of having the browser do it?)
For example, “install application” or something similar and then running a javascript that actually saves it. Wouldn’t that be so much easier? A lot of users don’t know what Add to home screen really means…
If so, do you know what javascript should be run to do this?
Thx,
Jonas
Hey! Can anyone suggest a step by step guide on how to create a PWA app from my bubble app? How to create the necessary files, what to write in them, where to add to the bubble application, what code to add to the header of all pages, what code to add to the body, etc.? Do you need to encode these files yourself or are there services that convert for the desired application? I would be grateful for any help.
do you find any solution?
Hi I used this workaround that works great on Safari. Make a pop up and explain people how to add the current page with “Add to homescreen” to the home screen and have this code in the header area of your homepage. It will remove the adress bar and give it a native app feeling if you open it with the add to home screen app icon from your smart phone.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">I just finished writing this tutorial, hopefully it works for you!
thanks