Progressive web apps (PWAs) have rapidly grown in popularity as essentially fast, performance-based web applications streamlined for delivering mobile app-like experiences. Progressive web apps are built using front-end technologies like HTML, CSS, and JavaScript to create a level of usability and performance that’s in parity with native mobile applications. They are responsive, consume lesser data and storage space, and supports push notifications and offline usage in the browser.

Progressive web apps (PWAs) came in the lime light recently. It uses the best of web and the best of apps to give a smooth experience to users and feels like native app. PWAs are responsive and fast, consume less data, need less storage space, support push notifications and offline use in browser. Twitter recently launched mobile.twitter.com which delivers mobile app like experience to users in browser without actually installing on user device. This article focuses upon building progressive web app with React JS

Building a progressive web app has now become a web development trend every enterprise wants to follow. Big players such as Twitter and Flipboard recently launched their Progressive web apps to deliver mobile experiences to users, without requiring them to install the app. In this article, you will learn how to build a progressive web app using React. So, let’s get started.

We’re going to build a simple PWA in this article. You can use this code as boilerplate for further PWA developments.

Getting Started with PWA

First let’s generate a React application with create-react-app. You can run the following commands to generate the React app.

npm install -g create-react-app
create-react-app pwa-app

Also Read:-How to Deploy a Simple HTML/CSS/Javascript Application on Heroku

Next we will install React Router:

cd pwa-app
npm install --save react-router@3.0.5

**Also Read:- **Uploading files with ReactJS and NodeJS

Now replace your src/App.js content with below gist. It will give us a basic template with navigation.

import React, { Component } from 'react';
import { Router, browserHistory, Route, Link } from 'react-router';
import './App.css';

const NavBar = () => (
  <div className="navbar">
    <Link to="/">Feed</Link>
    <Link to="/profile">Profile</Link>
  </div>
);

const Template = ({ title }) => (
  <div>
    <NavBar />
    <p className="page-info">
      This is the {title} page.
    </p>
  </div>
);

const Feed = (props) => (
  <Template title="Feed"/>
);

const Profile = (props) => (
  <Template title="Profile"/>
);

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Feed}/>
        <Route path="/profile" component={Profile}/>
      </Router>
    );
  }
}

export default App;

#reactjs #react #pwa #progressive web app #programming