Since last December I’ve been giving talks about Progressive Web apps . A couple of them where lightning talks of 10 minutes. One of the things I had to remove to fit the slides and the demo into those 10 minutes was the explanation of Progressive Enhancement, although it’s in the definition of a PWA. So, let me explain…

Progressive Enhancement

Start with a strong base and enhance from that. You want to deliver the best possible experience for the widest possible audience. That’s your base. If the browser of your visitor supports more, great! Than his/her experience will be even better.

Here’s an example taken from my demo code:

In this case a feature detection is used to check if a _ServiceWorker _exists on the navigator object. If there isn’t, no hard feelings and the site will work as expected. If the service worker object is available then just register one. From that point on the user gets an even better experience, like offline support for example.

Update

I posted the samplecode to my GitHub.