MODULE-3
Presented By : Indira Devi
Garden City University | 2024
PROGRESSIVE WEB APPLICATIONS 1
Rich with Features: PWAs offer a wide range of
functionalities, similar to native apps, providing a
comprehensive user experience.
Work Offline: PWAs can function even without an internet
connection, allowing users to access previously loaded
content.
App-Like Experience: PWAs provide an immersive, app-
like feel with smooth transitions and interactions.
Connectivity-Independent: PWAs are designed to
function reliably regardless of network quality,
improving accessibility.
Responsive: PWAs adapt to various screen sizes and
devices, ensuring consistent usability across platforms.
Progressive Enhancement: PWAs are built using core web
technologies and progressively enhance functionality for
supporting browsers.
ROLE OF SERVICE WORKER -PWA 2
Service workers are a sort of a web worker, which is JavaScript file that runs distinctly from the central browser
thread. They act as a proxy among the web app, the browser, and the network, enabling features like offline
operation, background sync, and push notifications. Service workers are basic for the core skills of PWAs.
Executing a service worker implies several key levels
Garden City University | 2024
1 Registering the Service Worker:
The service worker script is registered by the web application, clarifying its scope (which URLs it
operates).
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}
ROLE OF SERVICE WORKER -PWA 3
Executing a service worker implies several key levels
2 Installation
This is the second level where the browser downloads the service worker script and attempts to install it.
Garden City University | 2024
While installation, it commonly caches basics resources (like HTML, CSS, and JavaScript files) that are
needed for the PWA to function offline.
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/index.html',
'/styles.css',
'/script.js',
'/offline.html'
]);
})
);
});
ROLE OF SERVICE WORKER -PWA 4
Executing a service worker implies several key levels
3 FETCH
Service workers can block network requests using the 'fetch' an event. This permits them to help cached
Garden City University | 2024
responses or retrieve new data from the network.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(resp
onse => {
return response ||
fetch(event.request);
})
);
});
ROLE OF SERVICE WORKER -PWA 5
Executing a service worker implies several key levels
4 Managing Updates:
To control updates, the service worker must handle new versions of itself, confirming smooth transitions
Garden City University | 2024
and sorted out outdated caches.
self.addEventListener('activate', (event) => {
var cacheWhitelist = ['v2'];
event.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});
WEBAPP MANIFEST 6
Web App Manifest is a simple JSON file that provides information about a web
application in a text file format. It tells the browser about your web application and
how it should behave when installed on the user's desktop or mobile device.
Web App Manifests are essential for several reasons:
Installability: They enable the "Add to Home Screen" feature, allowing users to install your
PWA on their devices.
App-like experience: Manifests help create a more app-like experience by defining how your
PWA appears when launched from the home screen.
Branding: They allow you to define your app's name, icons, and theme colors, ensuring
consistent branding across platforms.
Improved engagement: By providing a native app-like experience, manifests can help
increase user engagement and retention.
The most important properties in a Web App Manifest:
1. Name and Short Name 2. Icons
3. Start URL 4. Display Mode
5. Theme Color 6. Background Color
PWA-INSTALLATION FOR USER ENGAGEMENT 7
One of the defining aspects of a PWA is that it can be promoted by the browser for
installation on the device. Once installed, a PWA appears to users as a platform-specific
app, a permanent feature of their device which they can launch directly from the
operating system like any other app.
Installability Requirements
Manifest File: A JSON file that defines the PWA's appearance and behavior.
HTTPS: Must be served over HTTPS or from localhost.
Installation Methods
From App Stores: Package and distribute through platforms like Google Play Store
and Apple App Store.
From the Web: Browsers promote the PWA for installation if it meets criteria.
User Experience
App Icon: Once installed, the PWA gets an app icon on the device.
Standalone Mode: PWAs can be launched as standalone apps, not just websites.
PWA & TRADITIONAL MOBILE APPS 8
Aspect Progressive Web Application (PWA) Traditional Mobile Application
Platform Platform-independent; works across Platform-dependent; separate apps for iOS
Dependency different systems and Android
Installation Installed directly from a web browser Installed via app stores (e.g., Apple App
Source Store, Google Play Store)
Installation User visits the website and adds to home User searches the app store, downloads, and
Process screen with a prompt installs the app
Updates Automatically updates when the web is Updates are manually downloaded from the
refreshed app store
Storage Space Typically requires less storage space Generally requires more storage space
Offline Access Limited offline capabilities Full offline capabilities once downloaded
Approval Process No approval needed from app stores Must comply with app store guidelines and
approval process
User Experience May offer a more basic experience compared Offers a more integrated and robust user
to native apps experience
TECHNICAL COMPONENTS OF PWA 9
PWA has five components.
1. Web App manifest :The "manifest.json" file allows the PWA developer to search for a
centralized location for the metadata of the web application. The JSON file defines the
links to icons and icon sizes, the full and abbreviated name of an app, types,
background color, theme, locations, and other visual details that are required for an
app-like experience.
2. Application shell: It is specialized to split the static and dynamic content of the
application. The minimal CSS, HTML, JavaScript, and any other dynamic and static
resources offer the structure for your web page.
3. Service worker: The service worker retrieves the resources from the cache memory
and delivers the messages.
4. Webpack: It is used to design the PWA front-end. It allows the PWA-developers to
gather all JavaScript resources and data in one location.
5. Transport Layer Security (TLS):This component is a standard for all robust and secure
data exchange between any two applications. The integrity of the data requires the
website's service through the HTTPS and an SSL certificate installed on the server.
PWA- OFFLINE FUNCTIONALITY 10
Usually, websites are very dependent on both reliable network connectivity and on the user having their pages open
in a browser. Without network connectivity, most websites are just unusable, and if the user does not have the site
open in a browser tab, most websites are unable to do anything.
Garden City University | 2024
But PWA Offline operation provides a good user experience even when the device does not
have network connectivity. This is enabled by adding a service worker to an app.
A service worker controls some or all of the app's pages. When the service worker is installed, it can fetch the
resources from the server for the pages it controls (including pages, styles, scripts, and images, for example)
and add them to a local cache.
The Cache interface is used to add resources to the cache.
Then whenever the app requests a resource the browser fires an event called fetch in the service worker's global
scope.
One way a service worker can handle requests is a "cache-first" strategy. In this
strategy:
1. If the requested resource exists in the cache, get the resource from the cache and return the resource to the
app.
2. If the requested resource does not exist in the cache, try to fetch the resource from the network.
If the resource could be fetched, add the resource to the cache for next time, and return the resource to the app.
If the resource could not be fetched, return some default fallback resource.
PWA CACHING STRATEGIES 11
Caching strategies are fundamental to enhancing user experience in a PWA. They
determine how an application interacts with the cache, influencing factors like
performance and usability. In the world of PWAs, there are several key caching
strategies to understand.
Cache-First Strategy
The cache-first strategy, as its name implies, prioritizes the cache. When the application requests data, it first checks the
cache. If the requested data is available in the cache, the application uses it instead of fetching from the network. This leads
to swift user experiences and conserves bandwidth, but it poses a risk of serving stale (outdated) data.
Network-First Strategy
On the flip side, the network-first strategy prioritizes fetching from the network. Only when the network fails does the
application look to the cache for data. This strategy ensures fresh data is always served when available, though it may be
slower and use more bandwidth.
Stale-While-Revalidate Strategy
This strategy tries to balance speed and freshness. It serves from the cache (potentially stale data) for immediate response,
but updates the cache with fresh data from the network in the background for future requests. This ensures a quick user
experience and, over time, accurate results.
Network Only Strategy
Opposite to cache only, the network only strategy always fetches from the network, never using cached data. It's useful
when you always want to serve the most recent data, such as a news feed or live game scores.
ARCHITECTURE OF PUSH NOTIFICATIONS 12
Any push notification flow is mainly orchestrated using two entities, push providers and push
service. The complexity of how you manage these notification subscriptions or how the events are
queued or handled could vary. But these core concepts remain the same.
ARCHITECTURE OF PUSH NOTIFICATIONS 13
The Flow of a Push Notification:
Subscription:
The Application Frontend uses the Push Manager to request a subscription to push
notifications.
The Push Manager communicates with the Push Service to obtain a push subscription
endpoint (a unique URL).
This endpoint is sent back to the Application Frontend and then sent to the Application
Server. The Application Server stores this endpoint associated with the user.
Sending a Push Message:
When the Application Server wants to send a push notification to a user, it sends a message
to the Push Service, using the stored push subscription endpoint.
The Push Service then delivers the message to the user's device.
Receiving a Push Message:
The Push Service delivers the message to the Service Worker running in the user's browser.
The Service Worker can then display a notification to the user, even if the web page is closed.
If the user clicks on the notification, the Service Worker can open the web page or perform
other actions.
RECOMMENDATION SYSTEM 14
Recommendation systems, often known as recommender systems, are a type of information filtering
system that attempts to forecast the "rating" or "preference" that a user would assign to an item.
Algorithms in recommendation systems evaluate user data, such as prior purchases, reviews, or
browsing history, to find trends and preferences to utilize this information for recommending goods
that are likely to interest the user.
There are mainly three methodologies for Recommendation Systems: collaborative
filtering, content-based filtering, and hybrid systems.
Method 1. Collaborative filtering
Collaborative filtering operates by evaluating user interactions and determining similarities between people (user-based)
and things (item-based). For example, if User A and User B like the same movies, User A may love other movies that User B
enjoys
Method 2. Content-based filtering
Content-based filtering is a technique used in recommender systems to suggest items that are comparable with an item a
user has shown interest in, based on the item's attributes. It uses machine learning algorithms to classify similar items
based on inherent characteristics such as genres, directors, or keywords associated with previously seen movies.
Method 3. Hybrid systems
Hybrid systems in recommendation systems combine collaborative and content-based methods to leverage the strengths of
each approach, resulting in more accurate and diversified recommendations. These systems often start with content-based
filtering to study new users and gradually integrate collaborative filtering as more interaction data becomes available.
ML FOR RECOMMENDATION SYSTEM 15
React.js has revolutionized web development, making it easier to build interactive and dynamic user
interfaces. However, the potential of React.js doesn’t stop there. By integrating Artificial Intelligence
(AI) and Machine Learning (ML) models into React.js applications, developers can create smarter and
more personalized user experiences. for enhanced functionality.
Step 1: Choose the AI/ML ModelBefore diving into the integration process, it’s essential to select an
appropriate AI/ML model that aligns with your project’s objectives. Depending on your requirements, you
can choose from various pre-trained models or build custom models using popular AI/ML libraries such as
TensorFlow or PyTorch
Step 2: Create an APIOnce you have selected or developed your AI/ML model, the next step is to create an
API that exposes the model’s functionality to your React.js application. APIs serve as a bridge between the
front-end and back-end, allowing the application to communicate with the AI/ML model.
Step 3: Setup the React.js ProjectAssuming you have Node.js and npm installed, create a new React.js
project using Create React App
Step 4: Install TensorFlow.jsInstall TensorFlow.js and Axios
Step 5: Create the React.js ComponentCreate a react component ImageClassifier,that allows users to
upload an image and then classifies the image using the MobileNet model from TensorFlow.js.
Step 6: Incorporate the ComponentNow, update the App.js to include the ImageClassifier component:
Step 7: Run the React.js ApplicationFinally, start the React.js development server: Now, when you visit
http://localhost:3000, you'll see the "Image Classifier" app. When you upload an image, the app will use
MobileNet to classify the image's contents and display the top predictions along with their probabilities.
JAVASCRIPT & REACT - (SEO) 16
ReactJS is a powerful library for building dynamic and interactive user interfaces. However, its
client-side rendering model can create SEO hurdles. Traditional search engines like Google often
struggle to index content rendered on the client side. This means that content loaded via JavaScript
may not be indexed as effectively as static HTML content. Optimizing a ReactJS application for SEO
requires a combination of server-side rendering, static site generation, proper meta tags, structured
data, and performance optimizations.
1. Server-Side Rendering (SSR) Server-side rendering involves rendering your React components on
the server rather than the client. This way, the server sends fully-rendered HTML to the browser,
which search engines can index more easily.
2. Static Site Generation (SSG) Static Site Generation is similar to SSR but generates static HTML files
at build time rather than on each request. This approach can be more efficient and can be combined
with client-side interactivity.
3. Meta Tags and Structured Data: Meta tags are crucial for SEO as they provide search
engines with information about your page. Using the `react-helmet` library, you can
dynamically manage meta tags
4. Optimizing Performance Performance is a critical SEO factor. Ensure your ReactJS app is optimized
for speed by using code splitting, lazy loading, and optimizing images.
Garden City University | 2024
THANK YOU
Presented By : C.Indira Devi
