Archive for August 7th, 2020

pwa tutorial

Friday, August 7th, 2020

There’s been much welcome discussion about Progressive Web Apps lately. They’re still a relatively new model, but their principles can equally enhance apps built with vanilla JS, React, Polymer, Angular or any other framework. In this post, I’ll summarise some options and reference apps for getting started with your own PWApp today. What is a Progressive Web App? A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment.

It’s important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. Progressive enhancement is a backbone of the model. Aaron Gustafson likened progressive enhancement to a peanut M&M. The peanut is your content, the chocolate coating is your presentation layer and your JavaScript is the hard candy shell. This layer can vary in color and the exerience can vary depending on the capabilities of the browser using it.

Think of the candy shell as where many Progressive Web App features can live. They are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user builds a relationship with these apps through repeat use, they make the candy shell even sweeter – loading very fast on slow network connections (thanks to Service Worker), sending relevant Push Notifications and having a first-class icon on the user’s homescreen that can load them as fullscreen app experiences.

They can also take advantage of smart web app install banners. Progressive Web Apps are: Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next. Connectivity independent – Enhanced with service workers to work offline or on low quality networks. App-like – Use the app-shell model to provide app-style navigations and interactions.

Fresh – Always up-to-date thanks to the service worker update process. Safe – Served via TLS to prevent snooping and ensure content hasn’t been tampered with. Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. Re-engageable – Make re-engagement easy through features like push notifications. Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable – Easily share via URL and not require complex installation. Progressive Web Apps also aren’t unique to Chrome for Android. Below we can see the Pokedex Progressive Web App working in Firefox for Android (Beta) with early Add to Homescreen and Service Worker caching features running just fine. One of the nice aspects of the “progressive” nature to this model is that features can be gradually unlocked as browser vendors ship better support for them.

Progressive Web Apps such as Pokedex also of course work great in Opera on Android too with a few notable differences in implementation: For diving deeper into Progressive Web Apps, read Alex Russell’s original blog post introducing them.