A guide to progressive web apps

Progressive Web Apps (PWA) are a one-stop solution to create a remarkably powerful in-app experience compared to regular websites and apps. A better user experience and faster loading speed are a few of the many ways PWA can help your content rank higher in search engines.

In this guide, we will define a progressive web app (PWA), its benefits backed up with case studies, how to create a PWA, and reveal key PWA publishing strategies.

What is a Progressive Web App?

A progressive web app is a type of website that is designed to provide users with a native app-like experience, regardless of whether the user is on a desktop computer or mobile device.

PWAs are created with HTML5, CSS, and JavaScript code hosted on web servers and run in web browser engines.

Apps can be used directly in a web browser or downloaded from an app store and installed on a device.

Why are Progressive Web Apps superior to Standard Apps?

PWAs are websites with native mobile app functionality so there’s no need to create a separate app for either Google Play or Apple app store.

Modern capabilities such as push notifications, secure connections, caching, offline mode, and the ability to use components such as a phone’s camera are still included.

Plus, PWAs are tuned for peak performance, responsiveness, and website loading speed providing users with a smooth experience that keeps people coming back to your site.

Can AMP and Progressive Web Apps coexist?

Accelerated Mobile Pages (AMP) and PWAs can work together by sending people to an AMP page first, then the next click takes them to a PWA page. This ensures that a page opens fast, and continues to run smoothly.

If AMP pages already exist, it’s possible to use AMP as a data source instead of using a JSON file, HTML, or other rich data sources. Follow this guide to learn how to create AMP pages using WordPress.

Both PWA and AMP can assist publishers with increasing page views, improving user experiences, and providing a platform to connect with the right people directly.

Benefits of Progressive Web Apps for Publishers

Publishers can profit from the potential of PWAs without paying the 30% commission fees for the Google Play and Apple Store. Currently, it’s more challenging to set your app apart from the competition. Worse yet, even if users do download your app, they usually only use it a few times before losing interest.

Publishing industry titans around the globe are already reaping the benefits of PWAs such as:

Denmark: Smashing Magazine, Zuperkülblog

United States: Billings Gazette, Flipboard, Forbes, Medium, Twitter, The Weather Channel, Pinterest, Trivago, Spotify, Uber, and Starbucks

United Kingdom: Financial Times, Sports Mole

The Google Chrome Developer tools site states that progressive web apps have 12 key benefits.

There are 12 key PWA benefits to publishers.

Readers accessing content offline
SEO-optimized apps unlike regular apps
Monetize the audience with various ad formats
Push notifications to stay in touch with subscribers
3x your loading speed
Lower build costs and upkeep
Implement one feature at a time
Upgraded apps don’t need to be re-published
No need to pay commission to any app stores
Same user experience as a native app
UI that adapts to desktop, mobile, and tablet devices
HTTPS-level security

Progressive Web Apps Drive Publisher Growth

Pinterest realized that a slow web experience was sabotaging their signups, logins, and native app installs, with only a 1% conversion rate.

Research credit: Addy Osmani

Twitter discovered that some people do not use their mobile app because their internet is too slow or they need more memory to download it. Most users prefer not to use a standard website to tweet, post, and comment.

Twitter eventually built a PWA because the benefits of instant loading for videos and images, lower data consumption, and other features provided by a modern website with native app features were too compelling to ignore.

Research credit: pwastats.com

Trivago thought it was too risky to build a mobile app because many people had trouble with poor internet connections.

Offline mode, push notifications, and a home screen shortcut were all on Trivago’s wish list, so creating a PWA was the obvious choice. The results speak for themselves.

Research credit: pwastats.com

Steps to creating a Progressive Web App

Creating a progressive web app isn’t as complex as it sounds.

There are 2 key components that need to be added to a regular website’s HTML code in order to create a PWA successfully: a manifest and service worker files.

Follow these 8 steps to make a basic PWA in under five minutes:

Step 1: Create an HTML page

Make an HTML page that will act as the launchpad for the application. There will be a link in this HTML pointing to a crucial file called manifest.json.

Step 2: Create a web app manifest

A web app manifest is a simple JSON file [manifest.json] that contains the information a browser needs to make your website look and feel like an app, such as the name, author, background color, and icon.

To make a JSON file, you will need to create a file with the extension “.webmanifest” and add the desired metadata of the operating system.

Step 3: Create an icon folder

Place all the application-related symbols in the new images folder that you created. The icon’s size be at least 192 by 192 pixels and 512 by 512 pixels. The image’s identity and size should be the same as those in the manifest file.

Step 4: Directory

Use a live server to make all the files available in a directory.

Step 5: Open the Manifest

Navigate to the Application Area in the Chrome Developer Tools by opening the index.html file in Chrome. From the selection, select the manifest column.

Step 6: Include ServiceWorker.js

The manifest column will display that no service workers were found under the install tab.

That’s why another file called serviceworker.js must be created in the same directory specifically for the PWA. This file manages the configuration of a service worker which oversees the operation of the application.

Step 7: Link service worker to index.html

To accomplish this, a brief JavaScript script is added to the index.html file developed in the previous steps.

Step 8: Install the PWA

When viewing the Service Worker tab, you can see that the service worker has been properly registered.

Now you can use the PWA because there is an install choice available.

Following installation, the PWA would appear on the screen. The “Add to Home Screen” feature in the mobile browser can load the PWA on a mobile device. The PWA will then be installed on the device.

If these steps still sound daunting, there’s always a no-code PWA builder option.

Best pwa builders

Progressive Web App publishing strategies

Implement these publishing strategies to fine-tune a PWA for the best app-like experience.

An app strategy assigns different versions of a PWA based on a device’s performance, data storage, battery status, and internet connection. For example, a low-performing device would use a standard version, and a high-performing device will have all options enabled.
A caching strategy determines when the cache is loaded from the server or from the device browser. It considers the internet speed and availability, or if someone is using data saver mode on their mobile device.
Publish PWA to the Google Play Store and/or Apple App Store for marketing purposes
Activate shortcuts when a user presses the app icon a few seconds to save users time
Make it easy to find how to add a PWA shortcut to the home screen from a mobile web browser
Integrate payment API with Google Pay or Apple Pay
Enable login capabilities using Google, Facebook, or iCloud account since not everyone uses a password manager
Use message events to inform users about an update or auto-delete undesirable app files
Be prepared to uninstall and reinstall the Service Worker if it misbehaves
Allow users to download the PWA as a desktop program (not a shortcut) when using Google Chrome
Provide users with a share menu i.e. to share photos
Provide automatic updates of your PWA so users always have the freshest version

Conclusion

The future is progressive web applications, not traditional websites or native apps.

It’s easy to mistake a progressive web application for just another type of web app because of the name and downplay of its importance.

Using a PWA could possibly be the best decision you’ll make as a publisher.

Don’t let the competition grow faster than you. Now’s the time to propel your core user engagement metrics, ad click-throughs, and ad revenue to the next level.