Gatsby was named the #1 new technology to learn in 2020!
To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to build your first Gatsby Theme.
Learn more about #100DaysOfGatsby here!
Challenge 7: Make Your Gatsby Site Work With Poor Internet Service and Offline
You may have been introduced to Gatsby as a “static site generator”. And it’s true – a Gatsby project is built into a set of static assets that can be hosted on a low cost CDN, for by-default security and blazing fast speed.
But Gatsby is best understood as a Progressive Web App generator, because with Gatsby you can produce websites with native mobile app capabilities. A Progressive Web App (PWA) is a new class of website that takes advantage of the web browser’s access to mobile device APIs, to provide features traditionally only associated with native apps.
Imagine giving your website enhancements like offline mode, home screen installation, and push notifications. Well, those are exactly the features we want you to add to your Gatsby project this week!
Challenge Resources
First, read our doc about what makes a PWA, a true PWA.
Next, add gatsby-plugin-manifest to your site. THis makes it possible for users to save your site to their home screen.
Now, add gatsby-plugin-offline to your project. As the name suggests, this plugin will give your site’s users the ability to still navigate to different pages, even in airplane mode, or with a poor internet connection.
What to Do If You Need Help
If you get stuck during the challenge, you can ask for help from the Gatsby community and the ASKGatsbyJS Twitter account. You can find fellow Gatsby Developers on Discord, Reddit, and Dev.