Gatsby site from scratch #13: Progressive Web App (PWA) functionality with ease

Показать описание

Progressive Web Apps are something Gatsby makes super easy. PWA is a way to take a website and make it behave more like an app on a user's phone, from a feature and functionality standpoint.

This video covers adding and setting up gatsby-plugin-manifest and gatsby-plugin-offline for full PWA functionality as scored by Lighthouse.

I ran into a little snag during this setup that I haven't encountered before, and I talk a little bit about that, but I'll be following up on the resolution in the next video.

00:00 - Intro
00:20 - Cleanup and deploy from previous video
02:53 - Lighthouse to show lacking PWA functionality
07:55 - What is makes a PWA?
10:38 - Adding gatsby-plugin-manifest
15:33 - Viewing our website on a phone
16:03 - Deploying the manifest
17:38 - gatsby-plugin-offline
19:58 - Maskable icon learnings
21:34 - Things didn't go as planned
22:30 - Explaining the unexpected issue
24:58 - Showing PWA results on a phone
26:08 - Wrap-up
27:13 - Bonus 1d3trees PWA

1d3trees website (PWA) - custom tabletop terrain and miniature painting:

Gatsby adding a manifest docs:

Gatsby offline service worker docs:

Maskable icons docs:

Previous video in the series:

Next video in the series:

Follow Jimmy Cleveland's doings:

#gatsbyjs #ssg #pwa