Skip to content

Gatsby Progressive Web App (PWA) using Material UI. Uses GitHub workflows to deploy to Firebase.

License

Notifications You must be signed in to change notification settings

rangequest/firebase-gatsby

Repository files navigation

Gatsby Progressive Web App Starter

Gatsby

Gatsby Progressive Web Apps

🎡 What are Progressive Web Apps

Progressive Web Apps are Websites that took all the right vitamins.

Read More about PWA

PWA checked with Lighthouse - These checks validate the aspects of a Progressive Web App.

Gatsby

🚀 Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI (install instructions) to create a new site, specifying the hello-world starter.

    # create a new Gatsby site using the hello-world starter
    gatsby new progressive-web-app https://github.com/rangequest/firebase-gatsby.git
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd progressive-web-app/
    gatsby develop
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the progressive-web-app directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

Gatsby before PWA Implementation

Gatsby before PWA Implementation

Before PWA

Gatsby before PWA Implementation

Gatsby After PWA Implementation

Gatsby after PWA Implementation

After PWA

Gatsby after PWA Implementation

Features

  • Google Fonts Customization
  • Material UI Theme Customization
  • SEO Module
  • Service Worker
  • Offline Page
  • Installable App
  • App Shortcuts
  • GitHub Workflow to deploy to Firebase

Live Demo

🔥 Visit Site