Building a Progressive Web App with React and Firebase

What You’ll Learn

By the end of this tutorial, you’ll have a solid understanding of how to:

• Implement CRD (create, read, delete) functionality with Firebase Firestore
• Leverage the real-time capabilities of Firebase
• Deploy your app to Firebase
• Create a PWA that works offline

Setting Up Firebase and React

To get started, create a new Firebase project and set up a web app. Then, create a new React project using Parcel. We’ll use Firebase Firestore as our database and React Hooks to manage state.

npx parcel init my-app
cd my-app
npm install firebase

Building the App

Our app will consist of two components: App and Idea. The App component will handle adding, deleting, and viewing ideas, while the Idea component will display individual ideas.

// App.js
import React, { useState, useEffect } from 'eact';
import firebase from 'firebase/app';
import 'firebase/firestore';

const App = () => {
  const [ideas, setIdeas] = useState([]);

  useEffect(() => {
    const db = firebase.firestore();
    db.collection('ideas').onSnapshot(snapshot => {
      setIdeas(snapshot.docs.map(doc => doc.data()));
    });
  }, []);

  const handleAddIdea = idea => {
    const db = firebase.firestore();
    db.collection('ideas').add(idea);
  };

  const handleDeleteIdea = id => {
    const db = firebase.firestore();
    db.collection('ideas').doc(id).delete();
  };

  return (

  );
};

export default App;

// Idea.js
import React from 'eact';

const Idea = ({ idea, onDelete }) => {
  return (

  );
};

export default Idea;

Converting the App to a PWA

To convert our app to a PWA, we’ll need to add a web app manifest file and a service worker. The manifest file will provide metadata about our app, while the service worker will allow us to cache resources and respond to network requests.

// manifest.json
{
  "name": "My App",
  "short_name": "My App",
  "theme_color": "#4A90E2",
  "background_color": "#4A90E2",
  "display": "standalone",
  "orientation": "portrait",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

// service-worker.js
const CACHE_NAME = 'y-app-cache';
const urlsToCache = ['/index.html', '/manifest.json', '/icon-192x192.png'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return cache.match(event.request).then(response => {
        return response || fetch(event.request);
      });
    })
  );
});

Testing and Deploying the App

Once we’ve completed our app, we’ll test it by simulating an offline environment and verifying that our app still functions as expected. Finally, we’ll deploy our app to Firebase and install it as a PWA on a mobile device.

firebase deploy

Open your app in a browser and go offline. Verify that your app still functions as expected.

Install your app as a PWA on a mobile device by going to your app’s URL, clicking the “Add to Home Screen” button, and following the prompts.