⏱ Estimated reading time: 6 minutes

By Raphaël Moreau, Freelance

Table of Contents

A primer on PWAs

Day after day, the frontier between Progressive Web Apps (PWAs) and native gets thinner as web technologies pave the path forward. There are still subtle differences between the platforms, some of which will be explored later. React Native and Expo can reach similar results, but both cannot be distributed through stores.

PWAs are by nature multiplatform and their specification is powered by Google. This implies Chromium-based browsers are preferred and Apple and Firefox will lag on support. No new skill to learn, quick to develop, no store commission and faster access to the latest platform features. Reasons are not lacking to try them out and some go as far as creating a store for them like https://progressivewebapp.store/. What’s the catch? Their installation procedure depends on the OS and browser. The User Experience is very heterogeneous.

This is a shape because they offer many features: splash screens, installation buttons, offline mode, synchronization, background fetching, cookies, camera and microphone access, storage. Note that most of these features are available on web platforms. As such, the best documentation resource you will get is the Mozilla Developer Network website. The latest feature introduced is the support for push notifications introduced with macOS 14 Sonoma and iOS 16.4. Push notifications are when a server sends notifications on subscribed to application events.

Once a PWA is downloaded, its lifecycle becomes the second hurdle to overcome. Updating it the wrong way can break stuff, even going as far as making the application unresponsive or unusable.

Service Workers

Service Workers are special JavaScript files delivered to users. Their name never changes during the lifecycle of a PWA. It is the interface between the user interface, network, the cache and so on. The cache, by the way, must be used cautiously and for critical assets and resources such as error pages; caching everything can have a severe performance impact on the clients.

To make a PWA installable, the only prerequisite is that it declares a valid manifest file. The Service Worker declares the assets that govern how the application is installed. In the Service Worker script context, there is no window object. Instead, self can be used to interface with the browser APIs and events.

Again on updates: they are difficult and can fail. There are hacks to improve chances though like requesting that the browser skips the update queuing step to apply it immediately. The browser update can also play a trick on the user if multiple sessions of the app are opened at the same time! If you are using a framework, these sorts of complexities are automatically managed however knowing these little details can save your day.

Technologies

Multiple technologies can help you bring your PWA online:

  • PWA Builder: This is a generator rather that a framework. It simplifies the distribution of PWAs;
  • Vite PWA: Designed for Vite and Vue but could possibly work with React;
  • Workbox: Developed by Google. It’s not the most famous or the go-to. According to its website it’s being used;
  • Remix PWA: Offers everything that has been presented so far.

Sending web push notifications requires generating and using VAPID identifiers. This system, once setup, ensures events are end-to-end encrypted using the browser and OS capabilities. Developers can then choose to create invisible push notifications, manage multiple streams and so on. However, like emails and SMS sending, be careful not to send notifications to devices that are not registered anymore; the VAPID system uses a reputation system and not verifying that clients are still subscribed can result in a blocking of the key. On the other hand, using the key well can lead to delivering web push notifications to more devices simultaneously.

Events represent a sizable aspect of a PWA, notably notification interactions, push events and error events. Push notifications are an important part of the specification since they directly participate to User experience as much as the application itself. Note however that native notifications are not correlated with push: it’s on the onus of the developer to customize this integration.

Questions and Answers

Can this be coupled to VPN connections from the PWA on mobile devices?

This could indeed be useful for business applications relying on private networks. Whenever this becomes possible on the web, this will become possible too on mobile platforms at some point. Whenever API support will be available.

What’s the support like for messaging services like Signal?

Tried with OneSignal but didn’t succeed past the registering of the Service Worker. More experiments will be required.

What is the cost of WebPush?

Usage is free, but delivery is unstable. There is a status code Too Many Requests that you can track to avoid dancing around with rate limits too much. If the request does not give more details and the service documentation is not clear about rate limits, you can try estimating the actual rate limit with a load test from this status code.

Are browsers restricting the APIs?

Yes and each browser comes with it list of limitations and do not respond in the same way or with the same rate of success.

Since the application hosts Supabase in Fly, do you have any feedback on it?

The installation is too complicated for fly but Subapase is awesome, especially when compared to Firebase! Everything is included: authentication, real time, storage, Row Level Security…