Notes on creating web apps to run locally on Android mobile; Progressive Web Apps (PWA)

Last updated on 24 Dec. 2024
From the initial part of the tutorials that I have browsed so far, one of the challenges involved in running a React Native app on Android outside of Expo, is having to upload the app to Google Play Store which involves a one-time fee or US $25, IIRC, and has a review process, OR sideloading a .apk file on the Android mobile, which has its risks. I don't want to take such a risk with my mobile phone (Samsung Android).

What are the risks of sideloaded Android applications?, https://www.samsungknox.com/en/blog/what-are-the-risks-of-sideloaded-android-applications , April 2020.

It seems there are some other options for creating apps to run on Android mobile. I have yet to study the links below but they seem to be promising.

Referencing local files from HTML in Android,

========

A very simple app I would like to create is a Timestamp app. as in my limited search on Play Store I could not get a Timestamp app. that does what I want. My primary need is a one-touch timestamp creation app i.e. it will automatically create a timestamp when the app. is launched. When time permits, I would like to explore options mentioned in above articles to write a simple HTML/JS/CSS app that I can safely run on my Samsung Android phone (using its Chrome mobile browser).

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

Was very pleasantly surprised to see that I could simply have HTML and JS in a single timestamp.html file, move file to mobile (via Gmail) and then open file in mobile Chrome. It ran the JS as expected including localStorage part. Hmm. As simple as that. ... I saved the file in suitable folder on mobile (RaviWebApps/Timestamp/v1). Then added file to Home screen. Later added Home screen file to Bottom Quick Launch (5 apps max). Now it is a one-touch timestamp recording (in Local Storage). First version html file code is given below:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Launch Auto-Timestamp</title>
  </head>
  <body>
    <h2>Current Launch Timestamp: <span id="currTimestamp"></span></h2>
    <h2>Previous Launch Timestamp: <span id="prevTimestamp"></span></h2>
    <script>
      const currTimestampId = document.getElementById("currTimestamp");
      const prevTimestampId = document.getElementById("prevTimestamp");
      window.addEventListener("load", () => {
        const now = Date();
        const prevLaunchTimestamp = localStorage.getItem("timestamp");
        prevLaunchTimestamp && (prevTimestampId.innerText = prevLaunchTimestamp.toLocaleString().split("GMT")[0]) ;
        localStorage.setItem("timestamp", now)
        currTimestampId.innerText = now.toLocaleString().split("GMT")[0]
      });
    </script>
  </body>
</html>
--- eoc ---

Improved on above and put it up on GH: Very Simple One-Touch Timestamp (on Launch) Creator/Recorder App, https://github.com/ravisiyer/onetouchlaunchtimestamp

========

There seems to be a simplehttpserver app which probably would then allow HTML/CSS/JS apps to run locally on phone. Need to check that out when time permits.

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

Progressive Web Apps in 100 Seconds // Build a PWA from Scratch, https://www.youtube.com/watch?v=sFsRylCQblw , around 8 mins, by Fireship, Dec. 2020.

Progressive Web Apps in 2024, https://www.youtube.com/watch?v=3ODP6tTpjqA , around 4 mins., Jun. 2024. - covers creating a simple PWA app.

Have only seen initial part of the two video series given below. Will need to check them out in more detail to see if they are really useful:
PWA Tutorial for Beginners 1 - Getting Started with Progressive Web Apps,  https://www.youtube.com/watch?v=blx2hBeUcYY&list=PLS1QulWo1RIYmLVaEFAEdL9ToDNl78Y6S , 1st video only is around 20 mins, Dec. 2020.

Introduction to PWAs [1 of 17] | PWA for Beginners, https://www.youtube.com/watch?v=BByUknfLTuA&list=PLlrxD0HtieHjqO1pNqScMngrV7oFro-TY , 1st video only is around 14 mins., published by ****Microsoft Developer****, Mar. 2023

Seems like Microsoft is interested in PWA and is promoting it.
=======================

Below article's live site is broken.
How to build a PWA from scratch with HTML, CSS, and JavaScript,

Below article's live site (https://microsoftedge.github.io/Demos/pwa-getting-started/) works and I was able to install the PWA app on my mobile.
To download above path of repo (and not full repo), use:
git clone -n --depth=1 --filter=tree:0 https://github.com/MicrosoftEdge/Demos.git
cd Demos
git sparse-checkout set --no-cone /pwa-getting-started
git checkout
------
Ref: How to clone only some directories from a git repository?, https://askubuntu.com/questions/460885/how-to-clone-only-some-directories-from-a-git-repository

How to Build a Progressive Web App (PWA) from Scratch?,

----------------

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.
---eoe---
So what that means is that I can host simple PWA apps which are only HTML, CSS and JS on GitHub Pages. That's great! It provides https hosting which I read somewhere is a requirement for PWA. When time permits, I will consider modifying my above mentioned very simple Timestamp app as a PWA hosted on GitHub Pages.

Comments

Post a Comment