Hey everyone,
we’ve just released a new Plugin !
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 user while loading the PWA. The Plugin Automatically generates all 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 text will be hidden
Demo: http://anticodeplugins11.bubbleapps.io/version-test/pwa?debug_mode=true
Plugin Page: Progressive Webapp (PWA) Plugin | Bubble
Editor Demo: Anticodeplugins11 | Bubble Editor
Video Demo: PWA DEMO - YouTube
*This Plugin does not install service workers and does not offer offline functionality.
Cheers!
5 Likes
This is definitely something needed.
I have a question regarding pricing
- Is the monthly fee something that is required as long as we are operating our app, or are we able to uninstall the plugin after we have gone through the process of turning the app into a PWA?
Hey, yes you will have to pay for the plugin as long as the app is operated.
We’ve added a one-time purchase option as well.
That is great…I’m planning on creating a project soon with expectation of turning into a PWA.
If I were to get started on the project, install the plugin and get it setup as a PWA prior to completing the project (ie: all pages and features not yet built), do I need to do anything to update the PWA as new features are added, or will they automatically be available in the PWA?
I’m think along the lines of building out the landing page, install plugin and turn into PWA to test out the PWA aspect of things and then continue building out the app.
Yes sure that won’t be a problem. The Plugin adds all relevant files and meta tags to your application. The bubble app itself is independent of that so you can add new features / update etc.
The only thing to keep in mind is that you will have to specify a start url for PWA, which is the URL that is loaded when the PWA is opened. So for example if your application url is app.com you can specify as the start url app.com or you could set app.com/app as the start url if you are planning on creating an extra page for the PWA. For a PWA we would recommend to build the app on single page and using custom states to show/hide content. Navigating between pages within the PWA isn’t optimal.
1 Like
Here is a free tutorial showing how to setup the plugin + final results: https://nocodehq.com/tutorial/1618668812671x344243442356804600
1 Like
When I build single page apps, I usually use page parameters and use the workflow action ‘go to page’ and change parameters (sending to the same page)…would that still work, or is there an issue with using URLs in a PWA?
Hello. As far as I understand, your plugin is not converting the service worker? App not working offline? One of the benefits of a PWA is that it has to work offline. If your plugin does not allow an application to work offline, then it cannot be considered a PWA.
2 Likes
@Andrey_Fisun this might be a silly question, but I’m still learning 
When you say work offline, do you mean full functionality? Where/how does it store the data? Are you capped at the cache storage limit or will it store to the device and sync back up to online database when connection is restored? Does it do this automatically?
I’d love to get offline functionality with my app, currently exploring creating a native replica purely for offline, but interested to explore PWA if it could be a solution?
2 Likes
Hey,
we actually just released a new version of the plugin that allows you to install service workers and therefore have offline functionality for your PWA. 
4 Likes
Quick Demo of the offline functionality:Offline Demo - YouTube
The PWA will cache the the content of the page. If no network connection is detected, the PWA will show the last cached content. If a network connection is detected, the newest version is loaded.
We are also working on a cache first service worker, which means that the cache will always be loaded first no matter if there is an internet connection or not. This leads to your Bubble App loading almost instantly. This might be helpful for apps which are not often updated.
3 Likes
*Installing Service Workers and Offline Functionality requires a paid Bubble plan.
2 Likes
thats looks like great!!
is There a second tutorial for next steps?
For download my app it’s necessary click in chrome menu or is possible place any butom for request download?
Thanks @Anticode
What exactly can you do with ‘offline functionality’? Is this just so you can view the content already loaded or would this enable to you to create a new thing and store it locally before syncing back to database when connection re-established?
2 Likes
Hey,
the full instructions are available on the Plugin Page under “Instructions”: Progressive Webapp (PWA) + Offline Plugin | Bubble
We also have a video tutorial: https://nocodehq.com/tutorial/1618668812671x344243442356804600
Yes, as of now its necessary to manually install the app to the homescreen. There is no action that can trigger this.
yes the offline functionality means that everytime the page is loaded with an active internet connection, the latest version is cached by the browser. If the user than opens the page without an internet connection, the last cached content is shown. You can’t create a new thing while being offline.
Thanks @anticode for the explanation
1 Like
This pluggin doesn’t let download your pwa like an App, is just a simulator of pwa.
You website works like a PWA just in apparience but not works like an App.
You don’t download the app, you add your website to the homescreen. The navigation works like a website, for example if you push down clicking on screen this reload your website, not like an App.
In other words I find this pluggin is not pwa converter. Just a simulator of PWA.
My expirience. Completly negative. Not recommended
1 Like
