Progressive Enhancement with Progressive Web Apps (PWA) and Bubble.is

One of the characteristics of Progressive Web Apps (PWA) is called Progressive Enhancement.  Progressive Enhancement basically means that your web-app needs to function with a core set of features on a variety of web-browsers.  So if you have some feature on your traditional web-app that uses JavaScript, you’ll want to make sure it’s compatible with a variety of browsers.  Additionally, if you’re targeting both desktop/laptops and mobile devices with your web-app, you’ll want to make sure your PWA will behave appropriately on different devices, i.e. when loading certain types of app data and rendering it on your laptop’s browser vs your smartphone’s browser.  So with HTML, CSS and Javascript skills, you can successfully create a PWA.  The “traditional” way of creating a web-app, if you’re a programmer.

But what if you’re not a programmer?  And you have an idea to create a PWA which will automate a process at work to make your life easier.  Bubble.is could be a perfect fit for you; “no-code” development from Bubble allows you to create web-apps which behave similar to native mobile apps.  With Bubble, you don’t need to know HTML, CSS or JavaScript to create web-based apps used on laptops and mobile devices.  Let’s dig a little deeper in two ways Bubble supports Progressive Enhancement.

#1 Mobile Version

Suppose you have multiple web-pages for your app and you have initially targeted desktop/laptop audiences for your app.  However, you know some of your users will use your app on a mobile device.  Bubble provides a slick way to support both audiences by providing the ability to select a mobile version of a web-page.  In the image below, the desktop/laptop version of the page is called “test” (upper left corner).  When a user accesses the page on their desktop/laptop, https://websitename.com/test will open.  Referring back to the image below, the mobile version of the page is called “test_mobile“.  When users on smartphones access the page, Bubble will automatically point the smartphone’s browser to https://websitename.com/test_mobile.

So what does this all mean?  Well, imagine a laptop user goes to your site, https://websitename.com which will load automatically.  Then another user goes to your website, but this user is on a smartphone.  Bubble has built in technology to automatically detect that the second user is on a smartphone and will load https:/websitename.com but it’ll be the mobile version (you’d create a websitename_mobile page similar to the test_mobile example above.)

This approach gives you lots of flexibility in having two very different user experiences, one for desktop/laptop and a second for mobile.  Or you might have some different functionality in the mobile version but that’s not on a laptop.  So you can re-use a lot of functionality used across platforms but also create uniqueness based on the target device.  Super powerful capabilities.  One of the disadvantages of the “Mobile version”  approach is each page needs to be loaded which may be noticeable on mobile devices.  But that’s where the next approach, Single Page App, comes in.

#2 Single Page App

Suppose most of your users are going to access your app on a mobile device.  You can create a single web-page in bubble for your app and within that page create what are called “groups” in bubble.  Think of groups as “content holders” or “containers” which can be made visible or hidden depending on criteria (i.e. logic) used in your app.

For instance, a users goes to your app’s page, https:/websitename.com.  On the page it’ll ask the user to create an account.  The questions associated with “create account” would be in it’s own group (perhaps called “create an account“). Once the account is created, a user can now use the functionality of your app.  Let’s say you have an app for buying clothes.  So the “create an account” group is hidden once the account is created and a different group called “shop now” is shown.  Once the user has selected something to buy, the “shop now” group is hidden and a “checkout” group to make the purchase appears.  All of these groups are on the same web-page, a single page app.  From a user experience perspective, your app looks and feels very much like a mobile app.

The big advantage of this approach is speed as only https://websitename.com is loaded and the groups are loaded (cached on the device) as they’re made visible.  Going between groups is super quick and behaves very much like a native app.  Note if you create a single page app in bubble, you can still have the app go to other pages which may not be accessed often, i.e. a privacy or terms of service page.

Summary

Bubble provides you a few easy, flexible and yet powerful ways to support the Progressive Enhancement characteristic of Progressive Web Apps (PWA).  As both web-browser and bubble’s technologies continue to evolve, the gap between web-apps and native mobile apps will continue to shrink.