Unlock the Power of Progressive Web Apps with Gatsby
When it comes to building fast and efficient websites, Gatsby is a popular choice among developers. However, out of the box, Gatsby doesn’t provide offline capabilities or Progressive Web Apps (PWAs). In this article, we’ll explore how to convert a Gatsby-powered website into a PWA, enhancing the user experience and performance metrics.
What is a Progressive Web App?
A PWA is a website that can be navigated, fully or partially, without an internet connection and can be installed on devices – just like a native app – right from the browser. To qualify as a PWA, a site must meet three baseline criteria: having a manifest file, caching resources and intercepting network requests using service workers, and being served via HTTPS.
Step 1: Add a Manifest File
A manifest file is a JSON file that instructs the browser to make your website installable and enables ‘Add to home screen’ functionality. Gatsby provides a plugin to make this process easier. To get started, install the plugin and configure it in your gatsby-config.js file. The manifest file defines essential properties such as the app’s name, icons, and base URL.
Step 2: Add Offline Support with Service Workers
Service workers are JavaScript files that cache website resources and intercept network requests, making it possible for your site to be navigable even without an internet connection. Gatsby has a plugin for adding service workers, which uses Workbox Build to create a service worker for the site and load it into the client. To test, build, and serve your website, run gatsby build and gatsby serve.
The Service Worker Update Problem
Service workers can become a source of bad UX if not handled properly. When you make changes to a project and deploy, new files with unique filenames are generated, causing the service worker file to update. However, the browser only looks for updates to the service worker file in specific scenarios. To solve this issue, the gatsby-plugin-offline workbox configuration sets the service worker’s skipWaiting to true, ensuring that the new service worker is activated as soon as it’s done installing.
Step 3: Serve via HTTPS
To ensure that service workers are accessible to visitors, you must serve your site via HTTPS and not HTTP. This is because service workers have the ability to intercept network requests and change responses, making the communication channel vulnerable to a “man-in-the-middle” attack. If you’re hosting your site on GitHub pages or Netlify, then HTTPS is enabled by default.
The Benefits of Progressive Web Apps
Adding offline capability to a website isn’t a necessity, but it can improve performance metrics and upgrade the visitor’s experience. With PWAs, users can still access parts of your website when using devices with low bandwidths or in areas with no reception.
Get Started with LogRocket
Want to take your digital experience to the next level? Try LogRocket, a modern error tracking tool used by over 200k developers. Sign up for a free account and get started with LogRocket’s easy-to-use platform.