Progressive web apps (PWAs) could be the next big thing for modern mobile app development. This powerful tool combines the capabilities of a native app and the reach of a web application. They use modern APIs to deliver reliability and installability, while reaching anyone, anywhere, on any device, with a single codebase. PWAs are on the rise for web development, and companies large and small are taking advantage of this powerful technology. Today, I want to introduce you to PWAs and get you started with a basic application.
We will go over:
- What is a PWA?
- Fundamentals of PWAs
- Create a PWA from scratch
- What to learn next
What Is a PWA?
Progressive web apps (PWAs) are web applications that use modern technologies to provide a user experience that closely mimics a native app. PWAs have become very popular in recent years as they do not only improve performance and user experience but are also accessible when a user is offline.
The primary goal of a PWA is to provide the same experience as a native app using a majority of the features available to mobile app developers. PWAs combine the best of mobile and web apps into one technology. You can essentially build a website using front-end web technologies, but it acts, feels, and behaves like a mobile app.
Starbucks’ modern PWA for offline ordering
This modern solution to app development makes it easy for mobile app developers to get their products to market without going through the slow validation progress of Apple or Play stores. Once a PWA is deployed, it is immediately available to users. This also means that users don’t have to manually update apps to get the latest version — it is automatically deployed.
The development costs for PWAs are notably cheaper than for native apps, as PWAs eradicate the need for both an iOS and Android team. This valuable modern solution to app development leverages a larger web ecosystem for maintaining apps compared to native apps. Progressive web apps clearly have a lot of benefits. Let’s take a look at some of their characteristics.
- Progressive: A PWA must work on every device and enhance progressively, meaning that the features available to a user’s device or browser are accounted for.
- Discoverable: A progressive web app is essentially a website, so it must be discoverable on search engines.
- Offline capabilities: A PWA should work when the user is offline. It should also work in areas of poor or low connectivity.
- App-like: PWAs should behave and look like a native app.
- Linkable: PWAs are essentially websites, so they should use the URI to indicate the application’s state so that the app can retain its state.
Examples of PWAs
Progressive web apps are already part of the app ecosystem. You’ve probably already used one and didn’t know it! Here are five popular PWAs to give you a sense of which companies are using this modern technology.
Uber: Uber uses PWA technology for ride-share booking for low-speed, 2G networks. This PWA allows users to access Uber’s services on low-end devices that are not compatible with their native app.
Pinterest: Pinterest designed a PWA after learning that due to poor mobile performance, only 1% of their mobile users convert into sign-ups. They redesigned using PWA-based technology to improve user experience.
Starbucks: Starbucks built a PWA for their web ordering system to provide offline ordering that is similar to their native app. Starbucks’ PWA allows you to browse the menu and customize an order without internet access.
Spotify: Spotify is powered by PWA-technology to overcome the limitations of working with Apple. Spotify’s PWA app utilized the adaptive UI to change the background as you progress through the app.
Soundslice: Soundslice is a music education software that uses a PWA for their music learning experience. The Soundslice PWA-based player allows users to learn a piece of music while reading it on another mobile or desktop device.
#angular #progressive-web-app #programming #javascript #nodejs #build
