How to create a Progressive Web App (PWA) from a node app

1. Initiate your node project.

2. Install required dependencies

npm install express workbox-webpack-plugin

3. Implement your express server

App.use(express.static(“./”)) makes your express app loads static files from the root directory. This will ensure your manifest.json file is accessible.

4. Create a public directory to hold your static files.

5. Build the frontend.

6. Create a manifest.json file and link it in your html.

Run npx pwa-asset-generator logo.png icons in your terminal to create multilple images of your logo that will be placed in the icons array in the manifest file. Replace 'logo.png' with the path to your logo. It will generate the json required to paste. Install dependencies when prompted to.

7. Create a service-worker.js file

In your html code, write a script that checks whether a server worker is present and installs it if it isn't.

In the service worker file, import the workbox library and register routes for different caching strategies

8. Create a webpack.config.js file to bundle your pwa and frontend code into a single file

Run npx server to build your pwa

9. To confirm whether your pwa is ready, start your server and open the developer tools. Go to the lighthouse tab and perform a test.