#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.
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.
2 thoughts on “Progressive Enhancement with Progressive Web Apps (PWA) and Bubble.is”