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.
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
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.
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
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.