Hi there,
After a comprehensive article on iOS and Symfony-UX/Turbo, we're back to something a little lighter.
Much more open, PWAs can be "installed" on users' Android devices as well as on computers.

What is a progressive web app, or PWA?

First of all, I'd like to tell you that what I'm explaining below is mostly true on Android, on iOS Safari isn't so open, well, yes, but to install a PWA there's no simple click button, Apple asks users to do the manipulation themselves (several clicks) to install a PWA on the home screen. As a result, in the real world, nobody uses them on iOS.

So, what exactly is a PWA? Simply put, it's a web application that uses the latest web technologies to deliver a user experience almost identical to that of a native mobile application. Yes, you heard me right, PWAs can work offline, send push notifications, and even be installed on your smartphone's home screen, just like a native app. Nice, isn't it?

Let's take a concrete example. Imagine you've got an online store selling banana-patterned socks. Your customers love your socks (because, well, who doesn't love bananas??), but they'd like to be able to browse your site even when their Internet connection is acting up.
That's where a PWA comes in! With a PWA, your customers can continue to admire your socks even without an Internet connection, and receive notifications as soon as you launch a new model. Previously, this was reserved for native applications!

But that's not all! PWAs also have superpowers for developers. They're much cheaper and faster to develop than native applications. What's more, with just one version, they're compatible with all operating systems (well, as I said above, watch out for iOS).

And the ultimate advantage is that PWAs don't need to be downloaded from an application store. No more lengthy validation processes (yes, yes, if you've ever submitted apps to the stores, you know what I mean)! Your customers can install your PWA directly from their browser.

So, PWAs are like having the best of both worlds: the world of native applications and the practical, universal world of the web. It's an explosive cocktail, full of promise. And who knows, maybe your future banana-patterned socks app will become the new web sensation thanks to PWA!

Now, bear in mind that PWAs are all about web technology, so there are some things that aren't as accessible as with native apps.On Android, I can tell you that access to certain APIs is more restricted on the web than in native applications, for example, access to contacts.

Which application are we talking about?

Always the same one, the one that allows me to set up lots of new things, the reservation application.

The idea here is to create a small invitation to install the PWA when the device allows it. We don't want to flood our users, but in the case of the Frères Marchand restaurant, the customers are regulars, and many of them want to have the application on the home screen.

What are the prerequisites for installing a PWA?

Not just any web application can be installed on the home screen of a smartphone, as there are a number of prerequisites:

A Service Worker

This is the orchestra conductor of your PWA, managing interactions in the background, enabling features such as caching and push notifications. It's what makes it possible for your users to consult your chocolate cake recipe even when they're stuck in the middle of the forest without a network!
The Service Worker is a JS file, directly interpreted by the browser. In another section, we'll look at how to tell the browser that "this file is the service worker".

But be careful, your Service Worker can't be an empty JS file. In fact, for the browser to accept to install your PWA, you need to implement the "Fetch" function, which is the function that manages requests made to networks.

Here's an example of a Service Worker:

As you can see here, we've added a "fetch" eventListener, as mentioned above.

A Manifest file

This is a JSON file containing the application's metadata: its name, description, icon and how it should behave once installed on the terminal.
Without this file, no installation is possible on users' devices. In fact, this file is your application's "identity card".

Now, let's see what it looks like:

There may be additional fields such as "related_applications", which tell browsers that there's an app on the Play Store, for example.
For all the other fields, it seems clear-cut, doesn't it?

Don't forget to add a "meta" in your HTML, to give the URL of your "manifest" to the browser:

A little HTTPS?

Yes, for your application to be recognized as a true PWA, it must be served via HTTPS, whether it's the front-end or requests to the back-end.

A URL that doesn't change

It may sound silly when you put it like that, but your application must always be available on the same domain, the same URL, so free test services like heroku won't work.

JavaScript to register the Worker service

As mentioned above, you need a file to act as a service worker, but the browser won't fetch this file on its own, so you need to tell it where it is. To do this, add the following to your "basic" JavaScript, the one loaded by your application:

We check whether we're in the browser and whether it has the functions relating to the service worker, and if so, we register our service worker.

Conclusion on prerequisites

With the points set out above, you now have everything you need to make your application installable, but one problem remains... It's the browser that decides when to offer your application for installation...

Taking control of the installation experience.

In my case, I've chosen a banner at the bottom of the screen, which appears the first time, then every 10 times. The idea is to give visitors the information, but not to spam them.

Let's start by adding our banner at the bottom of the page. We're going to hide it; it exists, but is not displayed via Bootstrap's "d-none" class.

It's a simple Bootstrap banner, with a sticky-bottom so that it's at the bottom of the screen, hidden by default.
The more observant among you will have noticed that I'm using Symfony's "translator" to localize the message; indeed, the application is localized.

The JavaScript code

Now we're going to use JavaScript to tell the browser "hey, we're managing the installation".

That's a lot of JavaScript, isn't it?

First of all, the "shouldShowPwaInstallBanner" function is used to define whether or not to display the banner, by storing the number of visits in the "localstorage".
The first time, we return "true" and then only once every ten visits.

Most importantly, the "beforeinstallprompt" event is what the browser will call when it detects that your PWA is installable.
We'll save the prompt in "pwaDeferredPrompt" after having prevented it from executing (we'll have complete control over the behavior).

Finally, if we need to display the banner, we'll display it and manage the button click. The button click will simply reuse the prompt we've saved in "pwaDeferredPrompt".

Once the user has clicked on the button, his browser takes over, asking him to confirm the installation.

If you'd like to see how it works, take a look at the application on your Android smartphone.

WebAPKs

In fact, some browsers, such as Chrome or Samsung Internet, take your PWA and package it into an APK. This APK is then sent to a server, which signs it (from what I understand), and installs it like a conventional application.
The advantage is that the application is better integrated with Android, and there's no extra browser logo on the home screen.

When the browser can't access its signature server, it uses the old method and then there's the little browser logo on the home screen.

A PWA on the Play Store

And yes, since I've just told you about WebAPKs, I can also tell you that it's possible to put your application on the Google Play Store without too much work.
I refer you to the BubleWrap documentation...

As for me, I didn't use BubbleWrap, preferring a more advanced integration with the Android system for the Play Store application...
You can already see the next article here, can't you?

Conclusion

And there you have it, your little PWA is now installable, and you can offer your most loyal users the chance to install it on their smartphone's home screen....
PWAs aren't perfect, but they allow you to bring your site to your mobile with a lot less pressure than going through the stores. Of course, since it's still web-based, integration with the system isn't as advanced, but all the same, it works pretty well.

See you soon for another article