20250210

Mondays start with merging pull requests by Dependabot.

I’m done with the naturalization interview, so I think I should start practicing English conversations now.

I’ve been listening to “golden hour” by JVKE. I want to die in that atmosphere.

I’m too productive today. I wonder what will happen to my body tomorrow.

• household chores
• 30 minutes walk
• rebuilt docker images for my Mastodon server to upgrade their versions
• renewed the TLS certificate for my Mastodon server
• journaling (zero second thinking)
• worked hard
• browsed web pages about Progressive Web App
• asked my sister about tax return
  • She is an accountant
• read a few pages of “Designing Data-Intensive Applications”
  • Shark attacks threaten Google’s undersea internet cables - slate.com
  • The video of a shark attacking an internet cable is hilarious, though it is a serious issue.
  • When we think about distributed systems, we must bear the fact that the internet is not very reliable.

Progressive Web App / Web Application Manifest

Progressive Web App

• Getting started with Progressive Web Apps | Blog | Chrome for developers
• What is a progressive web app? - Progressive web apps | MDN
• Examples of progressive web apps (PWAs) done right - Adobe Experience Cloud

Progressive Web App (PWA) is specific type of web applications that are built with standard web technologies such as HTML, CSS, and JavaScript, but it can be installed on a device and behaves like a native mobile application.

• What, Exactly, Makes Something A Progressive Web App? - Infrequently Noted

According to the article, the requirements of a Progressive Web App are:

• Originate from a Secure Origin. Served over TLS and green padlock displays (no active mixed content).
• Load while offline (even if only a custom offline page). By implication, this means that Progressive Web Apps require Serice Workers.
• Reference a Web App Manifest with at least the following properties: name, short_name, star_url, display with a value of standalone or fullscreen…

With the requirements met, browsers that support PWA can install the application to devices.

• Making PWAs Installable - Progressive web apps | MDN
• Progressive web app - Wikipedia

According to these resources (please don’t blame me for referring a Wikipedia page), Chromium-based browsers support PWA, but other browsers do not support in many cases.

One of the PWA’s benefits is its closs-platform nature that reduces developers’ burdens. Another key feature is PWA can process real-time notifications thanks to service workers (TODO: Check how it works, Service Worker API - Web APIs | MDN).

Web Application Manifest

A progressive web app must have manifest.json to let browsers install it, though its use case is not limited to PWA.

manifest.json is used to guide browsers on how PWA should be displayed or behave.

Since Mastodon can be run as a Progressive Web App, we can take a look at mine ocalaavenue.net/manifest.json

{
  "id": "/home",
  "name": "Ocala Ave",
  "short_name": "Ocala Ave",
  "icons": [
    ...(omitted)...
    {
      "src": "https://ocalaavenue.net/packs/media/icons/android-chrome-192x192-eddc1ed540e97b926202b7b857989d60.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    ...(omitted)...
    {
      "src": "https://ocalaavenue.net/packs/media/icons/android-chrome-512x512-ccb53c9fcbb5f61bf741cc54998318f0.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#191b22",
  "background_color": "#191b22",
  "display": "standalone",
  "start_url": "/",
  "scope": "/",
  "share_target": {
    "url_template": "share?title={title}&text={text}&url={url}",
    "action": "share",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  },
  "shortcuts": [
    {
      "name": "Compose new post",
      "url": "/publish"
    },
    {
      "name": "Notifications",
      "url": "/notifications"
    },
    {
      "name": "Explore",
      "url": "/explore"
    }
  ]
}

Top level keys are called members, and according to MDN, these are the required fields for PWAs.

• name or shortname
• icons must contain a 192px and a 512 px icon
• start_url
• display and/or display_override
• prefer_related_applications must be false or not present

You can see that the Mastodon’s manifest.json meets the requirements.

How to install with Google Chrome

1. Open ocalaavenue.net or any website you want to install
2. Select “More” at the top right -> Cast, save, and share -> Install … as app

Wow, I didn’t know that I could install a web application like a native application. (How many people are aware of this?)

TODO:

• 2044E, F
• Oath Ceremony (20250220)
• Create a TurboTax account (20250222)
• haircut
• Tax Return (20250415)

index 20250209 20250211