# How To Create A PWA?
As the name suggests, the development of a Progressive Web App (PWA) is an incremental process. Two pivotal components define a PWA: the **Manifest** and the **Service Worker**. These elements are independent of each other and not obligatory.
By integrating these two elements, the Manifest and the Service Worker, a PWA delivers an optimal user experience with easy installation, offline accessibility, and heightened performance, all while retaining the flexibility of web development.
### The Manifest
The Manifest, typically a JSON file, encompasses crucial metadata detailing the application, including its name, icons, theme, and launch configurations. This facilitates the installation of the PWA on the user's device and grants accessibility from the home screen, thereby creating an experience akin to that of a native app.
Below is an example:
{% code title="/site.webmanifest" lineNumbers="true" %}
```json
{
"name": "My Progressive Web App",
"short_name": "PWA",
"description": "An example Progressive Web App",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
```
{% endcode %}
This example manifest file includes essential information such as the app's name, a short name, description, start URL, display mode, and icons.
The Manifest file integration is done into your HTML file using appropriate tag:
{% code lineNumbers="true" %}
```html
...
...
```
{% endcode %}
### The Service Worker
The Service Worker, a background-executed JavaScript script, stands as the other key element. It enables the application to function offline by intercepting network requests and providing cached responses. The Service Worker also contributes to features such as resource caching, push notification management, and overall performance enhancement.
Here's a simple example:
{% code title="/service-worker.js" lineNumbers="true" %}
```javascript
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles/main.css',
'/scripts/main.js',
'/images/logo.png'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
```
{% endcode %}
This example service worker caches important files during the installation phase and then intercepts network requests, providing cached responses when available.
The Service Worker integration is done using appropriate script call:
```javascript
...
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://pwa.spomky-labs.com/1.1.x/how-to-create-a-pwa.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.