What Is a PWA? A Complete Guide to Progressive Web Apps for Beginners

In this article, we'll introduce what Progressive Web Apps (PWAs) are, their core principles, and how they differ from web apps and mobile apps.

We also hope this will help those trying to decide between a PWA, a responsive website, and a native app.

Let's get into it!

1. PWAs Were Born from the Evolution of the Web

The web has changed dramatically over the past few years. In the early 2000s, web pages resembled newspaper articles or encyclopedia entries, but over the following 10 years they evolved into far more sophisticated blogs, video platforms, and e-commerce sites.

With the rise of smartphones, more and more users began browsing the web on mobile devices. Mobile apps quickly overtook websites in digital media usage — because apps offer richer functionality and build stronger relationships with users, companies shifted their focus from websites to apps.

On the other hand, according to the US Mobile App Report 2017, half of smartphone users hadn't installed a single new app in the past month.

The next big thing on the web, Progressive Web Apps (PWAs), aim to combine the capabilities of mobile apps with the accessibility, discoverability, and ease of use that form the foundation of the modern internet.

2. What Are Progressive Web Apps (PWAs)?

Progressive Web Apps (PWAs)

A PWA, or Progressive Web App, is a type of application software delivered through the web, built using common web technologies such as HTML, CSS, JavaScript, and WebAssembly. It has the following characteristics.

PWAs aren't a specific set of technologies — they're a user experience focused on native-like behavior while preserving the accessibility of the web platform.

PWAs aren't tied to any specific framework — you can build one with any framework, or with no framework at all. Rather than starting with which framework to use for PWA development, it's best to approach it from the perspective of mindset, approach, and design first, and consider frameworks and APIs last.

When developing a PWA, it's fine to follow a similar process to regular web development. Typically, the following pattern emerges.

PWAs embrace the growing expectations placed on the web platform and try to deliver the best experience possible.

For most people, the minimum requirements to call a web application a PWA are the ability to run offline (at least being able to open the app while offline) and the ability to be added to the home screen.

However, please understand that simply adding these features doesn't automatically turn a web app into a PWA — it may still lack the feel of a native app.

3. Core Principles of Progressive Web Applications (PWAs)

Core Principles of PWA

3.1. PWA Core Principle 1: Reliability

3.1.1. Offline Support

When launched from the home screen, a PWA can start up regardless of network status. This is achieved by having a service worker running on top of the client-side JavaScript code. Typically, the following scenario plays out for a PWA.

• The user opens the application for the first time.
• The client-side JavaScript code registers a Service Worker.
• The Service Worker fetches and caches the resources needed to display the web application.
• The next time the application is opened, the Service Worker intercepts the network requests made by the browser to download the resources needed to display the page (including the initial server call for the HTML file) and can respond with the cached version whenever appropriate.

A PWA doesn't need to display all of its information while the user is offline — simply showing a message that the network is down is often enough. That said, offline support can mean much more depending on the application.

For example,

• A news app could cache the most important or personally relevant articles every time it's opened, letting users read them whenever their connection is offline.
• A messaging app could save recent messages as they arrive so users can browse them offline.
• A collaborative spreadsheet app could save recent documents so they sync once the user's connection comes back online.

Offline support also isn't limited to using a Service Worker — it starts with designers and product owners thinking through what the app should do while offline.

3.1.2. Slow Network Conditions

A PWA needs to work even under slow network conditions. Just as with a mobile app, in-app navigation should stay smooth regardless of bandwidth-related delays.

Once again, a Service Worker can handle such scenarios by caching lazily-loaded routes.

In addition, when the network must be used to display resources, skeleton screens can be used to show progress.

3.2. PWA Core Principle 2: Performance

Performance is a critical metric for any web application. Google reports the following.

• 53% of users abandon a site if it takes longer than 3 seconds to load.
• When page load time goes from 1 second to 3 seconds, the bounce rate increases by 32%.
• When page load time goes from 1 second to 5 seconds, the bounce rate increases by 90%.

3.2.1. The RAIL Model

Google's performance engineers developed a universal model for measuring performance called RAIL.

RAIL is a user-centered model built by studying the interaction between computer programs and people. The goals it sets can be applied to any user-facing software program — websites, mobile and desktop applications, video games, and more.

RAIL is an acronym representing the key performance metrics.

• Respond: Respond to user input within 100 milliseconds.
• Animate: Animations should run at 60fps.
• Idle: Maximize idle time.
• Load: Show content to the user in under 1 second and become interactive in under 5 seconds.

3.2.2. The PRPL Pattern

Applying the PRPL pattern goes a long way toward achieving the goals mentioned above. PRPL stands for the following.

