Why build a PWA on Bubble? What are the benefits of a PWA?

In recent years, progressive web apps (PWAs) have emerged on the web, now enabling businesses to offer web apps on smartphone screens in the same way as native applications. Wondering what the benefits are?The Scroll agency explains here why you should build a PWA with Bubble and what the benefits are.

What is a PWA?

A PWA (progressive web app) is a web application developed using various programming languages such as HTML5, CSS3, or JavaScript and runs in a web browser. The way a PWA works is very similar to that of a native app that can be downloaded from an app store.

To be technically considered a PWA, the application must include several key elements: HTTPS, one or more Service Workers, and a manifest file.

HTTPS means the application is hosted on a secure network. This ensures a trustworthy and secure application.

The service worker is a script that runs alongside the page open in the web browser, enabling fast, reliable, offline pages and additional features.

The manifest file is a JSON file that will contain and control the display of the various elements needed for your site to appear as an application. For example, it includes the application name, URL, and icons.

Those three elements match exactly what the MDN guide to installable PWAs documents: a site served over HTTPS, a valid manifest declaring at least a name, correctly sized icons and a display mode, and, depending on the browser, a registered service worker. Behaviour then differs by platform, which explains most disappointing install rates: on Android the browser may offer installation itself; on iOS it goes only through the “Add to Home Screen” action in Safari. Without a prompt explaining it at the right moment, nobody discovers it.

The goal of the PWA is to create an app that benefits from the visibility and accessibility of a website and the features and power of a native application.

Why build a PWA on Bubble?

There are several reasons to turn your application into a PWA with Bubble. PWAs have specific features:

One Bubble-specific point deserves stating before you start, because it belongs to the application rather than to the PWA. Access control to data runs through privacy rules, enforced server-side: a data type created without a rule is readable by everyone, including through the API. Wrapping the app as a PWA changes none of that, the service worker caches whatever the server agrees to send. And on budget, every page load and every workflow consumes workload units, billed at $0.30 per 1,000 units beyond the allowance: a heavily used PWA therefore costs more than an equivalent website.

This is a web application, so hosted and executable on the web but designed to feel like a native app.

A PWA can offer various features such as microphone, GPS, or camera access via service workers.

A nuance is needed about those hardware features, because availability is not uniform. A PWA reaches the camera, microphone or geolocation through web APIs whose coverage varies by browser and operating system, whereas a native app reaches everything the platform exposes. Before promising a feature, the useful check is therefore to test on both systems rather than trusting one platform’s documentation. In exchange, distribution is free: no review, no commission, no $99-a-year developer account, but no discovery by search inside the stores either.

When used, its features are cached to prepare for potential future useoffline.

It is compatible with all browsers.

Finally, it is downloadable by the user if they wish.

The benefits of a PWA

Turning your app into a PWA with Bubble offers several advantages:

Since a PWA can be used as both a website and an app, it allows access to certain device features in addition to web functionalities. This means you can use the microphone, GPS, push notifications, and camera.

No installation is required. With a PWA, accessibility is more convenient than a native app because the app is hosted online. It can be accessed instantly via a URL. This also means you’re not dependent on app store approval conditions.

Like a traditional website, a PWA updates very easily and quickly, just update the server.

Since PWAs are available on multiple devices, smartphones, tablets, and computers, this significantly expands the number of users who can access the app.

PWAs benefit from SEO. Like websites, they enjoy the same search engine optimization opportunities and are crawled by Google.

For performance nearly identical to a native app, a PWA consumes far fewer resources and uses less storage.

On smartphones, the app can be found directly on the home screen, just like a native app.

5 tips for creating your PWA on Bubble

Think about the logo

Your PWA will appear on a smartphone’s home screen, so you must absolutely refine the app’s logo. The logo should be legible, impactful, and adaptable to different devices. Your app will sit alongside other native apps and PWAs.

Remove the footer

On mobile, users rarely scroll all the way to the bottom of pages. So, a footer isn’t necessary. You can remove it and display important information differently within the page instead of grouping it in the footer.

Imagine your PWA as a native app

When designing the UX of your PWA, treat it like a native app! Avoid using standard links as seen on websites; opt for more readable buttons suited to touchscreens. Also, adapt your app’s menu accordingly.

Work on loading

To mimic native apps, consider refining your loading screens. Add a splash screen and enhance the loading of elements like images with aesthetic effects.

Don’t forget desktop

Remember that your app is usable on desktop. Be careful not to over-optimize your PWA for mobile at the expense of the desktop version. Even though mobile remains the priority today, it’s essential that the app is compatible and properly adapted to all devices.

PWA Examples

Here are 3 progressive web app examples you’re likely already familiar with:

Bubble Agency: Create Your PWA with Scroll

Bubble is one of our core tools at Scroll. We use it daily across many projects. That’s why we’ve launched ourBubble agency. Thanks to our deep expertise in Bubble and our know-how in this field, we support our clients on a wide range of projects. We leverage Bubble’s power to deliver unique, tailor-made applications in record time.

Want to create a PWA? Contact us to estimate your project!