An Introduction to Progressive Web Apps

Introduction

If you work in the field of web development, it’s likely that you have heard the term ‘progressive web app’ mentioned. Progressive web apps, or PWAs, are loosely defined as web applications that give users an experience comparable to a native application rather than a typical website. PWAs include attributes such as responsiveness, offline usability, heightened security and installability. Developers are beginning to transition their websites into PWAs to take advantage of these modern features and improve overall user experience.

Unofficial Progressive Web Apps Logo

How Does it Work?

Whenever you visit a website containing a PWA-- assuming you are running compatible software (I’ll touch more on this later)-- the browser will prompt you, asking if you would like to install the PWA as an app. Users then have the choice to install the app or continue using the website within their web browser.

Assuming you’ve decided to install the app, it will become accessible either from within your browser’s app menu or from your desktop/home screen. From here you may launch and use the app as if it were any other native application.

PWAs vs. Native Apps

There are several advantages to developing a PWA instead of a native application. Since it’s essentially still a website, PWAs are easier to create than native applications. They take up substantially less storage on a device than most native applications. Another advantage is SEO. Because PWAs are still regular URLs, sites like Google will index them. Assuming your PWA is properly optimized, your SEO will typically be better than a normal website.

Choosing to create a PWA also has its disadvantages. You will inevitably miss out on some traffic in the App Store/Play Store th if you choose to only create a PWA. PWAs have also been reported to use more battery power over time when compared to native apps. Native apps are going to be more powerful than PWAs simply because they have better access to the device’s true processing capabilities. You will also have access to other features such as geofencing. Mobile app stores have strict security requirements that may go overlooked if you choose to go with a PWA.

Choosing to create a native app has its disadvantages as well. They typically take much longer to build than PWAs, especially if you’re not familiar with languages like Objective-C or Java.

Compatibility

Upon doing research on PWA compatibility, I found it quite difficult to determine an exact set of minimum requirements. While it is likely that you are already running compatible software, you can verify by checking your browser/OS below:

Chrome 40 or higher, Safari 11.1 or higher, Firefox 44 or higher, Edge 17 or higher
iOS 11.3 or higher
Android 7.0 Nougat or higher

Android devices, especially when compared to iPhones with older versions of iOS, will allow deeper integration with PWAs. Most desktop browsers will function comparably to one another.

Requirements

Any website can be turned into a progressive web app. To get started, you will want your site to meet the following requirements:

Your site needs to be served over HTTPS. This is good practice for any websites you host as it is the modern standard for security and trust.
Your site needs a Web App Manifest. This is a JSON file that describes your PWA to the browser and provides instructions as to how it should function when installed.
Your site needs a Service Worker. This will be the core of your PWA, driving functions such as offline usability, push notifications and background sync. This step can be complicated if you have not used service workers before, but there are plenty of guides online that can help you.

Features to Include

While your PWA only needs to meet the requirements listed above to function, you will still want to incorporate several key features in your site to make it truly operate as a progressive web app.

You want your PWA to be responsive. Responsive web design enables your website to remain attractive and usable on all platforms and screen sizes/orientations. This is especially necessary for mobile users.
You want your PWA to be installable. Making your PWA install like any other app allows users to engage better as they will treat it less like a website and more like one of the other apps installed on their device.
You want your site to be compatible with any browser. Branching out your site’s compatibility to work in all major browsers and even ones that may no longer be supported will help you maximize your potential user base.
You want your PWA to be usable offline. This not only makes your installed app feel like other native apps (which typically function to some extent without an active internet connection), but also allows those with slower internet speeds to have the majority of the site cached for quicker loading times when visited later.
This last one probably seems like a given, but you want your site to be fast. Employing the features listed above will generally help your site become more efficient, but the basis of how quick your site is all depends on effective web design. Learning optimal web design can be tricky, and even professionals can struggle with properly optimizing performance.
You want your site to be fully accessible. You can read more about the importance of having accessible websites here.
You want your site to be discoverable through search engines. This practice is called SEO, or Search Engine Optimization. There are many ways one can make their website easier to reach from search engines like Google, and Swirl Creative specializes in driving the biggest audiences.

Conclusion

Progressive web apps, or PWAs, are paving the way for faster and easier internet use. PWAs help blur the lines between native applications and web applications as well as implement cutting edge features that define the websites of the future. Choosing to turn your existing sites into PWAs or to program your future projects in this fashion will ensure a greater experience for your user base.