• Push: Push critical resources for the URL route.
• Render: Render the initial route.
• Pre-cache: Pre-cache the remaining routes.
• Lazy-load: Lazily create and load the remaining routes as needed.

3.2.3. Performance Measurement Tools

Manual measurement tools

• Browser dev tools: Google Chrome currently offers the best performance tools available.
• Benchmarks such as JSPerf.com, ESBench, and Speedracer for Chrome
• Analytics help track real user performance for both websites and web applications across different platforms.

Automated measurement tools

• Lighthouse automates the performance testing process and can also run on a CI server.

3.3. PWA Core Principle 3: Engagement

A PWA needs to feel like a native app and have the capabilities of one.

On all major mobile platforms, a PWA can be installed to the user's home screen and opened without showing browser controls. On desktop platforms, a PWA can be added to the taskbar or dock, or have a shortcut added to the desktop, though at the moment it can still be opened in a browser.

The web platform has grown tremendously and now offers APIs for capabilities such as the following.

• Geolocation
• Camera
• Push notifications
• Native platform payments (Apple Pay, G Pay, etc.)
• Vibration
• Bluetooth
• USB and more

4. PWA Case Studies

PWAs can dramatically improve user engagement and conversion. Shorter load times and faster interfaces lead to longer, more compelling interactions that move the needle on key metrics.

Pages per session, session length:

• Twitter saw a 65% increase in pages per session and a 75% increase in the number of tweets sent.
• AliExpress saw a 100% increase in pages accessed and a 74% increase in time spent per session.

Conversion rates:

• AliExpress increased its new-user conversion rate by 104%.
• Trivago improved its click-through rate on hotel offers by 97%.
• OLX boosted its ad click-through rate by 146%. Using push notifications increased user re-engagement by 250%.
• Treebo quadrupled its conversion rate,
• Alibaba increased conversions by 76%.

Bounce rate:

• OLX reduced its bounce rate by 80%.
• Housing.com lowered its bounce rate by 40%.

Reference: A Detailed Look at 12 PWA App Case Studies

5. Feature Comparison of PWA Across Platforms

Although the web platform has grown significantly, some devices still don't support basic mobile app features.

• Push notifications are fully supported on Android — meaning the device can still receive notifications even after the app and browser are closed. On desktop devices, notifications are only received while the browser is open (you can close the website, but the browser must still be running). On iOS devices, browser push notifications aren't supported at all.
• Background location services aren't available in browsers, meaning you can't build apps that automate certain tasks based on location (such as home control systems).
• Bluetooth, USB, and NFC are only supported in the Chrome browser.
• Device authentication is still under development — there's currently no way to authenticate and/or authorize users on the web using fingerprint, Touch ID, or Face ID.

While some important features may be missing, this doesn't mean the principles PWAs should follow can't be applied to native apps (especially ones built with web technologies like React Native).

Because PWAs focus on delivering a great user experience, any app can follow the goals it sets out to achieve and still appeal to users.

Reference: PWA vs. Native App: Comparison and Selection Criteria Explained

6. Requirements Overview to Start PWA Development

Getting started building a PWA doesn't take long. With just a handful of essentials, you're ready to go.

Tools: The best-known technology for developing PWAs is AngularJS. Others include ReactJS and Polymer.

HTTPS: You need a server with an HTTPS connection. This ensures your users' data is protected and adds a layer of security to your site.

Application Shell: This shapes the user's first impression when the app loads. Simply put, it's what a user sees the very first time they interact with your app.

Service Workers: One of the core technologies behind PWAs. It supports offline operation, performs advanced caching, and runs background tasks.

Manifest file: This is a JSON file created with a generator. It contains information about how the PWA looks and behaves, letting you define the PWA's name, description, icons, colors, and other features.

App auditing: This is possible using the Google Lighthouse tool. Because Lighthouse is open-source software, anyone can use it on any web page. Google is a strong advocate of PWAs and is pushing them as the future of the web. Lighthouse lets you check your PWA's speed, accessibility, and SEO readiness.

7. Summary

This article gave a brief introduction to Progressive Web Apps (PWAs).

More companies (including developers) in the US are exploring and adopting PWAs, but the Japanese market is still some way behind.

Because of this, there are times when senior-level resources capable of developing PWAs are in short supply. Beyond development itself, you'll also need to handle updates and new features after launch, so make sure to secure a solid team structure.

Miichisoft has both a web development team and a team capable of handling PWAs, so please feel free to reach out if there's anything we can help with.

We look forward to hearing from you.

Thank you.

Sources:
　　　freeCodeCamp (What is a PWA? Progressive Web Apps for Beginners)
　　　BrainHub (Progressive Web Application (PWA) – Beginners' Guide)