How to Cache Ejs and Built the Progressive Web Application with Nodejs?

Last Updated : 16 Jul, 2024

To cache EJS (Embedded JavaScript) templates and build a Progressive Web Application (PWA) with Node.js, we need to leverage several key technologies. Caching EJS templates can significantly enhance performance by reducing the need to recompile templates on each request. we'll learn how to cache EJS and build the Progressive Web Application with Nodejs in details.

Understanding Progressive Web Apps (PWAs)

Before diving into the development process, it's crucial to understand what Progressive Web Apps (PWAs) are. PWAs are web applications that utilize modern web technologies to deliver an experience similar to native apps, regardless of the platform. They offer features such as offline functionality, push notifications, and enhanced performance, making them an excellent choice for boosting user engagement and retention.

Setting Up the Node.js Environment

The first step is to set up the Node.js environment on your computer. Download and install Node.js from the official website. Make sure that the npm (Node Package Manager) is also installed. You can check the installation by running the following commands in your terminal:

node -v
npm -v

Approach

The first step is to create a new file and name it server.js or index.js and configure a basic Express server:
First, create a directory named public in the root of your project. This directory will hold the static assets for your PWA, such as, CSS, and JavaScript files.
Service workers are a core component of PWAs, providing offline functionality and caching capabilities. To implement a service worker, create a new file named service-worker.js in the public directory of our project.
Within the views directory, create an index.ejs file. This file will serve as the entry point for our PWA.
To bundle your frontend code and service worker into a single file, you need to set up Webpack. Create a new file named webpack.config.js in the root directory of your project.

Steps to create application

Step 1: Creating a New Node.js Project

To create a new Node.js project, use npm. Navigate to the directory where you want your project to be located and run the following command:

npm init -y

This command initializes a new Node.js project with default settings, generating a package.json file that contains your project's metadata and dependencies.
To set up your project's package.json file, which will manage your project's dependencies, follow these steps.

Step 2: Installing Required Dependencies

To build Progressive Web Apps (PWAs), you'll need several dependencies to manage service workers, caching, and other PWA functionalities. Use npm to install the following packages:

npm install express
npm install workbox-webpack-plugin

Project Structure:

Updated dependencies in package.json :

 "dependencies": {
    "ejs": "^3.1.9",
    "express": "^4.18.3",
    "nodemon": "^3.1.0"
  }

Example: In this example we'll learn how to build the Progressive Web Application with Nodejs

HTML

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Home</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        h1 {
            color: #333;
        }
    </style>
</head>

<body>
    <h1>Welcome to My PWA</h1>
    <p> This is my Home page</p>
    <script src="/js/main.js"></script>
</body>

</html>

JavaScript

// public/js/main.js

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('ServiceWorker registration successful with scope: ', 
                            registration.scope);
            })
            .catch(error => {
                console.log('ServiceWorker registration failed: ', error);
            });
    });
}

JavaScript

// public/service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
    '/',
    '/css/styles.css',
    '/js/main.js',
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response; // Cache hit - return response
                }
                return fetch(event.request); // Fetch from network
            }
            )
    );
});

self.addEventListener('activate', event => {
    const cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (!cacheWhitelist.includes(cacheName)) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

JavaScript

// webpack.config.js
const path = require('path');
const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
    entry: './views/index.js',
    plugins: [
        new InjectManifest({
            swSrc: './public/service-worker.js',
            swDest: 'service-worker.js',
        }),
    ],
};

Node

// server.js
const express = require('express');
const path = require('path');
const app = express();

// Set EJS as the templating engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Serve static files
app.use(express.static(path.join(__dirname, 'public')));

// Define routes
app.get('/', (req, res) => {
    res.render('index');
});


// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Step 3: Run the Server

Finally, launch your Node.js server to see your PWA in action by running the following command:

nodemon server.js

Output:

NodeJS Introduction

bishalpaul34

Improve

Article Tags :

How to Cache Ejs and Built the Progressive Web Application with Nodejs?

Understanding Progressive Web Apps (PWAs)

Setting Up the Node.js Environment

Approach

Steps to create application

Step 1: Creating a New Node.js Project

Step 2: Installing Required Dependencies

Project Structure:

Step 3: Run the Server

Similar Reads

Introduction & Installation

Node.js Modules , Buffer & Streams

Node.js Asynchronous Programming

Node.js NPM

Node.js Deployments & Communication

Resources & Tools

Thank You!

What kind of Experience do you want to share?