This plugin allows you to convert your Bubble app into a Progressive Webapp (PWA).
This will allow your users to install your App on their homescreen. A splash screen will also be shown to the sure while loading the PWA.
The Plugin Automatically generates all meta tags and manifests 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.
Features
Video Overview & Instructions
⚠️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
Chromium browsers support installing thru the Install action on all supported desktop operating systems!
Firefox and Safari do not support installing the PWAs!
Mobile
On Android, Firefox, Chrome, Edge, Opera, and Samsung Internet Browser all support installing thru the Install action!
On iOS 16.3 and earlier, only Safari supports installing thru the Install action!
On iOS 16.4 and later, Safari, Chrome, Edge, Firefox, and Orion do not support installing thru the Install action, but support installing thru the Share menu!
How to Setup
After installing the Plugin, head over to the Plugins tab and fill out the three Keys "App Name, Nav Button Color, and Theme Color".
☝
Make sure to use a hex code for the Nav Button Color (eg: #ffffff).
Next, drag the PWA element onto the page which should be converted into a PWA. Fill out all the fields in the element inspector according to the documentation.
☝
Please be aware that Apple is quite strict regarding Splash Screens. Splash Screens are only shown correctly on iOS devices if you specify and upload a file for all the different device orientations.
You can upload all the different splash screen files with different sizes (in pixels) in the element inspector.
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).
sw_js.rar
0.5KB
Plugin Elements Properties
This plugin has 2 (two) visual elements which can be used on the page.
PWA
The element that allows to convert the app into a PWA.
Element 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
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 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.
yes/no
Prevent zooming
If "yes" the PWA's content will not be zoomable.
yes/no
Element Actions
Install — This action is used to install the PWA on the device.
☝️
Please read the Instalation warningsection before using action!
Element 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.
yes/no
app is installed
Indicates that the app is already installed on the Windows or Android device.
yes/no
PWA + Service Worker
The element that allows to convert the app into a PWA with service worker features.
Element 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
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.
yes/no
Element Actions
Install — This action is used to install the PWA on the device.
☝️
Please read the Instalation warningsection before using action!
Element 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.
yes/no
app is installed
Indicates that the app is already installed on the Windows or Android device.
