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.

29 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.

1 Like

April 2022 update:

Still using these instructions, I noticed my iOS PWA home screen icon was no longer being generated after upgrading to iOS 15.4. Apparently there is new support for PWA icons in iOS, which is great but it seems to break the instructions in this thread.

I fixed the problem and got the icons working with iOS 15.4 by deleting the rows of code in the HTML Header that have “apple-touch-icon” – this solved the problem.

Of course, maybe the icon generation is now broken for older versions of iOS…but better to be up to date and not behind the times

2 Likes

Hey @JohnGiaccotto, thanks for these great instructions! Just took me a few minutes to get my PWA working!

What now would be the “cherry on top”: Does anyone know how to implement a splash screen?

Thanks in advance!

@joko

I setup the splash screen following these instructions and it works:
https://blog.expo.dev/enabling-ios-splash-screens-for-progressive-web-apps-34f06f096e5c

1 Like

Hello @JohnGiaccotto,
a link to add2home.js and to add2home.css do not lead to given files. Would you please provide working link to given files.
Thank you in advance!
Best regards
VM

Hello @greg18 ,
obviously you manged to make PWA being installed to IOS homescreen.
Would you please share feeback concerning making PWA for IOS homescreen.
Also, where did you got the files add2home.js and add2home.css?
Thank you in advance!
Best regards
VM

@valera.rwth I am now using Progressier to handle PWAs. It costs $15 per month but is worth it