Understanding progressive web apps

Accelerated Mobile Pages (AMP) did not come alone. Google is driving another movement: the convergence of the technology stacks that run websites and apps. The history of tech is that of pendulum movements: it consolidates, then it fragments, then it consolidates again. As if we didn’t have enough acronyms in tech we are being gifted with a new one, PWA. Fortunately, the name of the tech tells us in three words what this is about: Progressive Web Applications. PWAs are about convergence: towards the mobile browser instead of individual mobile apps, and towards the unification of technologies that power websites and apps.

Why does the world need another form of app?

Since Microsoft Office, in the 1980s, defined the concept of apps for home users and pros using clients like a PC, we’ve been used to apps. We’ve bought them on CDs initially, installing them ourselves, and entering the license key that was on the cardboard box for the product. Remember good times. These still exist today, but for the most part we now download the programs on our computers. As mobile phones became mainstream Steve Jobs and team were the first to make mobile apps popular with the Apple app store. These apps were some kind of container, using sometimes just the phone’s resources and not needing to be online. Need a flashlight? Install a flashlight app on your phone. Does it make sense to buy a calculator today, or just install a calculator app on the phone? Everything around us is becoming an app, even things that like a flashlight or calculator, don’t need to be online. Then the online apps popped up: Facebook, Twitter, news media sites, the list goes on. There we’re starting to ask ourselves a deeper question: wait. If I’m on a PC or laptop, I take the browser and go to Facebook.com. The mobile phone also has a browser. So why can’t we access Facebook through the browser, like on a laptop? Why is it that we need to download an app? For news sites and content that’s mostly static it stares at us even more. Why the heck do we need to download all these apps for every website we visit? After all isn’t storage more limited on a phone than on a desktop, while this system uses more storage in the case of phone apps! Nonsense. But? It’s the way the world turns today in 2016.

Mobile apps have advantages over the mobile browser, but that’s changing

Since mobile apps have a cost in storage and they add up on our phones, it makes the user experience superior to accessing that app or site through the mobile device’s browser, for now. Here are some of those advantages:

1. Speed: when you access a site through a browser there is no easy way for the browser to keep part of the site’s content in memory so that it’s faster to load over time. When we download a mobile app the package includes the shell of the navigation and user experience. That shell applies mostly regardless of the content inside that frame. Because it’s part of the app, all your phone needs to download is the actual content. That makes pages and the user experience faster.
2. Convenience: even if you store your passwords (securely) on a mobile browser, having to login most times when accessing a particular site like a social network or any site needing credentials is a pain in the neck. Apps store passwords with more persistence, so that when you get in you don’t have to enter your login quite as often. Mobile apps also give you quick and easy access to Settings, where you can decide the types of notifications you receive. The app knows that, and it can then send you ‘push notifications’ for events you elect to be notified about. To date, doing this from a mobile browser is also a pain in the neck. Plus, it’s harder to send user notifications when a site runs in a browser.
3. Reliability: if you are on an airplane or in the middle of nature far from a cell tower you’ll get some break from constant connectivity. At the same time if you open your mobile browser you’re going to see a broken webpage. Check the weather: broken page. But if you have an app and it might have ran in the background and checked the weather for your selected cities 5 hours ago. When you open the mobile app, you get to see the forecast from the last time it pulled data from the server. In other words, it works offline.

Come Progressive Web Apps

What if the benefits of apps could be had without downloading them? As a user we’d get to save lots of storage on our phones, and as a result we could get more apps, in total, on that device. Then, as a web or app developer, what if we could make a mobile solution that runs on all smartphones natively without the need to constantly keep these apps up to date on each of the device makers and operating systems? That would save a lot of hassle and make our work more efficient. As a developer, we’d spend more time on innovation, instead of infrastructure maintenance. Here are 3 things that you can do with Progressive apps:

1. Allow users to save sites as an app on their phone, and do this from the mobile browser. As a user, when you like a site you save that site to your phone, just like you’d install an app. But instead of taking you to the marketplace and install a package that fills your device storage, all it does is create an icon, and loads some minimal offline code in the browser cache. Now, you have a progressive web app.
2. The progressive web app has a shell, which is the frame including your logo, some styling, basic elements of navigation and presentation that go around the main content. That shell is the piece of offline code that’s downloaded.
3. Faster, smoother experience online. When you’re online you download content just like when you access a site. With PWAs, some of that content is stored on your device, and you get to choose how much of it stays on the phone or gets flushed. First advantage: it makes web pages faster because the shell doesn’t have to be downloaded for every web page, just the content does. In addition PWAs require AMP HTML, so even the content loads instantly. That is why, when looking at AMP HTML and Progressive Web Apps, it becomes apparent that they are one and part of the same initiative.
4. Because some content is stored, PWAs bring an offline mode. You still get to see and experience a complete browsing experience without any connectivity for the content that’s on your device. Next time your phone reconnects to the network it will update the stale content and download new one.
5. Progressive web apps allow users to sign up for notifications, which really turns a website experience into an app experience. Now users can choose when to get push notifications on their device, can opt in, opt out, and get content that’s relevant to what they like.

PWAs and AMP HTML are still new. It remains to be seen if they become the next standard for the web. It’s clear they bring significant benefits to users and to developers. The technology is open source and based on standards, avoiding lock-in. If you’re a site owner or developer now is a good time to start learning about PWA’s and think how it can be integrated into your site or the software you produce.