Mobile First - Building a Progressive Web App

Angular: The Full Gamut Edition

Charlie Greenman
April 27, 2021
3 min read
razroo image

Why Build a Progressive Web App?

When building a an enterprise application, think about building a Progressive Web App. It will allow your web experience to be built to feel as if it is a native app experience. Not only will it make it progressive, but it will make your users feel as if they are a part of an experience that is all encompassing.

The Technical Benefits of a PWA

  1. Progressive - Work for every user, regardless of browser choice because they're built with progressive enhancement as a core tenet.

  2. Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.

  3. Connectivity independent - Enhanced with service workers to work offline or on low quality networks.

  4. App-like - Use the app-shell model to provide app-style navigation and interactions.

  5. Fresh - Always up-to-date thanks to the service worker update process.

  6. Safe - Served via TLS to prevent snooping and ensure content hasn't been tampered with.

  7. Discoverable - Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.

  8. Re-engageable - Make re-engagement easy through features like push notifications.

  9. Installable - Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.

  10. Linkable - Easily share via URL and not require complex installation.

Kudos to Addy Somani for this List ^1

We will go into detail in the following chapters, into detail

Developing a PWA - The Toolset - An Overview

When Developing Mobile First, there are three tools, which will be particularly advantageous:

  1. Physical Mobile Devices [^2]

  2. Sauce Labs [^3]

  3. Chrome Dev Tools [^4]

    Developing a PWA - Software - An Overview

When developing a PWA, it is important for us to keep in mind, that there will be specific pieces of software to develop. Of course, there is an official PWA checklist ^5, but specific technologies, would be as follows:

  1. Service Worker

  2. Manifest

  3. Lighthouse

[^2]: A moment on which one's it is, that you should work on

[^3]: Section on why we chose Sauce Labs, over Browser Stack

[^4]: Section on why we chose Chrome Dev Tools, over Firefox

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.