I am starting to learn about Progressive Web Apps (PWAs) as part a side project I’m starting. This post captures some of the research I’ve done on PWAs and how to get started with building one.

First off, you might ask, why are you considering PWA for your project? Well, the project is intended to serve both web and mobile clients. PWAs are cross-platform.

Secondly, my hope is to avoid the morass of having multiple code bases – especially for the native mobile platforms. PWAs are built using the language of the web: HTML, CSS, and JavaScript.

So it seems that building a PWA may serve my purposes. Only by digging in and building one will I answer some of my other unanswered questions. Questions like:

• How can users find my app and install it?
• How will it perform compared to a native app?
• Can I tap into and use device specific features?
• What’s the best way to monetize my app?

So, if you have an interest in PWAs, follow along with me while I learn the ins and outs of what it means to build Progressive Web Apps.

1. What is a PWA?
2. How Do PWAs Differ from Native Apps?
3. Picking a Framework
4. Getting Started Resources

What is a PWA?

A Progressive Web Application (PWA) is a type of web application that combines the best features of traditional web pages and mobile applications. They’re designed to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Key characteristics of PWAs include:

1. Responsiveness and Cross-Platform Compatibility: They are responsive and function well on desktops, mobiles, and tablets regardless of screen size.
2. App-like Interface: PWAs provide an app-like user experience, using modern web capabilities to deliver an app-like feel and functionality.
3. Offline Capability: They can work offline or with limited internet connectivity, thanks to service workers that cache important assets and data.
4. Fast Performance: PWAs are optimized for speed and efficiency, enhancing user engagement.
5. Push Notifications: Like native apps, they can send push notifications to users, increasing engagement.
6. Safe and Secure: They are served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
7. Discoverable and Installable: PWAs can be found through search engines and can be “installed” on a device’s home screen, making them easily accessible.
8. Linkable and Shareable: They are easily shared via a URL and do not require complex installation.

In essence, PWAs aim to deliver a high-quality user experience, combining the accessibility of web pages with the capabilities of native applications.

How Do PWAs Differ from Native Apps?

Progressive Web Applications (PWAs) and native applications have several key differences, largely stemming from their underlying technologies and distribution methods. Here are some of the primary ways in which they differ:

Development Language and Tools:

• PWAs: Developed using standard web technologies like HTML, CSS, and JavaScript.
• Native Apps: Developed using platform-specific languages and tools, such as Swift or Objective-C for iOS, and Java or Kotlin for Android.

Platform Compatibility:

• PWAs: Cross-platform and can run on any device with a compatible web browser, regardless of the operating system.
• Native Apps: Generally platform-specific and need to be developed separately for each operating system.

Installation and Updates:

• PWAs: Accessed via a web browser and can be added to a device’s home screen without downloading from an app store. Updates are handled seamlessly through the web.
• Native Apps: Downloaded and installed through app stores like Apple’s App Store or Google Play Store. Updates need to be downloaded and installed through these stores.

Performance and Capabilities:

• PWAs: Generally faster to load and use less device storage than native apps but might have performance limitations compared to native apps, especially for complex tasks or graphics-intensive applications.
• Native Apps: Typically offer superior performance and can more fully leverage device hardware and features like GPS, camera, and gestures.

Access to Device Features:

• PWAs: Limited access to device features and APIs compared to native apps. While recent advancements have expanded their capabilities, they still have restrictions, especially in areas like advanced camera controls, Bluetooth connectivity, and background processes.
• Native Apps: Full access to device APIs and features, allowing deeper integration with the device’s hardware and software.

Monetization:

• PWAs: Monetization strategies can include advertisements, subscriptions, or purchases but lack the integrated payment systems provided by app stores.
• Native Apps: Can use the app store’s built-in payment systems, which can simplify in-app purchases and subscriptions.

Discoverability:

• PWAs: More discoverable through search engines as they’re essentially websites but might be less visible in contexts where users are accustomed to searching for apps, like app stores.
• Native Apps: Prominently featured in app stores, which can be a key discovery channel for many users.

Offline Functionality:

• PWAs: Can offer offline functionality using service workers, but this is typically limited to caching content and basic app features.
• Native Apps: Can provide extensive offline functionality, storing significant data and performing complex operations offline.

Security:

• PWAs: Served over HTTPS, ensuring a basic level of security and data integrity.
• Native Apps: Must pass app store security checks and can implement advanced security measures due to deeper access to the device’s operating system.

User Engagement Features:

• PWAs: Can use features like push notifications and background sync, but with some limitations compared to native apps.
• Native Apps: Have full access to push notification systems and can run background tasks more freely.

Each type of application has its strengths and is suited to different types of projects depending on the requirements, target audience, and specific functionality needed.

Getting Started Resources

To start myself off, I’ve sought out some “getting started” resources, which I’ll include here so that you can reference them as well. Since I work with Microsoft technologies a lot, I started there. I found this video from Microsoft (https://youtu.be/BByUknfLTuA?si=gPVWw_uNs8Wh-XoK). This is part 1 of a 17-part series covering PWAs.

I want to be well informed and follow the best practices. Below is a list of online resources that you can also use to learn more about building PWAs.

Google Developers – Web Fundamentals: PWA

• Link: Web Fundamentals – PWA
• Description: This is a comprehensive resource provided by Google, covering various aspects of PWA development. It includes guides on creating reliable, fast, and engaging PWAs, with a focus on core principles and best practices.

MDN Web Docs – Progressive Web Apps

• Link: MDN Web Docs – PWAs
• Description: MDN Web Docs offers a detailed introduction to PWAs, including their advantages, architecture, and how to build them. It’s a great resource for understanding the fundamentals and getting practical advice.

Microsoft – PWA Builder

• PWA Builder
• PWA Builder from Microsoft helps you to start building a PWA quickly. It provides a tool to generate the necessary service worker and manifest file for your web app, turning it into a PWA.

Udacity – Progressive Web App Development

• Udacity Course
• This course, offered by Udacity in collaboration with Google, provides a hands-on learning experience. It covers the creation of PWAs, focusing on offline functionality and the use of service workers.

Coursera – Building Progressive Web Applications (PWAs) Specialization

• Coursera Specialization
• This specialization, offered through Coursera, provides a series of courses that guide you through the process of building a PWA. It covers various aspects including service workers, web manifest, and creating a responsive UI.

Based on the list above, I’ve decided to start with Microsoft’s PWA Builder and see where it gets me.

Now it’s time to get building, so I’m going to dig in today. I’ll post more about my experience building a PWA in an upcoming post.

Stay tuned!