How to copy Bubble Forum's 'Download App' feature?

Questions
1

Hi Bubblers,

I’ve seen the Bubble Forum has a ‘Install to App Screen’ feature, which downloads the app to your Native App screen (I’m on a Galaxy S8, using the Samsung Internet browser).

@emmanuel @josh, any idea how this is achieved? It might help me avoid the anguish and confusion of the app store process.

20200109_065845_1
20200109_065845_1336×600 30.8 KB

Thanks!! :slight_smile:

1 Like
2

Capture
Capture1805×420 28.4 KB

  1. Just need to on the hide safari UI components in the Setting/General
  2. Download it to the live version
  3. Try to add to home screen now, you will see that it become an app alike platform.
1 Like
3

Hi Loh,

Thanks for your message!

I’ve actually seen and done that, but what I’m talking about is shown in yellow, a download button in my browser, which triggers the ‘install webapp’ action, which adds it to the actual app drawer (not sure how iPhones work though) and for a popup/notification to prompt the user to install it.

I want to avoid app stores if possible, so this is a possible path I’m exploring.

20200110_091417
20200110_0914171440×2960 447 KB

Screenshot_20200110-091355_Samsung Internet
Screenshot_20200110-091355_Samsung Internet1440×2960 300 KB

1 Like
4

PWA - Progressive Web Apps - is probably what you’re looking for.

1 Like
5

Hi Alexander,

Well ultimately yes, I guess, but right now I’m just looking for the workflow/element/code that tells the mobile browser to show me the ‘Download’ button (like I’ve circled in yellow in my previous post), or otherwise the steps to show a notification, so when the user clicks a button, the page will be downloaded to their phone. Asking a user to find and click through to the ‘Add to Home’ button on their phones seems like a lot of friction.

1 Like
6

Read about Add to Home Screen here:

(Pro tip: MDN can tell you anything about web development, actually.)

2 Likes
7

That’s perfect! Thanks so much, Keith!

8

Hi Keith,

I hope you’re well?

I’ve been going through the Add to Home Screen documentation and I’ve got the App Manifest and Service Worker working, icons etc sorted but I’m not sure if that’s it? I don’t get a prompt to install?

I was looking at WebDev but can’t figure out if I need to do the below? And where would I do this in Bubble? In a ‘On page load’ workflow and run Javascript?

Thanks so much in advance!!

Promoting installation #

To indicate your Progressive Web App is installable, and to provide a custom in-app install flow:

  1. Listen for the beforeinstallprompt event.
  2. Save the beforeinstallprompt event, so it can be used to trigger the install flow later.
  3. Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.

Listen for the 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();});
9

Sorry, this isn’t something I’ve done, just pointing you to the most official documentation for it.

As far as where to execute such code, you’d either do that in a plugin or use an HTML element, or use the custom header feature to add a script that adds the EventListener function you need.

1 Like
10

@mccjon Did you have any success with the “download” prompt and the Add to Home Screen feature? - Joey

11

Hello @mccjon
Please did you figure out how to add the custom instalation promt?

I have completely turned my app into a PWA. I just can’t figure how to trigger from workflow the add to the home button