This content originally appeared on DEV Community and was authored by Rohit Pakhrin
Progressive web app
React web app can be converted to be used as native app with help of PWA
This blog website rohtpakhrin.com.np was added PWA feature for native app experience.
Adding PWA feature is very simple and straightforward in react web app. In contrast the steps are only adding manifest.json file and icons.
All the other things will work seamlessly afther this.
Add manifest.json
Add manifest.json file inside public folder with following contents.
{
"short_name": "Rohit Blog",
"name": "Pakhrin's Coding journey",
"icons": [
{
"src": "icon-192*192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512*512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Index.html changes
Add following to the html file.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-192*192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Your app name">
Add Icons -> File structure
The file structure after adding the icons and manifest.json file inside public folder.
Development Steps are Complete
After this you can build your app and check in your mobile browser.
Adding to Home Screen
Step 1: Opening in Safari
Open your website in safari and press share button at the bottom of the screen.
Step 2: Adding to Home Screen
Then press add to home screen. This will generate a app icon on your home screen
Step 3: Click on app icon and use like a native app
App Icon will be available in your home screen and you can use it as a native app. App will be full screen as you have added standalone in your manifest.json file.
And the best thing is notifications will also work without opening the app. (It will require separate setup methods)
You can checkout here in the link what web app can do.
whatwebcando.today
Optional: Keys breakdown
short_name
This is the short name of your web app, which is used when there is insufficient space to display the full name (e.g., under the app icon on the home screen).name
This is the full name of your web app, which is used in contexts where there is more space available (e.g., in the installation prompt).icons
This array contains objects that define the icons used for your web app. Each icon object includes:start_url
This is the URL that your web app will start at when launched. Using "." means the root of your app.display
This parameter defines the display mode of your web app. "standalone" makes your app look and feel like a native app without the browser UI (e.g., no address bar or browser navigation buttons).theme_color
This is the color of the theme for your web app. It affects the color of the app's title bar in some browsers.background_color
This is the background color of your web app's splash screen, which is displayed while your app is loading.
This content originally appeared on DEV Community and was authored by Rohit Pakhrin
Rohit Pakhrin | Sciencx (2024-06-28T06:29:01+00:00) PWA: Turning Your Web App into a Native-Like App. Retrieved from https://www.scien.cx/2024/06/28/pwa-turning-your-web-app-into-a-native-like-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.