PWA

This Library is no longer working in Yugal 8.9 and Above, developers will get a CLI alternative for it soon.

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

Step 1 : Install PWA Library

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.

// 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

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.

pwa.install() function will only work when called after user gesture in order to maintain Webkit's policy.

Example

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

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