Demo to preview the plugin:
Live Demo: https://rapidplugins-1.bubbleapps.io/pwa
Introduction
This plugin allows you to convert your Bubble app into a Progressive Webapp (PWA). This will allow your users to install your App to their homescreen.
A splash screen will also be shown to the sure while loading the PWA. The Plugin Automatically generates al meta tags and manifest json for you.
It also allows you to Upload Splash Screens for different iOS Device Sizes, as Apple is very strict regarding this and only shows the splash screen if the correct file is used (according to the device orientation)
This Plugin also installs service workers and therefore offers offline functionality.
⚠️Installation warning⚠️
Each element has the Install action that is used to install the app on your device. But, based on official documentation the installation process may varies by the browser and by platform.
Desktop
Mobile
How to setup
- Add the Plugin Element to Your Page
- Go to the Design tab in your Bubble editor.
- Drag the PWA or PWA + Service Worker element onto your page.
- Use PWA if you only want to support app installation without offline features.
- Use PWA + Service Worker if you also want offline functionality and advanced caching.
- Configure Element Properties
- Click on the element you added.
- Set any relevant properties. For PWA + Service Worker, you may need to define Service Worker file paths or other advanced options.
- Use Plugin Actions in Workflows
- Go to the Workflow tab.
- Create a new workflow triggered by any event you choose (e.g., a button click).
- Add one of these actions:
- Install A PWA → prompts the user to install your app.
- Install A PWA + Service Worker → installs the app and registers the Service Worker for offline usage.
- Use Plugin Events
- Listen for these events in your workflows:
- A PWA + Service Worker Files Is Uploaded → triggered when the Service Worker files are successfully uploaded.
- A PWA + Service Worker Saving Files Finished → triggered when saving the Service Worker files completes.
- You can use these events to show notifications, trigger next steps in your app, or debug your Service Worker setup.
Service Workers + Offline Functionality (Requires Paid Bubble Plan)
The instructions are the same as for the other element, except for one Step.
- If you want to install Service Workers and enable Offline Functionality, drag the PWA + Service Worker Element onto your page.
- Visit the URL https://s3.amazonaws.com/appforest_uf/f1618832588005x566671081254037200/sw.js and download the file hosted there "sw.js" to your device.
- Open the file using a text or code editor. At the top of the file, there is a line saying "var urlsToCache =" and then a list of two URLs.
- Please keep the /sw.js url! The other URL "/" can be replaced by you with the URL of your pwa.
- If your PWA should load the index page of your app, you can leave the URL as is. Save any changes to your file.
- Head over to Settings->SEO/Metatags of your bubble application and scroll to the bottom where it says "host files in the root directory."
- Upload the file you saved, and make sure it is named sw.js. Once the file is uploaded, hit save and deploy your application to live.
Video saved for offline view
If you want to implement a feature that saves video on device, please use this file instead of above mentioned (after download, be sure to unzip it and indicate all URLs of the stored videos).
Saving images offline
If you want to upload images in your application offline and then download them when the network is available, follow these steps:
- Download the file "sw.js" to your device.
This file does not complement the previous one, but completely replaces it with similar settings.
- Go to the Backend Workflow tab of your application and create a new event that will be triggered when images are uploaded from the temporary storage when the network appears.
- Click Detect data and copy the endpoint
- Open the code editor and paste the copied endpoint as shown in the screenshot
- Save the sw.js file and put it in the section "SEO and metatags" -> "Hosting files in the root directory” and deploy the application
- After successfully deploying the application, repeat step 3 in development mode and simultaneously launch the live version of the application.
- Switch your app to offline mode and upload an image (for example, via a file uploader). The image will be saved to a temporary storage IndexedDB.
- After the network appears and the page is reloaded, the image will automatically be sent to the created endpoint Backend Workflow and initializes the event.
- After successful initialization in the sw.js file should be removed from the endpoint 'version-test' and 'initialize' and repeat step 5.
- Now you can save images to the Bubble database when the network appears.
Plugin Element Properties
This plugin has 2 (two) visual elements which can be used on the page.
PWA
Fields:
Title | Description | Type |
Name | The name of the Web App. | Text |
Shortname | Shorter version of the name used when there is not sufficient space. | Text |
Color | Theme color of PWA. | Color |
Description | The description of the Web App. | Text |
Background color | The background color of the Web App. | Color |
PNG icon (512x512) | Upload app icon in the EXACT format: PNG icon with size 512x512px. | Image |
PNG icon (192x192) | Upload app icon in the EXACT format: PNG icon with size 192x192px. | Image |
PNG icon (128x128) | Upload you Icon in this EXACT Format: 512x512px and PNG | Image |
Start URL | This URL will be loaded by PWA. | Text |
Scope | The scope defines the navigation scope of this web application’s application context. It restricts what web pages can be viewed. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window. | Text |
Display | The type of PWA experience. NOTE: “standalone” is recommended! Available options: standalone, fullscreen, minimal-ui, browser | Dropdown |
Launchscreen | A Launch/Splash Screen. | Image |
———————– Apple Splash Screens ———————- | ||
Splash screen (640x1136) | (optional) Upload a splash screen file in the format above: size 640x1136px. | Image (optional) |
Splash screen (750x1334) | (optional) Upload a splash screen file in the format above: size 750x1334px. | Image (optional) |
Splash screen (1242x2208) | (optional) Upload a splash screen file in the format above: size 1242x2208px. | Image (optional) |
Splash screen (1125x2436) | (optional) Upload a splash screen file in the format above: size 1125x2436px. | Image (optional) |
Splash screen (1242x2688) | (optional) Upload a splash screen file in the format above: size 1242x2688px. | Image (optional) |
Splash screen (780x1768) | (optional) Upload a splash screen file in the format above: size 780x1768px. | Image (optional) |
Splash screen (1284x2778) | (optional) Upload a splash screen file in the format above: size 1284x2778px. | Image (optional) |
Splash screen (1536x2048) | (optional) Upload a splash screen file in the format above: size 1536x2048px. | Image (optional) |
Splash screen (1686x2244) | (optional) Upload a splash screen file in the format above: size 1686x2244px. | Image (optional) |
Splash screen (1668x2388) | (optional) Upload a splash screen file in the format above: size 1668x2388px. | Image (optional) |
Splash screen (2048x2732) | (optional) Upload a splash screen file in the format above: size 2048x2732px. | Image (optional) |
Splash screen (1668x2224) | (optional) Upload a splash screen file in the format above: size 1668x2224px. | Image (optional) |
Splash screen (828x1792) | (optional) Upload a splash screen file in the format above: size 828x1792px. | Image (optional) |
Prevent auto install | If “yes” this will prevent the plugin to auto prompt users to install the PWA, in this case you can use “Install” action to prompt user to install the PWA. | Checkbox (yes/no) |
Prevent zooming | If “yes” the PWA’s content will not be zoomable. | Checkbox (yes/no) |
Element Actions
Please read the Instalation warning section before using action!
- Install - This action is used to install the PWA on the device.
Exposed states
Due to limited support of Progressive Web Apps (PWAs) on the Apple devices, the app is installed state is relevant to use on the Windows and Android devices!
For Apple devices, the app is installed state will return value "yes"!
Title | Description | Type |
Available to install | Indicates that the app is ready to be installed on the device. | Checkbox (yes/no) |
App is installed | Indicates that the app is already installed on the Windows or Android device. | Checkbox (yes/no) |
PWA + Service Worker
Fields:
Title | Description | Type |
Name | The name of the Web App. | Text |
Shortname | Shorter version of the name used when there is not sufficient space. | Text |
Color | Theme color of PWA. | Color |
Description | The description of the Web App. | Text |
Background color | The background color of the Web App. | Color |
PNG icon (512x512) | Upload app icon in the EXACT format: PNG icon with size 512x512px. | Image |
PNG icon (192x192) | Upload app icon in the EXACT format: PNG icon with size 192x192px. | Image |
PNG icon (128x128) | Upload app icon in the EXACT format: PNG icon with size 128x128px. | Image |
Start URL | This URL will be loaded by PWA. | Text |
Scope | The scope defines the navigation scope of this web application’s application context. It restricts what web pages can be viewed. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window. | Text |
Display | The type of PWA experience. NOTE: “standalone” is recommended! Available options: standalone, fullscreen, minimal-ui, browser | Dropdown |
Launchscreen | A Launch/Splash Screen. | Image |
———————– Apple Splash Screens ———————- | ||
Splash screen (640x1136) | Upload a splash screen file in the format above: size 640x1136px. | Image (optional) |
Splash screen (750x1334) | Upload a splash screen file in the format above: size 750x1334px. | Image (optional) |
Splash screen (1242x2208) | Upload a splash screen file in the format above: size 1242x2208px. | Image (optional) |
Splash screen (1125x2436) | Upload a splash screen file in the format above: size 1125x2436px. | Image (optional) |
Splash screen (1242x2688) | Upload a splash screen file in the format above: size 1242x2688px. | Image (optional) |
Splash screen (780x1768) | Upload a splash screen file in the format above: size 780x1768px. | Image (optional) |
Splash screen (1284x2778) | Upload a splash screen file in the format above: size 1284x2778px. | Image (optional) |
Splash screen (1536x2048) | Upload a splash screen file in the format above: size 1536x2048px. | Image (optional) |
Splash screen (1686x2244) | Upload a splash screen file in the format above: size 1686x2244px. | Image (optional) |
Splash screen (1668x2388) | Upload a splash screen file in the format above: size 1668x2388px. | Image (optional) |
Splash screen (2048x2732) | Upload a splash screen file in the format above: size 2048x2732px. | Image (optional) |
Splash screen (1668x2224) | Upload a splash screen file in the format above: size 1668x2224px. | Image (optional) |
Splash screen (828x1792) | Upload a splash screen file in the format above: size 828x1792px. | Image (optional) |
Prevent zooming | If “yes” the PWA’s content will not be zoomable. | Checkbox (yes/no) |
Element Actions
Please read the Instalation warning section before using action!
- Install - This action is used to install the PWA on the device.
Exposed states
Due to limited support of Progressive Web Apps (PWAs) on the Apple devices, the app is installed state is relevant to use on the Windows and Android devices!
For Apple devices, the app is installed state will return value "yes"!
Title | Description | Type |
Available to install | Indicates that the app is ready to be installed on the device. | Checkbox (yes/no) |
App is installed | Indicates that the app is already installed on the Windows or Android device. | Checkbox (yes/no) |
