CloudyCam
  • How to Build an Offline PWA Camera App With React and Cloudinary
  • Installing the Prerequisites
  • Creating and Testing a React App
  • Creating a Webcam class
  • Creating a Notifier Component
  • Using the Notifier Component
  • Creating and Styling a ClCamera Component
  • Setting Up a Cloudinary Account
  • Testing Your App
  • Accessing Uploaded Images
  • Creating a Production Build and Auditing Your PWA
  • Moving On
Powered by GitBook
On this page

Was this helpful?

Using the Notifier Component

To use the Notifier component, edit the src/App.js file to read like this:

    // src/App.js

    import React, { Component } from 'react';
    import logo from './logo.png';
    import './App.css';
    import Notifier from './components/Notifier';

    class App extends Component {
      constructor() {
        super();
        this.state = {
          offline: false
        }
      }

      componentDidMount() {
        window.addEventListener('online', () => {
          this.setState({ offline: false });
        });

        window.addEventListener('offline', () => {
          this.setState({ offline: true });
        });
      }

      componentDidUpdate() {
        let offlineStatus = !navigator.onLine;
        if (this.state.offline !== offlineStatus) {
          this.setState({ offline: offlineStatus });
        }
      }

      render() {
        return (
          <div className="App">
            <Notifier offline={this.state.offline} />
            <header className="App-header">
              <img src={logo} className="App-logo" alt="Cloudinary Logo" />
              <h1 className="App-title">CloudyCam</h1>
            </header>
          </div>
        );
      }
    }

    export default App;

The App.js component has one state, offline, which specifies whether the app is in offline mode. By default, the state is false. When App.jsis mounted, the componentDidMount function, which is executed when the app is loaded, listens for the online/offline event and updates the App.jsstate accordingly.

The render function defines the layout of the app and the Notifiercomponent, passing the offline state as a property to Notifier for display.

Now you might wonder how all that is displayed in the app. In the src/index.js file, the App component is rendered on a <div> tag with the ID root, as follows:

    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';

    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

To view your app, first run this command on your development server:

    yarn start

Afterwards, go to http://localhost:3000 on your browser to display the app. Toggle your Internet connection and you will see one of the two versions on display, depending on whether you are online or offline. See below.

PreviousCreating a Notifier ComponentNextCreating and Styling a ClCamera Component

Last updated 6 years ago

Was this helpful?

Fetch the Cloudinary logo from the and save it in your src directory as logo.png.

Cloudinary site
Notifier component when the app is online
Notifier component when the app is offline