Notes on React blog app on Android mobile Chrome browser

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

1) Chrome shows the app in the browser window if the app url is specified in the address bar. But the address bar is shown and the footer does not appear. 

Swiping up from Header of app results in address bar disappearning and so footer appearing in bottom of mobile screen (excluding navigation buttons display at bottom).

If address bar is shown, swiping up the posts list scrolls up the posts list and stops when the last post header info is shown. It does not show the footer. However, if one swipes up again, the footer comes into view and the address bar disappears.

Android Chrome Browser UI or Address Bar Hidden When Scrolling Up, Must Scroll all the way to top, https://www.youtube.com/watch?v=63vSnLhnK-U, 1 min. 4 secs.

So all parts of the app screen can be viewed but one needs to know these tricks. However if installed as app (see below) then the footer is always shown and the address bar is never shown, and so above issues are not there.

2) Chrome provides an 'install' option in the menu when one is on the react app page on netlify (if already installed, open app option is shown). Earlier (some months ago) it used to be Add to Home screen. Install App puts it in App folder and it is also listed under Settings -> ... Apps. 

I am not sure how this feature got enabled. Perhaps it is a PWA (progressive web app) as Create React App has an option to help create PWA app. Don't know its security issues ... But it seems to work well. Chrome environment is not shown at all - no address bar; the footer is shown properly right from initial screen and does not disappear. Works in portrait and landscape mode. 

To force app to reload data from server, there is no refresh app url option like in Chrome browser. Saw that swiping down from header or top of posts lists causes a reload of data in both the app. and on Android Chrome browser. Looks like that is a feature of (gesture supported by) Chrome to refresh any page it shows.

Closing the app. and reopening it forces the app to reload data.

3) About PWA

Use Progressive Web Apps, https://support.google.com/chrome/answer/9658361?hl=en&co=GENIE.Platform%3DAndroid

Learn PWA, https://web.dev/learn/pwa/

Build a progressive web app (PWA) with React, https://blog.logrocket.com/building-pwa-react/ . The section, "Customizing your PWA with React" has useful information.

manifest.json under public directory of app has short_name and name properties which should be changed to what we want the installed app on mobile to use. You can also change the icons used by the app.

=============

Older log

Fascinatingly, I could open my react app (Tasks/TaskList) being developed on my PC, on my Android mobile (Samsung M21) by specifying the Internet IP address link provided by npm start in Chrome on my mobile. One issue was that the footer content was off screen initially and I had to scroll down to view that content. I think this was due to the app. not running on full screen on the mobile.

But there is an interesting way by which this react program/app can be run full screen on at least my Android mobile and in this mode the footer appears at the bottom even if (in landscape mode) the number of tasks entries do not fit the screen and so a vertical scrollbar appears, which is how it happens on PC desktop when I reduce window height. The procedure I used is as follows:

1) Open the react app link address in Chrome on mobile
2) Tap the 3 dots menu of Chrome (top-right) and choose “Add to Home Screen”
3) A prompt window allows one to specify a title to (the app link). Press Add to proceed.
4) Now the react app link is added to the home screen of the mobile (with an icon). Opening that react app link/icon results in the app opening up in full screen on mobile.

The app link/icon behaves like an app in the sense that it does not show Chrome browser navigation bar/commands. One can only operate the app. Going ‘back’ from the app by using ‘back’ button on mobile results in app closing (and it is not shown in currently running apps list which is a slightly different behaviour from regular apps).