Inspiring ways businesses are using PWAs to reach and engage users.
Mobile websites are fast, easy and inexpensive to produce, however, the user experience is not as good as that of a mobile app. Developing and maintaining a mobile app is costly and complex, and the only traffic and data that can be collected and analyzed are from users that have downloaded the app. Progressive web apps combine the best attributes of both a mobile app and a website to create a cost-effective way to grow sales on the mobile web. We’ve chosen six of the best progressive web app examples to inspire you to create your own unique mobile experiences.
Nearly 42% of the world’s population uses a mobile device to access the Internet. (Statista) They are also increasingly using these devices to make online purchases. (Rapyd) As mobile adoption continues to grow and drive online access rates around the world, mobile apps and sites are essential for brands looking to reach new customers and improve mobile engagement.
6 Progressive Web App Examples To Inspire You (with Pictures)
What Is a Progressive Web App?
Progressive web applications are developed using a similar process to standard mobile websites using web languages such as HTML, CSS, and JavaScript. Using the features and functionality of both the web browser and the device, a PWA looks like a mobile app but provides a consistent experience to the user across all connected devices and internet speeds.
Viewed using a desktop browser, a PWA appears as a regular website and if viewed on a mobile browser, the site appears as a hybrid of a website and an app. Once on the site, a pop-up prompts the user to install the app onto their device without the requirement to sign in to an app store. Once the PWA is installed the app icon is added to the home screen.
In the background, it is the “manifest” and “service workers” in browsers that allow PWAs to deliver advanced performance. The manifest is a JSON file that defines how the app appears to the user at launch. A service worker is a script that runs in the background to use functions that do not require a web page or user interaction. This is how the PWA creates a site cache for faster loading times and offline access, allowing much of the content to remain accessible without an internet connection and increasing usability in network dead spots.
Business Benefits of a PWA
- Effective Engagement – PWAs deliver an immersive experience for users. The PWA can be accessed via an icon on their screen. Content loads quickly, remains accessible when offline and push notifications are enabled.
- Low Investment Development – PWAs can be delivered by existing web development resources. Using one codebase significantly cuts down on development costs. Plugins and progressive web app builders can be used to create a progressive web app websites without significant development investment.
- Easy to Update – PWA users always have access to up-to-date solutions, unlike apps, which need to be updated with each new version.
User Benefits of a PWA
- User Experience – PWAs are designed specifically for mobile devices and respond quickly to swipes and screen touch. Content, including images and video, loads smoothly and there is no delay when scrolling through pages.
- Lightweight – Since they do not have as much underlying code, PWAs are much smaller, so they are faster to download and do not have large storage requirements on user devices.
- Offline Access – Though native apps can support offline access, the PWA can not be matched for its speed and lightweight performance. Although not every feature may be accessed offline, smart and strategic use of cache keeps data available for when it is needed. Caching also minimizes cellular data use.
Progressive Web App Example 1: Pinterest PWA Drives Engagement and Conversions
As an earlier adopter, Pinterest built a PWA for iOS and Android users to improve the mobile experience. The app-like PWA doubled the number of mobile users and dramatically increased session times. (Medium) Functionality including push notifications, add to home screen, and night mode settings have given mobile users a highly engaging experience.
Progressive Web App Example 2: West Elm Renovated its Mobile Commerce Experience
West Elm’s PWA delivers a contemporary mobile commerce experience using large images of stylish products and fixed elements in the header and footer to enable key actions. The PWA is ecommerce enabled and has increased time on site by 15% and conversions by 9%. (Medium)