Skip to content

Progressive Web App

Switchblade edited this page Jan 2, 2025 · 3 revisions

First I need to understand what is a PWA?

PWA is a progressive web app, something which installs to your phone and interacts with the phone dimensions, but fetches things directly from the web, a kind of alternative for an app.

Click here, here and here for more details on PWAs, from MDN Docs.

Main advantages are Push notifications, responsiveness and offline capability.

Only reason I'm doing this is to give access of the website to both Android and iPhone users (Apple 💢 ).


Every PWA needs :

  • A manifest.json file displaying these info(compulsory) :
    • name
    • icons
    • start_url
    • display(=standalone)
    • prefer_related_applications=false
  • Service Workers
    • they are js programs which run in background, giving it offline functionality and updating the app as we go along.
    • We use workbox npm package for this.

To download this pwa in :

  • Desktop : All chromium browsers give a popup to download it. Firefox, no (will update later)
  • Android : Chrome, Edge, Opera, Brave, Firefox all give popup to install them.
  • iOS : With Safari, yes , with others, need to go to options and share menu to find the install button.

Clone this wiki locally