Creating a Progressive Web App (PWA) With Bubble

One of the main benefits of using Glide (glideapps.com) 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 add the app to your home screen and then not see the top and bottom of the browser. 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.

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 nice call to action that prompts iPhone users to add the program to their home screen then download add2home.css and add2home.js.

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. Once you’re done this section should look like the following.

Conclusion

The following are some screenshots of the app that this was implemented and tested on. It hasn’t yet launched and is still in development but can be seen at turnyourbaby.bubbleapps.io. When installed via the home screen no browser header or footer should be present and it will appear like an actual application rather than a web site in a browser.

Leave a Reply

Your email address will not be published. Required fields are marked *