PWA: Turning Your Web App into a Native-Like App

Rohit Pakhrin — Fri, 28 Jun 2024 06:29:01 +0000

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.

Removing sensitive content from GIT | BFG

Rohit Pakhrin — Wed, 19 Jun 2024 09:35:32 +0000

Using BFG

BFG is one great open source tool which is an alternative for git filter repo maintained by Roberto Tyley.

Use Case

Today I am using this to clear alias key and password that I unknowingly pushed to the repo and is present in all the commits. It is present in gradle.properties inside android folder.

Installation

You can download jar file from BFG website and install using java.

Installing with brew

You can use: brew install bfg
command to install bfg directly from terminal

I had to use arch -arm64 in my m1Mac book.

arch -arm64 brew install bfg

Creating backup

It is recommended to create backup before performing the modification.

cp -R path/to/Project path/to/Project_backup

Create replacements.txt file

Write the codes or passwords in this file that you want to be removed.

BFG crawls your repo and removes the codes from this file.

Default is changed to Removed

source:

Run replace text command

Now run the following command. This will change the passwords to REMOVED or custom texts and crawls all the commits and also updates them.

bfg --replace-text path/to/replacements.txt path/to/Project

After running above command, it will prompt following to be executed:

git reflog expire --expire=now --all && git gc --prune=now --aggressive

Commit protection

I ran into commit protection where adding this --no-blob-protection
solved it.

Pushing to git

Now you can push to git using force push

git push -uf

You can now check in Git, if your updates are present now.

Forem: Rohit Pakhrin