Progressive Web Applications: Core Concepts, Why and How to Get Started (REAL) Quickly
As a huge fan of Property Brothers, two things I learned are, first: before any construction or home décor, you need to take care of the most important thing of a house: structure.
If your house is not well grounded, it will most likely not be functional, and the second thing is: you don’t necessarily have to waste great amounts of money on luxy look and feel. There are many options of materials that can give you a nice, luxy living space.
And taking this approach to a web development scenario, that’s the way I perceive Progressive Web Apps.
How’s that?
In modern web app development, we’ve got to make our app responsive so it can be viewed through different devices, so it makes web apps compete with native applications which certainly support more features like:
- Work offline
- Access to device resources
- Be available on home screen
But certainly, there’s a market of users that are not willing to install an app for particular reasons such as: the space that these apps use or the frequency they would use them, but still need these web apps available for being used with the tools they already use and an experience they are already familiar with.
Think about an app to search brunch restaurant recommendations in your area to celebrate a special occasion… Why would you install the app when you’re just searching for once?
It would be great if we could combine the best of both worlds and offer the user a native-like experience though web technologies.
In other words, we could go the PWA way.
What are Progressive Web Apps (PWA)?
In general, PWA is a terminology we use to describe a group of technologies and functionalities that you Progressively add to your app to improve it.
It gives your app all what it needs to be reliable, fast and cool so the users can have this native-like experience in the browser.
And since we mentioned structure, it is composed by 3 pillars:
- Manifest
- Service Worker
- Web app
Pillar 1: Manifest
This is a JSON (JavaScript Object Notation) file that tells the browser how the app should behave when it is installed on desktop or mobile device. A typical manifest file would contain information like your app’s name, icons the app should use, where the app should start once it is launched just to call out a few.
This file needs to be placed in your root folder and be referenced in all the HTML (Hyper Text Markup Language) pages of your app.
<link rel=”manifest” href=”/manifest.json”>
If you’re familiar with Single Page Applications (SPAs), you can assume you will need to do this just once (index file).
To test it, once you open your app in the browser and open DevTools > Application and you will notice the Manifest section, use it to test your manifest file is well set up.
Pillar 2: Service Worker
It’s a script that runs in the web browser and manages caching for your applications, so if the user closes the browser tab it will be preserved so next time user opens the app, it will load first and intercept the request to load the app.
In other words, service workers will allow the user to run the app offline.
Other capacities of a service worker are to support process payments feature, push notifications, geolocation, camera access, it’s huge!
You can test your service worker using DevTools pretty much as we’ve seen how to do so for manifest file:
Pillar 3: Your app!
In terms of creativity, the sky is yours! But since we are talking about mobile app experience, I’d suggest you cover these points in your design process:
Responsive web design
I energetically encourage you to follow a mobile first approach, rely on the use of media-queries and take advantage of properties like orientation and display-modes.
In my experience as a developer, I’ve used Ionic framework which not only provides you everything you need to make your app beautifully responsive, and scalable from web to mobile-native, its components are flexible to adjust to platforms between iOS and Android ❤️. Moreover, it doesn’t matter if you come from an Angular background 😍, or React or Vue, or just getting started into Front End world, there’s a CDN version you could use for playing around.
On screenshot below is the Ionic app builder online, but you can certainly do this from console as usual.
It will save you coding hours with much better results, you can see in below’s image comparison from the Fitness app demo we’re using for this entry, on the left side you can note the CSS-only version, which barely supports flexboxes to stack elements in mobile, and on the right hand we have the Ionic + Angular app with way more consistent and lean UI and its components have better support to user’s interactions.
You can go to https://flourishing-gingersnap-aadfad.netlify.app/ to interact with this demo.
For making this Ionic app a PWA, since I come from an Angular background, I added Angular schematic @angular/pwa to get support PWA. Reading React documentation, I found that React projects build come with the service worker and manifest files already, and you can choose to support offline-first which I think is amazing ⭐️.
For Vue, you can use @ vue/cli-plugin-pwa as per Vue docs.
Display modes
Did you notice that “display: standalone” property on the manifest.json in line 6? 👀 That’s how you choose to display your app, you have 3 possible values here:
- Fullscreen (this one would hide the browser options)
- Standalone, this one would replace the URL field with your app’s name.
- Minimal user interface, this will hide the navigation options in a dropdown. It is only available for Android and desktop and unfortunately, not supported by Safari browsers.
Fonts
As a best practice, I’d encourage you to keep your app’s fonts to the system fonts so it can be more aligned with user’s platform and keep the native look and feel.
Final thoughts
PWAs are not replacing native mobile apps, they’re an option if you’re being mindful of project budget, if you’re testing a new business model and want to come out faster into market or if you want to make sure your apps’ usable by offering a user-native experience without forcing your user’s to install a native app and go through app stores publishing process with the goodness of web technologies.
You can start small and progressively add more features so you can have a beautiful and functional app that offers your users a smooth, fast and reliable experience 🔥.
Resources:
You’re more than welcome to come and make PWA demo a better one. Fork repo here.
Deploying your PWA with Ionic framework (and everything you need to know about Ionic and PWAs)
