Progressive Web Apps 101

Throughout this course, we will explore the wide array of companies that have already benefited from the many enhancements PWAs offer and I will walk you through the steps of transforming an existing website into a Progressive Web App from the bottom up.

Abstract

This class walks you through the steps of transforming an existing website into a Progressive Web App from the bottom up.Together we’ll also explore the vast array of companies that have already benefited from the many enhancements PWAs offer and why they’re so successful in emerging markets.

Description

Progressive Web Apps, or PWAs for short, are a fairly new and evolving concept that is Google-backed and are on track to become the new golden web standard. What makes PWAs so special is that they’re just ordinary looking websites that have the ability to function as a native mobile app would.You see, native mobile apps you’d normally install from the app store can do things like sending push notifications, work offline, load from the home screen, and so on and so forth. By comparison, mobile-friendly websites accessed in a mobile browser still don’t have the capacity to do any of these things.Progressive Web Apps fix that issue by bringing features we expect from native apps to the mobile browser experience. This means that if a website becomes a PWA, it is using features such as web push notifications and service workers to mimic the same interaction a native mobile app would offer.In other words, PWAs attempt to combine features offered by most modern browsers with the benefits of the mobile experience. A user can finally get the best of both worlds with the reliability and engagement a native app can provide combined with the performance and lightweight architecture a web app can offer.Although it may seem quite difficult to implement a PWA, the key technical aspects only involve HTTPS, service workers, and a web app manifest. This implies as long as you serve your site over HTTPS, you have a service worker with some basic caching, and you register a web app manifest with some basic information like the name and at least one icon, your website is recognized as a PWA.By the end of this talk, each attendee will have a high-level understanding of the concepts needed to convert an existing website into a PWA and the benefits such a transformation would offer.

Target Audience

The intended audience members are either in school or in the industry and have a good grasp of HTML, CSS, and JavaScript. Ergo, this would probably be more of an intermediate level talk.However, PWAs would be a great topic to learn for a developer at any stage of their careers since it promotes many positive web development practices, such as accessibility and SEO, and is quickly becoming the next golden web standard.Indeed, while Progressive Web Apps have been around for several years, they are finally beginning to gain popularity on not only mobile (Android and now iOS), but also desktop platforms (e.g., Windows app store support).This session should appeal to attendees interested in both web and app development. It should demystify a hot topic and provide participants with the tools necessary to continue exploring this area on their own.Ultimately, this talk will allow attendees to differentiate themselves for their next career opportunity by showing they can grasp the fundamentals of this new standard in delivering amazing user experiences on the web.

Agenda Outline

The main goal of the talk will be to make sure attendees can walk away knowing how to go from 0 to 100 on the Progressive Web App (PWA) score using Lighthouse. This shows that they understand what core elements are needed to transform an ordinary looking website into a PWA.There are three key parts that will form the talk: 1) a high-level overview of PWAs and the benefits they provide with examples of companies already implementing them 2) showing how to get a 100% PWA audit score by testing a pre-existing website on Lighthouse and 3) reviewing key concepts on what was needed to build a PWA and opportunities attendees can look into for future development and learning.I will show screenshots and real-life examples of well-known companies (not just tech companies either) that are implementing PWAs and explore the benefits these companies have reaped by doing so.Lighthouse can be run through Chrome DevTools and provides several types of audit that all have references to Google Developers documentation explaining why the audit is important and as how to fix it if it is failing. The 4 criterion that Lighthouse evaluates are Progressive Web App, Performance, Accessibility and Best Practices and provides a score of 0 to 100% for each of these.Attendees will be walked through a pre-existing website built with Hugo, a static site generator, that already has 3 of the 4 criteria completed with the end of the talk exploring how one can make the 4th criteria of “Progressive Web App” end up with a 100% score.After going through the process of making an existing website PWA friendly, we will review the concepts we’ve covered and talk about resources and opportunities attendees can look into to further develop and learn about Google’s new PWA standard.

Execution Plan

There will be opportunities to ask questions or raise concerns at any time during the talk but the talk is entirely lecture-based.I will also leave a small window of time at the end of the talk to ask any questions as well. In terms of the timeline, I intend to spend about 15 minutes giving a high-level overview, 15 minutes exploring examples of Progressive Web Apps in the industry, 20 minutes to work through the steps of transforming a pre-existing website into a full-on Progressive Web App and finally 10 minutes to recap key concepts and allow for Q&A - totaling 60 minutes of the allotted time.In terms of A/V equipment, I will need an HDMI to USB-C adapter for my laptop and an AUX cord for streaming audio.

Fit

I’ve been in love with the web throughout my academic and professional career. I love the web industry because, unlike other platforms, the web is the most accessible and easy to build on. Although the radio has served as the most accessible form of information ever since its origination, I believe the web can and will surpass the radio in both reach and value.I’ve built multiple PWAs with my personal website scoring very high on Lighthouse and attended the PWA Roadshow and the Chrome Dev Summit by Google in 2017 which both allowed me to understand how PWAs work at a higher level and the motivation behind their architecture.Regarding prior speaking experience, I’ve given technical talks over 35 times so far on web development & design, coding bootcamps, TypeScript and how to get started in the tech field. I’ve presented these talks not just at conferences but at hackathons and Meetups as well.Through my prior speaking experience and tinkering outside of work, I believe I have the right amount of passion and engineering background to be able to inspire others to love the web just a little bit more through PWAs.You can view my upcoming and previous speaking engagements on my website: https://www.fvcproductions.com/speaking.

Topics Covered

Accessibility, Broadband Cellular Network Technology, Chrome DevTools, HTTPs, Hugo, JavaScript, Lighthouse, Native Mobile Apps, Performance, Progressive Web Apps, SEO, Service Workers, Static Site Generators, Web App Manifest, Web Push Notifications

Technical Requirements

I will need the ability to project and stream audio through my 2017 MacBook Pro laptop so I will need an HDMI to USB-C adapter and an AUX cord for audio.

References

Berriman, Frances & Russell, Alex. “Progressive Web Apps: Escaping Tabs Without Losing Our Soul”.freeCodeCamp. “Why Progressive Web Apps Are The Future Of Web Development”Google Developers. “Your First Progressive Web App”.Mozilla Developer Network (MDN). “Progressive Web Apps”.WordPress. “Super Progressive Web Apps”.Forrester. “Join the Progressive Web App Movement”