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

Over the past few years, Progressive Web Apps (PWAs) have emerged on the web, allowing businesses to offer web apps on smartphone screens the same way a native application would. Wondering what the point is? The Scroll agency explains here why to build a PWA with Bubble and what its advantages are.

What is a PWA?

A PWA (Progressive Web App) is a web application built with various development languages like HTML5, CSS3 or JavaScript, and run in a web browser. A PWA behaves very similarly to a native application you could download from a store.

To technically qualify as a PWA, the application must include several important elements: HTTPS, one or more Service Workers, and a manifest file.

HTTPS means the application is hosted on a secure network. This delivers a trusted, secure application.

The service worker is a script executed in parallel with the page open in the web browser, delivering fast and reliable pages, offline support and additional features.

The manifest file is a JSON-format file that holds and controls the display of the elements needed for your site to appear as an application. It contains, for example, the application name, the URL, and the icons.

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

Why build a PWA on Bubble?

There are several reasons to turn your application into a PWA with Bubble. The PWA has specific characteristics:

It's a web application, so it's hosted and runs on the web, but designed to look like a native application.

A PWA can offer various features like microphone, GPS or camera access thanks to service workers.

When used, its features are cached to prepare a future use that could happen offline.

It's compatible with all browsers.

Finally, it's downloadable by the user if they want.

The advantages of a PWA

Turning your application into a PWA with Bubble brings several advantages:

The PWA can be used both as a website and as an application, so it can leverage certain device features in addition to web features. You can use the microphone, GPS, push notifications or the camera.

Installation isn't required. On a PWA, accessibility is more interesting than a native application because the app is hosted online. It's therefore instantly accessible via a URL. This also means you don't depend on app store approval conditions.

Like a classic website, the PWA updates very easily and very quickly because a simple update on the server is enough.

The PWA is available on different devices — smartphones, tablets and computers — which significantly expands the number of users who can use the application.

PWAs benefit from SEO. Like websites, they get the same search engine ranking opportunities and are therefore crawled by Google.

For performance close to a native application, a PWA is much lighter on resources and uses less storage.

On smartphones, you can find the application directly on your phone's home screen like a native application.

5 tips to build your PWA on Bubble

Think about the logo

Your PWA will appear on a smartphone's home screen — you must work on the application's logo. Your application's logo must be readable, impactful and adapted to the different devices. Your application will sit among other native apps and PWAs.

Remove the footer

On mobile, users rarely scroll all the way to the bottom of pages. Using a footer isn't necessary. You can remove it and display the important information you used to group in the footer differently within the page.

Design your PWA like a native app

When you work on the UX of your PWA, imagine it as a native application. Avoid using classic links like those found on websites; prefer buttons that are easier to read and suited to touch screens. Also think about adapting your application's menu.

Work on the loading states

To mimic native applications, think about working on the different loading screens. Add a splash screen, add aesthetic effects to element loading like images.

Don't forget desktop

Keep in mind that your application is usable on desktop. Careful not to over-optimize your PWA for mobile and neglect the desktop version. Even if mobile remains the priority today, it's important that the application is compatible and properly adapted to the different devices.

‍

PWA examples

Here are 3 examples of Progressive Web Apps you probably already know:

‍

‍

Bubble agency: build your PWA with Scroll

Bubble is one of our main tools at Scroll. We use it daily on many projects. That's why we set up our Bubble agency. Thanks to our complete mastery of Bubble and our know-how in this field, we support our clients on diverse projects. We use Bubble's power to offer unique, tailor-made applications, in record time.

Want to build a PWA? Contact us to estimate your project.