Skip to main content

Creating an App-like Experience: Exploring PWA in React Create App

In this blog post, we will learn how to configure a Progressive Web App (PWA) in Create React App and display the install icon on the Chrome browser.

Step 1: Setting up a Create React App project

First, make sure you have create-react-app installed globally. If not, install it by running the following command:

npx create-react-app my-pwa

Step 2: Configuring the manifest file

Navigate to your project directory and open the public/manifest.json file. Modify the file with the following content:


{
  "name": "My PWA",
  "short_name": "My PWA",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "path/to/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Step 3: Registering the service worker

In your src/index.js file, add the following code to register the service worker:


import * as serviceWorker from './serviceWorker';

serviceWorker.register();

Step 4: Building the project

Run the following command to build the project:

npm run build

Step 5: Deploying the app

Deploy the built files to a server. You can use services like Netlify, Vercel, or GitHub Pages for deployment.

Showing the install icon on Chrome browser

To show the install icon on the Chrome browser, add the following code to the public/index.html file, inside the <head> tag:


<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

By following these steps, you can configure a PWA in Create React App and display the install icon on the Chrome browser. PWAs allow users to install your app on their devices and provide a seamless app-like experience.

Comments

Post a Comment

Popular posts from this blog

JSP page directives

A jsp page directive looks like this: <%@ directive attribute="value" %> I am not gonna explain each and every page directives here . I would like to discuss about two page directives  which is import and include. First of all consider the import directive . The following simple program illustrate the use of import page directive: The output would be something looks like this: <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%>  <%@ page import="java.util.Date" %>   //page directive <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jsp Basics</title> </head> <body> <%=new Date() %> </body> </html> Tue Nov 12 17:42:34 I...
1 comment
Read more

a simple example for jdbc PreparedStatement

a simple example for PreparedStatement package basics.in.java.blogspot.in; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class Main { private static final String USERNAME="root"; private static final String PASSWORD=""; private static final String CONN_STRING="jdbc:mysql://localhost/basicsinjavablogspot"; public static void main(String[] args) throws ClassNotFoundException, SQLException { Class.forName("com.mysql.jdbc.Driver"); Connection conn=null; Statement stmt=null; ResultSet rs=null; try { conn= DriverManager.getConnection(CONN_STRING, USERNAME, PASSWORD); System.out.println("database connection successful"); //stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_READ_ONLY); String sql="select * fr...
1 comment
Read more