> For the complete documentation index, see [llms.txt](https://yugalphp.gitbook.io/php/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yugalphp.gitbook.io/php/external-libraries/pwa.md).

# 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);
```