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.