Progressive web apps, or PWAs, are a growing subject of discussion among web companies and developers. Newly implemented web standards are bringing web-based, offline-first mobile apps closer to feature parity with native apps. While Google is a key driver of this trend, and its tooling and implementation details, Mozilla, Microsoft, and other key players in the evolution of the web are also jumping on the bandwagon.
So what are progressive web apps and how are they relevant to you? What are best PWA tools and technologies you need to learn to build one, and what are the performance benefits?
These questions have been comprehensively answered in several interesting and recent conference talks. Drawing from the suggestions of Bruce Lawson, a longtime web-as-a-platform advocate, along with video stats and mobile web newsletters, TechBeacon created this list of the top 10 videos on the current state of progressive web apps and how to build them.
Progressive Web Apps
From the presentation:
“We’ve had a lot of attempts at taking web content and putting it in a different container, and making it run offline… so why is this different? Is there any reason to think this is going to work when those didn’t? … The other systems give you these capabilities but they force you to change your deployment and usage.”
— Alex Russel, software engineer at Google
Alex Russell (Google) and Andreas Bovens (Opera) gave this talk in 2015 as one of the earliest presentations introducing the concepts, code, and cross-browser nature of PWAs. It’s a great primer if you’re still not sure what the technical concepts behind PWAs are or why Google and other browser makers are pushing this trend.
Progressive Web Apps: The future of apps
(Slides)
From the presentation:
“I think native apps are a bridging technology, like Flash.”
— Bruce Lawson, former deputy CTO at Opera Software
A longtime proponent of the open web, Bruce Lawson gives further perspective to the progressive web app conversation. This is a great introduction if you want the “why” and “what” of PWAs in 20 minutes.
Progressive Web Apps Across All Frameworks
(Slides)
From the presentation:
“You can use any tech stack to create progressive web apps. In fact, over the last few months we’ve seen an increasing number of really large apps launch using progressive web app features.”
—Addy Osmani, software engineer at Google and creator of Yeoman
Progressive web apps can be built an endless number of ways. Addy Osmani, who’s blogs are at the leading edge of progressive web app development practices, shows you how to develop PWAs in the three most popular JavaScript frameworks—React, Angular 2.0, and Ember. Polymer is also used in some of the demos. Along with the most common components of PWAs—service workers and server-side rendering—Osmani also covers the usual application "shell" architecture used by PWAs to optimize the “first meaningful paint” and give PWAs fast load times for both first-time and repeat visitors.
AMP + Progressive Web Apps: Start Fast, Stay Engaged
From the presentation:
“A lot of our tool chains have legacy desktop assumptions built into them, from analytics frameworks to font loading tools to your JavaScript framework to start with. They’re making fundamentally wrong decisions for mobile.”
—Alex Russel, software engineer at Google
We know what the right technical decisions for mobile computing should be, but the shortfalls in all of our tools, technologies, and internet coverage are often out of our hands, making it seem impossible to get good performance on mobile. Whether you like Google’s control over accelerated mobile pages, and their search favoritism for them, AMPs are a valid way for your mobile site to boost its performance significantly.
Progressive web apps, on the other hand, deliver fast performance for return visits with their utilization of service workers and the app shell architecture. This talk will explain how both of these new paradigms in mobile can be used in the same application for fast page load times and offline features that allow you to use applications even when internet service coverage is bad.
Instant-loading Offline-first Progressive Web Apps
From the presentation:
“This whole illusion of a native-like web app comes crashing down when you’re offline.”
—Jake Archibald, developer programs engineer at Google
This session was recommended by Alex Russel in the video above for being a more detailed introduction to offline capabilities in PWAs. The talk starts with an example application that’s online-only and refactors it into a fully network-resilient, offline-first installable progressive web app. The talk also looks at alternate approaches to the app shell architecture that are better suited for traditional server-driven sites.
The “Progressive” in Progressive Web Apps
From the presentation:
“Don’t immediately discount technology that you hear is terrible. There is a lot of stuff that browsers have been shipping for a very long time that might be able to meet your solutions.”
— Patrick Kettner, product manager for Edge at Microsoft
This session takes the story of an animation that soothes crying babies and turns it into a use case for the progression of building a progressive web app. Being a Microsoft standard-bearer, you should expect to see one sneaky Bing plug early in the talk.
Instant Loading with HTTP/2
From the presentation:
“You can’t load much faster than loading from local cache.”
—Das Surma, software engineer at Google
It’s cool that service workers can give you a lot more control over the loading performance of your app, but don’t forget that HTTP/2 already gives you options to speed up your app as well. Leveraging HTTP/2 and service worker features together gives you more power to improve performance than either technology does on its own. Learn about the past, the present and the future of protocol-level optimizations so that you can take full advantage of the performance gains mobile apps can achive today.
Angular 2 and Progressive Web Apps
From the presentation:
“We want to be sure that for the next five or 10 years, whatever comes down the pipeline in the browser, we’re flexible.”
—Rob Wormald, AngularJS developer at Google
While many development shops are dragging their feet on the AngularJS 1 to AngularJS 2 conversion, Angular 2 is expected to achieve the same popularity that its predecessor did, especially among the larger, more enterprise-style .NET and Java teams that were so quick to adopt the first few releases of Angular. Angular 2 is a huge rebuild of the framework that accounts for the evolution of mobile web apps that we’re seeing now with PWAs. This session looks at some of the new tools in Angular 2 that will make it easy to build PWAs.
Great Libraries and Tools for Great Progressive Web Apps
From the presentation:
“The new idea in the web standards world is the extensible web, and it says that instead of creating simple APIs for specific things, new features should be low-level, deep, and powerful.”
—Mat Scales, developer relations at Google
While there is primarily a focus on Google’s open source tools in this talk, there’s also a review of the universal web standards that are making some of the new, enabling features of PWAs possible. The talk introduces sw-toolbox, sw-precache, sw-helpers, and other tools.
What we need from the web, and what it needs from us
(Video)
From the presentation:
“The whole point of the web is ‘write once and deliver it everywhere.’”
—Shwetank Dixit, head of innovation and research at BarrierBreak
Web apps are inching closer and closer to complete feature parity with native applications. Dixit thinks it’s just a matter of time until this happens, and other experts agree with him. He explains how PWAs are the latest step in this evolution, and he does it with a case study from the perspective of web users in India. Not only do we have expectations for the web, but the web also has expectations of us, Dixit notes.
Have you found any other useful videos about PWAs? Share them in the comments below.
Image credit: Flickr
Keep learning
Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.
Put performance engineering into practice with these top 10 performance engineering techniques that work.
Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.
Discover best practices for reducing software defects with TechBeacon's Guide.
- Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.
