The Progressive Web Apps (PWA) technology developed by Google has been available to the public for almost a year, but relatively few people outside the world of hardcore developers are aware of what exactly they are, and how they can use them to their benefit.
It’s important to recognize that there are a few different concepts bundled up into the term “Progressive Web App” and that these individual parts have been available in one form or another before being tied together under one package. Those parts are: Service Worker, App Shell and JSON Manifest.
The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
The Service Worker
The single most interesting component is that of the service worker script. This script acts as an additional layer between the website requests and the internet servers around the world.
Image sourced by Google and modified by author.
It is also responsible for caching content when a visitor browses a PWA enabled page, and stores that data locally on the visitor’s device, whether that is a mobile phone, tablet or desktop computer.
This means that every time we click a link on a website with a Progressive Web App, the request will pass through the service worker script and then based on the rules set forth, will go online and ask for a new web page.
Alternatively, if the user is offline it is possible to have the service worker serve a cached page from the local storage, meaning that we can now design websites that will work 100% when browsed offline, as long as that user has been to the site at least once before.
While the idea of caching content and serving it to users without internet access is not by any means a new one, the combination with an app shell is powerful and offers entirely new ways of thinking about web development.
The App Shell
This is similar to how mobile applications are being developed, where all design rules, stylesheets, images, fonts and scripts are being contained within a wrapper called the app shell.
For Progressive Web Apps, this is an incredibly useful concept to take advantage of, because this data can be considered static and thus can be cached once and retrieved at any given point for optimal performance.
Most websites that are serious about their users, or just optimizing for SEO, will be caching their content already. But the general trend is to do so on a page-by-page basis, having automated scripts cache the content and thus the quality and compression will vary even on the same site from page to page.
With an app shell, once it is set up, developers will use the same basic functionality for all content and pages, and in combination with both a service worker for routing and caching, a Progressive Web App set up correctly outperforms both traditional websites and mobile applications.
The JSON Manifest
The JSON manifest is probably the most commonly used feature of the three listed so far. This is basically a structured dataset of information saved on the web server.
For Progressive Web App purposes, we use this manifest file to declare certain parameters about how users will see an app, and it’s in this file we indicate where the icon is located, the name of the Progressive Web App and such things.
Since users get the option of downloading the PWA to home screens on their devices, this is how the devices will know what to call the app, and what image to use for the shortcut icon.
Compared to the other two points, the JSON manifest is easily developed, and once done will only require updates if you change the title of the web app, or update the icon graphics, etc.
Summing up So Far
We have the service worker, which is responsible for caching content, and managing offline functionality, as well as routing all browser requests to the correct source.
Then there’s the app shell which is a wrapper containing all stylesheets and other relevant static content such as images, scripts and so forth.
And then there is the JSON manifest, which is simply a small set of structured data which lets devices and browsers know what to call the Progressive Web App, and what images to use for icons.
There’s quite a few advantages to using these concepts, and the following points and explanations should hopefully illustrate the possibilities and reasons for using a Progressive Web App.
Add To Home Screen
Once a user has visited a Progressive Web App-enhanced website twice, Google Chrome and other browsers supporting the technology will prompt the user to install the PWA on their devices.
Studies have shown more than 11.5% of a website’s visitors will, in fact, install the app, so it is even possible to roughly estimate how many users the PWA will reach by just using existing analytics data.
A Progressive Web App prompting the visitor to add the app to their home screen.
Improved Performance Compared to Mobile Apps and Websites
According to a Google study where they benchmarked and analyzed a number of websites, there are significant performance increases to using Progressive Web Apps. On average, there was a 30% decrease in page load times for desktop users, and a 22% reduction for mobile users.
This has resulted in other metrics being positively affected as well, but to keep on topic, this benefits users browsing from 2G and 3G networks the most, although every single user will appreciate a faster loading website.
Possibility for a Fully Functional Offline Version of an Existing Website
Some websites will not need this functionality, while others may wish to implement a completely offline version of their pages. So far we see that most websites simply create a custom offline message screen, such as Opera.
Users can install the PWA like a normal app, but does not require App Store submissions.
While we touch on why this can be considered a disadvantage in the next section, it can be a positive thing because developers can deploy updates and webmasters can push new content instantly compared to mobile apps having to wait for App Store and Google Play review times.
Option for Users to Enable Push Notifications & Receive Updates
Another exciting feature is that we can now use push notifications for all users having installed Progressive Web App. In fact, the previously mentioned Google study found that more than 58% of users having installed the PWA to their home screens also authorized the PWA to show push notifications.
Content Can Be Linked to, and Search Engines Can Crawl and Display the Content as Well
Unlike mobile applications, this means we can optimize for SEO on each page, and attract traffic like normal websites.
Depending on the particular site and project in question, this might just be a game-changer.
Adopters Report Great Results on Conversion Rates, Page Load Times, and User Experience.
By going over the individual showcases on Google’s Developer pages, we see businesses such as AliExpress having more than 70% increases in their conversion rates after adopting PWA’s.
Konga has seen a 90% decrease in their page sizes since implementing service workers and caching, and FlipKart has more than tripled time on their site compared to their native mobile application.
WordPress Users Can Use Mozilla’s Free Plugins for Rapid Installation
For all people fond of WordPress, Mozilla has released quite a useful package of plugins. In total they’ve released four plugins that can be found here.
These plugins will assist in creating a progressively enhanced WordPress website, and are almost ready out of the box, except for the theme shell, which will require some customization for obvious reasons.
Where there is good, there is also bad. As with almost anything else in this world, there are certain disadvantages connected to implementing a Progressive Web App on a website these days.
Not All Browsers Support Service Workers
Google Chrome, Opera and Firefox all support service workers and Progressive Web Apps, but Microsoft’s Edge and Apple’s Safari browsers have yet to implement these features, meaning that users on those browsers will not see the benefits.
On the other hand, no error messages will be shown either, unlike the dreaded websites with Flash extensions for instance.
No App Store / Google Play Entries
Since these Progressive Web Apps are not submitted to app stores, some people are worried about the fact that they are missing out on the millions of daily users browsing through the list of apps, discovering new and exciting ones.
While a tiny percentage of apps are found this way, the majority of apps are downloaded because of a marketing campaign, via a link on the website affiliated with the app, or through other means. Also, by taking a look at the below graph, you will notice that unless an app is on the very top of the store charts, there are microscopic to get in terms of exposure.
Image courtesy of Charles Perry
Limited Hardware API Access
Since Progressive Web Apps run on standard web server languages, such as HTML5, there are the inherent limitations in terms of API hardware access to devices. While we can use certain features, such as the Camera, Accelerometer and Microphone to name a few, there are other functions we don’t yet have access to, such as fingerprint scanning and more.
Depending on the specific needs it might be better to develop a native mobile application, but for the majority of websites in existence, the currently supported hardware functions should be more than adequate.
Can Be Difficult to Find a Developer with an Extensive PWA Portfolio
While larger corporations with in-house developers might not consider this a disadvantage at all, small businesses looking to outsource development might have a hard time finding a developer with a decently sized portfolio of Progressive Web Apps, simply because the concept is so new.
While there are both negatives and positives with Progressive Web Apps, for most websites it could be argued that the benefits outweigh the disadvantages, especially since non-supported browsers will still show the regular content, and thus create no noticeable errors or other incompatibility issues.
However, if the majority of visitors use Safari as their browser, and Firefox, Chrome and Opera users are comparatively low, it makes sense to wait before implementing this technology until Apple add support for service workers in their browser.
It is also worth mentioning that native mobile applications will still have their use compared to Progressive Web Apps, in part for tapping into hardware capabilities, for providing universal support and security for enterprise level applications, and possibly even for apps looking to add monetization, especially subscription based ones.
- Tips for Creating a Truly Functional Mobile Experience
- Native Apps or Web Apps?
- Mobile Web & App Development Testing & Emulation Tools
- 15 Useful Free Android Apps for Web Developers
- Exploring Mobile Device and App Development Trends
- Designing a Mobile Stylesheet for your Website
- 10 Innovative Navigation Examples in Mobile App Design
- 15 Free Gesture Icon Sets for Mobile App Designers