Categories: Firefox

Progressive Web Apps are here. What’s the big deal?

The web is the largest software platform ever, a great equalizer that works on any device, anywhere. The more it can do, the better off we’ll be. That’s the thinking behind Progressive Web Apps (PWA), mobile-friendly websites that can do almost everything native apps can do, and they’re coming to Firefox for Android.

Progressive Web Apps

Why You Should Care

Mobile apps can take up a lot of storage space on your phone. Your phone is probably bursting at the seams with apps. Progressive Web Apps take up far less space, on average, and they could save you a significant amount of storage and bandwidth (from downloading apps). You won’t need to download an app to get all the killer features like notifications, location services, offline support, etc. Your mobile browser could become the nexus of everything you do on your phone. It could open up software development like nothing before it, and chances are, it will. All the major mobile browser makers are launching support for PWAs (including us) and it’s likely that they’ll gain more features in the future.

How PWAs Work

Progressive Web Apps are built on web standards called Service Workers, HTTPS, and Web App Manifests. Service Workers let developers build websites that can work when there’s no network. The Web App Manifest lets users do things like pin the app to their home screens, or interact with web apps as if they were native. The point is to create something that will work when there’s no internet connection, and make it possible to launch it right from the Home screen, just like a native app.

What PWAs Can Do

According to a 2017 U.S. Mobile App Report by comScore, the web reaches three times as many people as mobile apps. But people use mobile apps on their devices far more than than mobile browsers. The results are clear: On mobile, apps rule. Why? Apps are fast and robust. They offer push notifications, full integration with other apps (and the web), location services, and more. That means if you want to reach people, you should probably build native apps in addition to mobile-ready websites. It’s a lot of work, and it would be easier if you could just build one website that does everything really well.

And some sites have. The Financial Times abandoned their native apps in favor of a robust PWA at app.ft.com. It can be saved to a device’s home screen and users can save articles to read offline. Forbes has also moved to PWAs to deliver content. Forbes says it’s easier for users to visit the Forbes site and install their PWA than it is for them to download an app from an app store. Since moving to PWAs, Forbes has seen a 43 percent increase in users, and those users stay twice as long. Lyft and Uber have also launched PWAs aimed at users with limited data bandwidth and connectivity. The sites do everything the apps do, but within the browser.

Starbucks released their PWA in 2017. They wanted an app that could do everything and work on any device with a web browser, in areas with poor data service. Today customers can browse the Starbucks menu and place and customize orders through the Starbucks PWA.

PWAs can use device features like cameras, data storage, GPS and motion sensors, face detection, and more. This will pave the way for AR and VR experiences, right on the web. Imagine being able to redecorate your home virtually using nothing but your phone and a PWA. Pan your camera around a room, then use tools on a website to change wall colors, try out furniture, hang new artwork, and more. It may feel like a futuristic fantasy, but it’s close to reality.

How do you use PWAs?

Using a PWA is as easy as visiting a website. Crack open Firefox for Android and visit the site—it’s that easy. If the site is running as a PWA, a badge will appear in the address bar. Tap the icon and an “Add to home screen” confirmation will appear. The PWA will act just like any other app on your phone—it’ll appear as a separate app in the app switcher and will work offline (if supported).

You can also add any web page to your home screen as a shortcut. Select the “Add Page Shortcut” option and the shortcut will land on your home screen. It’s great for keeping quick links to important references like bus schedules, sports scores, news sites, etc.

As web technologies advance, it may be possible for PWAs to do nearly everything native apps can do—and more.