Things to keep in mind when setting up a PWA project (A)
May 14, 2022, 9:00:00 PM - (5 min read)

Things to keep in mind when setting up a PWA project (A)

Progressive Web Apps are web applications that have been designed to be capable, reliable, and installable on any device.

05/15/2022

PWAs, Guide, Dos

Introduction

Note that this is just a short readout, for more detailed, feel free to hit me up on twitter @mayeedwin or head back here for more articles : read.pwafire.org

Progressive Web Apps, famously known as PWAs, are web applications that have been designed to be capable, reliable, and installable. These are actually the core-tenets of a progressive web app.

PWAs are beyond just adding a shortcut or installing on a user's home screen. And your current web application might not need to be a PWA

Let's get started

I have seen a number - a great one, of PWAs that do not provide an experience beyond being on a user's home screen. The innovation around PWAs as an architecture, was not to just have to install a web app on a user's home screen but be able to build immersive mobile and desktop experiences that native applications on mobile or destop platforms provide.

Installing a PWA is just an entry to the immersive experience

The installation capability of a PWA is just but an entry to the immersive experiences that PWAs intend to provide to your users. It doesn't just end with having to install a web app on a user's home screen.

The caching bit of a PWA is a big deal

Another mistake most developers make with PWAs. Actually misuse, is making stuff offline. Always keep in mind that one of the other core-feature of a PWA is being able to save on space. They are actually the tiniest of applications.

When deciding what to cache or make offline, keep the following in mind:

  • Determine what to cache - not eveything. Don't cache everything. You want to cache only the things that are going to be used most often, and do not change as often as well. But all this is relative, and depends on the application and its content.

  • Determine how to cache - your caching strategy. Make sure that, as much as you are making stuff or content offline, there is need for it to be as fresh as possible. We have a few approaches; cache-first, network-first, cache-only, network-only and stale-while-revalidate.

    Cache-first is the most common approach, and is the most efficient for assets that are not frequently updated. If you want to always provide the latest version of an asset, then you can use Network-first. You can also dictate assets that must only be fetched from the cache or network. Stale-while-revalidate is a good approach for assets that are updated frequently but still need to be cached

  • Determine what's most important to cache first. Everything might be cacheable but what's the most important thing to cache first? For example, for layout and styling, you want to cache stylesheets first, images then fonts and scripts.

  • Determine what to pre-cache. Cache the essential static files - styles, images, fonts - of the application as soon as possible. The best timing to do this is when the install event is triggered. Again, these should be the things that are most important to cache.

  • Determine how long to cache. Now for files that do not change for a long time, cache them for a long time. For example banner images, icons, and other static files that do not change often. If you are always evolving the user interface, for example, then, cache the needed styles for a short time. Network-first cache strategy comes in handy.

Adding the new PWA Web Capabilities

The capabilities project is a cross-company effort with the objective of making it possible for web apps to do anything native apps can, by exposing the capabilities of these platforms to the web platform, while maintaining user security, privacy, trust, and other core tenets of the web. Learn more here: web.dev and try them out here: docs.pwafire.org

Once you figure out the above building blocks, you can start adding the new PWA Web Capabilities. Stuff like push notifications, badging, web share, share target, contacts picker, and more. All these APIs allow you to make your application more interactive and engaging. You can even add your own custom APIs that provide a more native experience.

The UI of a Progressive Web App must be Progressive

With the goal of PWAs being to allow web applications to do anything a native application would do from simple stuff like installing to using, you need to make sure that the user experience is as good as native as well.

The User Interface of a Progressive Web App must be Progressive. That means that the user experience must be as good as native. Th experience from installing, launching, and using an installed PWA

A good number most used web applications have built this into their web apps. A good exmaple is the Twitter Web App. It's a Progressive Web App that allows you to interact with Twitter from your web browser. You can not tell the difference between the Twitter PWA and the native Twitter app once installed.

And that's it folks. Wanted to make this readout as short as possible, so if you have any questions, feel free to hit me up on twitter @mayeedwin or head back here for more articles : read.pwafire.org

Cheers!

Author : Maye Edwin

Return to home page