# PWA

{% hint style="danger" %}
This Library is no longer working in Yugal 8.9 and Above, developers will get a CLI alternative for it soon.
{% endhint %}

Developer can easily setup Progressive Web Apps in Yugal within few clicks.

## Step 1 : Install PWA Library

```bash
yugal --install https://github.com/sinhapaurush/pwa.git
```

## Step 2 : Setup PWA Variables

PWA Library needs some details about your App for building Manifest file for PWA.

```php
// PWA CONFIGURATIONS
define("PWA_DESCRIPTION", "This is an app");
define("PWA_BG_COLOR", "#ffffff");
define("PWA_ICON", "./src/assets/yugal.png");
```

**IMPORTANT:** Provide path to you site's Icon you want to use as PWA Icon. **Add this ICON in assets directory in ./src directory.** Provide the path to icon relative to `index.php` This library will resize the provided image to several sizes for PWA and save them in `pwa-public-icons`  directory. It will create this directory if unexisted. 

This library will build `manifest.json` and `pwa-sw.js` in project's root directory accordingly. 

These are extra `CONSTANTS` needed for configuring PWA, this library also needs pre-defined constants which are `DEV_MODE`, `SITE_TITLE`, `THEME_COLOR` which are already in `string.php` file. Also, make `DEV_MODE` to `true` in order to build manifest and service worker file and re-writing `chunk` files for `PWA`

## Step 3 : Connecting Library to Project

In `index.php` file, in `head` function add this library. Make sure `head` function is called just above `end_doc` function.

Example

```php
head([
    "library"=>[
        "pwa"
    ]
]);
end_doc();
```

## Step 4 : Save and Test File

Customize project directory permission and allow `Reading and Writing` by `Others` so that this library can write required files. Then open/reload the project in browser. If you see no change, then try `Ctrl+Shift+R` for hard reloading. This will delete cache in browser. If you see any permission error, then provide `Read and Write` permission to `Others` on respective file and directory. Ofcourse you can make permission back to secure settings when `DEV_MODE` is `false` .

When you find no error, check Application tab in Inspect and check for Application details.

**PWA IS ONLY VISIBLE IN PWA SUPPORTED BROWSERS: Chrome, Edge etc.**

## PWA JS Function

You can show native PWA installation prompt to users using `pwa.install()` function in JavaScript.

{% hint style="info" %}
`pwa.install()` function will only work when called after user gesture in order to maintain Webkit's policy.
{% endhint %}

Example

```javascript
yugal.$("#pwa-install-btn").addEventListener("click", ()=>{
    pwa.install();
});
```

## Custom Service Worker

You can define additional Service Worker code to configure other features for PWA like push notifications by defining the code in a constant in `string.php`.

This constant should be called `PWA_SW` 

**Example**

```php
$additional_code = <<<JS
                    //SOME EXTRA SERVICE WORKER CODE
                    JS;
define("PWA_SW", $additional_code);
```


---

# 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://yugalphp.gitbook.io/php/external-libraries/pwa.md?ask=<question>
```

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.