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:
https://1d3trees.com/
Gatsby adding a manifest docs:
https://www.gatsbyjs.com/docs/add-a-m...
Gatsby offline service worker docs:
https://www.gatsbyjs.com/docs/add-off...
Maskable icons docs:
https://web.dev/maskable-icon/
Previous video in the series:
• Gatsby site from scratch #11: Emotion Styl...
Next video in the series:
• Gatsby site from scratch #14: Autogenerati...
Follow Jimmy Cleveland's doings:
blog: https://blog.jimmydc.com/
twitter: / jimmydcleveland
#gatsbyjs #ssg #pwa