Jon Fletcher 2020-06-17

The essentials of a powerful PWA (Progressive Web App)

Screenshot_2020_06_17_at_10.59.14.png
Despite all the news about the takeover of PWAs from both traditional mobile websites and mobile apps, you can be forgiven for asking just what exactly a PWA is — and why you should care about them. 

In this blog post, we're going to give you all the information you need about PWAs (progressive web apps), how to create a PWA, and how it can have a major impact on your mobile publication. 

What is a PWA?

PWA stands for Progressive Web App. It is effectively an application delivered through the web, built using HTML, CSS, and JavaScript. Works like a website; feels like an app. 

During the rise of the mobile web native apps were able to offer much richer experiences for users than web pages. Native apps could read and write files from the local file system, access hardware, and access device data. But, they have to be found, installed, updated, and maintained across different device types. 


So, companies wanted the rich, app-like experience without the development work— and still be searchable. Web applications seemed a good alternative. Web apps have been available for mobile devices from the start. But, normal web apps were slow, feature-light, and suffered from lower adoption compared to native apps. 

Progressive web apps are the evolution of traditional web apps. Now, PWAs work in any browser. Their "app-like" features — such as being available offline, installed to home, and push notifications— depend on modern browser features service workers and web app manifests to deliver. This helps the PWA deliver the core functionality and keep their own codebase lightweight and page load lightning fast. 

The essentials of a powerful PWA 

So with a broad definition of PWAs as 'a website that behaves like an app' settled, we can look at the technical specs needed to be an official PWA. 

For a PWA to be classed as a PWA it needs to be capable, reliable, and installable. This means, according to Google Developers, PWAs have to meet the following technical baseline: 

  • Originate from a secure origin. 
  • Load at least one offline page when requested offline. 
  • Utilize service workers to load this offline content.
  • Reference a web app manifest with four key properties: name, short_name, start_url, and display
  • Contain an icon at least 144 × 144 large in PNG format.

From there, we have 'characteristics' of a PWA. The more of these your app meets, the higher it will test in Google's PWA compatibility score in Lighthouse - and the more value your users will get from the app. 

  • Universal - PWAs need to works for every user and every browser 
  • Responsive - Has to adapt to fit any shape or form 
  • Cache elements for faster loading - After the first load, repeating content and page elements should not be re-downloaded.
  • Offline access - Service workers allow offline uses, or on low-quality networks. App-like experiences - Feels like an app to the user with app-style interactions and navigation.
  • Dynamic content - Content should be refreshed using the service worker update process.
  • Secure - PWAs have to be served via HTTPS to ensure content security.
  • Discoverable - PWAs are Identifiable as an "application" and discoverable by search engines.
  • Push notifications - Using web push, PWAs can use push notifications 
  • Save to home screen - Provides the option to save the app as a home screen icon without going through an App Store.
  • Linkable - Can easily be shared via a URL.

So, with all of these caveats to meet in order just to be classed as a PWA, publishers might be asking why they should bother. Well, there are many advantages of PWAs for the creators and developers as well as the final user. 

Why should you create a PWA?

The best motivation to create a PWA is to give your users a better experience, without the time, money, and updates required. 

But in addition, the characteristics that make a PWA a PWA are the things that make them more enjoyable to use. They are lighter, faster, and they feel like an application or part of the phone.

In fact, many sites you currently visit are PWAs. Taken from Google's own reports on the user engagement effects of PWAs, we can see how Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%.

After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users.

Taken from the Google Web Developer's report, you can see the massive impact switching to PWA technology had on performance:



And if you're thinking that you can get the same effects from switching from a web page to a native app, there are many advantages of PWAs over native apps, aside from the cost. 

PWAS                                                                                 

  • PWA are available via an icon on the home screen.      
  • No App Store requirements or installation                      
  • PWAs pre-cache key resources and elements               
  • Reduces reliance on a network for faster load times      
  • No need for users to update versions for improvements and fixes       

Native Apps

  • Native application need to be known, searched, and installed
  • Require different versions to suit different platforms
  • Consume space on a user's phone
  • Used offline but requires a connection for updates
  • Need users to actively update for fixes and improvements

So, if you want to help your online experience engage your audience, a PWA should be part of any publishers' considerations. 
You can learn more about building a high-speed PWA in our playbook to mastering the mobile web. 



Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email