Forum Academy Marketplace Showcase Pricing Features

Creating a Progressive Web App (PWA) With Bubble

One of the main benefits of using Glide is that it lets you build a progressive web app without code. There’s also a clear call to action when someone visits a site built in Glide that they should use the app on a mobile phone and add it to their home screen. A common suggestion on the bubble forums is to build a native app so that you can install it and then not see the top and bottom of the browser when you are using it (thus making it feel more like a native app). For various reasons a PWA may be the preferred approach. This blog post provides instructions for adding in PWA support to a web app built in bubble.

Prerequisites

You should make sure that your bubble app renders well on mobile device screen sizes. Additionally, you’ll need to be on a paid bubble plan in order to be able to upload files via the “SEO / metatags” tab. In my experience having the app be password protected (via the “Limit access to this app with a username and password” setting) causes issues when the app is opened via the home screen on a mobile device.

Generate a Manifest File and Icons

Go to dunplab.it and select the Web App Manifest generator. Fill out the form using the following settings. Leave the defaults for the rest although you can change the colors.

  • Short Name
  • Name
  • Description
  • Start URL: /
  • Upload image: Provide an image that is 512 pixels wide by 512 pixels tall.

Click Generate Manifest and then extract the provided zip file. These include the icons in different sizes for various devices.

Copy the manifest code that is provided into a new manifest.json file. Find the line with prefer_related_applications and remove the quotes that surround the word “false”. This fixes a bug where the generator provides quotes around a boolean (an indication of whether something is true or false).

Setup Additional Files

Go to https://github.com/Wappler/Service-Worker and download the app.js and sw.js files.

Create a blank fallback.html file.

If you want a call to action that prompts iPhone users to add the program to their home screen then download add2home.js and add2home.css.

Add HTML to Header

Open your app in bubble and click on Settings and then on “SEO / metatags”.

Go to the “Script/meta tags in header” section and paste in the following. For each of the link tags below update the href attribute to reflect the icon file that you obtained from dunplab.

<link rel="manifest" href="manifest.json">

<script src="app.js" ></script>

<link rel="stylesheet" href="add2home.css">
<script type="application/javascript" src="add2home.js"></script>

<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152-dunplab-manifest-34701.png">
<link rel="apple-touch-icon" sizes="120x120" href="android-icon-192x192-dunplab-manifest-34701.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76-dunplab-manifest-34701.png">
<link rel="apple-touch-icon" sizes="60x60" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="57x57" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="72x72" href="icon-192x192.png">
<link rel="apple-touch-icon" sizes="114x114" href="icon-192x192.png">
<link rel="icon" sizes="128x128" href="undefined">
<link rel="icon" sizes="192x192" href="android-icon-192x192-dunplab-manifest-34701.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Turn Your Baby">
<meta name="application-name" content="Turn Your Baby">
<meta name="msapplication-TileColor" content="undefined">
<meta name="msapplication-square70x70logo" content="undefined">
<meta name="msapplication-square150x150logo" content="undefined">
<meta name="msapplication-wide310x150logo" content="undefined">
<meta name="msapplication-square310x310logo" content="undefined">

Upload Files to bubble

While still on the “SEO / metatags” page scroll down to the “Hosting files in the root directory section. Upload the manifest.json file, all of the icon files and the additional files under the “Setup Additional Files” section above.

21 Likes

Hey @JohnGiaccotto , many thanks for this tutorial. Would do post a link with an example of live implementation ?

You can see this implemented on https://turnyourbaby.bubbleapps.io. It’s possible that this URL will change in the future though as this hasn’t yet launched.

1 Like

are you aiming to make it installable like tik tok PWA ?

My main goal had been to make it so that when you add the app to your home screen it hid the browser header and footer when the app is opened via the home screen, just like Glide does.

THANK YOU @JohnGiaccotto!!! Now my bubble app no longer shows the Safari header and footer. THANK YOU THANK YOU THANK YOU

2 Likes

Hi @JohnGiaccotto will this work for android too? or is a different approach required?

Yes @aestela this process works well for both iOS and Android

@JohnGiaccotto I am having trouble with the iPhone call to action prompt – is that still working on your apps? Also, do you know of any similar call to action prompt for Android?

On Android, IF the PWA is set up correctly, Chrome will automatically show the prompt.

Install Lighthouse - Chrome Web Store on chrome and test your app, it’ll show what’s missing in the chrome PWA requirements.

In the end I was able to make it work manually.

@JohnGiaccotto thank you for sharing this. I’ve followed these instructions which were very clear.

On testing, I still get the Safari UI on my iPhone after adding to homescreen (the call to action works). I followed the suggestion from @aestela to testing using Lighthouse and it reports that the manifest is not being fetched.

What would the reason for that be / what might I have done wrong?

Thanks for your help.

@coproduction.org @lucas.ar I just finished writing another tutorial to complement this one just in case you weren’t able to get this to work properly. You can check it out here.

Hope it works for you!!!

Thanks @aestela, that’s great. I’ll certainly take a look!

For what it’s worth this is found:

@JohnGiaccotto’s instructions got me a long way (big thanks) but Lighthouse told me the app wasn’t installable. @aestela’s instructions prompted me to look back at the manifest and reexamine (thanks to you too) and the manifest code generated by dunplab.it seemed the likely culprit so I rewrote basic form/examples. That got me to being able to install. Lighthouse still told me the service worker wasn’t registering so I used the suggestion of running javascript @aestela suggested triggered on page load.

Now I have lots of lovely green dots; a pwa that is installable and hides UI; a prompt to add to home screen using the java/css files in this thread. Happy days, thanks for all the advice :smiley:

1 Like

Great you got it working!!! Glad we could all help!!

Glad this was helpful to some people. I see there were some questions for me and apologies for not being able to provide more assistance. My focus has shifted to building an online mentoring site for NoCode mentoring.

2 Likes