Struggling with PWA installation

Need help Mobile
1

Hi all,

I’ve read tons of articles but just can’t get a popup prompt to install my app as a PWA! I’m not terribly technical so might be misunderstanding where something needs to be pasted in Bubble. I’m sure I’m close but just don’t know where I’ve gone wrong - any help would be greatly appreciated! Thanks!! :smiley:

I read here that I need the below:

In Chrome, your Progressive Web App must meet the following criteria before it will fire the beforeinstallprompt event and show the in-browser install promotion:

  • The web app is not already installed
  • Meets a user engagement heuristic
  • Be served over HTTPS
  • Includes a Web App Manifest that includes:
    • short_name or name
    • icons - must include a 192px and a 512px icon
    • start_url
    • display - must be one of fullscreen , standalone , or minimal-ui
    • Note: prefer_related_applications must not be present, or be false
  • Registers a service worker with a functional fetch handler

My manifest is valid

image
image524×806 48.3 KB

I think my sw.js is setup correctly. I had it blank but then read I needed the ‘fetch’ handler in there?

image
image800×195 5.4 KB

Chrome registers the manifest and sw

image
image699×498 13.6 KB

image
image826×351 14.1 KB

Do I need to add this Javascript when the page loads?
image

And then this Java when the user clicks something to show they’re engaged?

image
image794×430 36.5 KB

2

@mccjon did you manage to get this working? I’m struggling to get the install prompt show up as well

Thanks
ZubairLK

3

From the look of things, OP’s implementation seems okay. But you’ll have to make sure showInstallPromotion and hideMyInstallPromotion are actual functions. From what I see here, they’re not defined anywhere.

I personally built a prompt that looks like what you see below. It was not easy. Not easy at all. The beforeinstallprompt event doesn’t always fire exactly when the app is installable. On certain browsers, it doesn’t fire at all. On iOS, you need a completely different prompt. On desktop, the beforeinstallprompt sometimes fire after the app has been installed (meaning you might prompt a user to install your app… after they’ve already installed it). There are so many traps and edge cases. It literally took me a year to build a prompt that works nearly perfectly on every browser.

prompt-flow

1 Like
4

Thanks so much Kevin!

Think you definitely deserve a link to Progressier here - makes PWAs really easy!