The essentials of a powerful PWA (Progressive Web App)
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?
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.
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.
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 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.
Learn to master the mobile web with Marfeel and Admonsters!