...

The module adds PWA service workers. By using this PWA feature a shop offers its customers the option to add your app to the home screen of their device. On the success page, PWA guide is displayed either as a short note or as a modal. The content of the guide is different for Android, IOS, and desktop devices.

Installation

...

$iOSBlockHtml = $cmsBlock->setBlockId('pwa_guide_ios')->toHtml();
$androidBlockHtml = $cmsBlock->setBlockId('pwa_guide_android')->toHtml();
$desktopBlockHtml = $cmsBlock->setBlockId('pwa_guide_desktop')->toHtml();

Custom IOS installation prompt

In order to inform users that s hsop is also available as an PWA installation optional custom IOS prompt functionaliuty is available in the module. On Android smartphones, this already works natively, after a short time of a user’s visit, a PWA installation prompt appears, and the app can be installed. Unfortunately, iOS currently does not support native installation prompts for PWAs like on Android devices. However, you can create a custom installation prompt to explain to users on iOS devices how to add the PWA to the home screen. Please note that this custom installation prompt for iOS devices is less seamless than the native installation prompt for Android devices. The user must manually follow the instructions to add the PWA to the home screen. Nevertheless, it is a viable method to help users on iOS devices install your PWA.

In Stores -> Configuration -> Magesuite -> PWA if the PWA is enabled set `Enable custom IOS installation prompt to Yes:

...

There are some setting that can be configured per project:

allowedDisplaysBeforeHiding: 3,
hidingTime: 10 * 24 * 60 * 60 * 1000, // 10 days
showTimeout: 10 * 1000, // 10 seconds after page is loaded
text: $.mage.__('Tap the "Share" icon <span class="cs-pwa-a2hs-guide__install-icon"></span> at the bottom of the screen and select "Go to Home Screen".'),

The default settings will results in the followijg behaviour:

• prompt is shown after 10 seconds from the page load (on every page)

• promopt is shown 3 times to a user

• after the prompt is hownd for the 3rd time, it is hidden for the next 10 days

If there is a need now to change settings 2 approaches can be used.

The first way is to overwrite vendor/creativestyle/magesuite-pwa/view/frontend/templates/pwa-installation-prompt-ios-js-init.phtml and pass proper config there

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "pwa-installation-prompt-ios": {
                    "component": "MageSuite_Pwa/js/pwa-installation-prompt-ios",
                    "config": {
                        "showTimeout": "2",
                        ....
                        ....
                    }
                }
            }
        }
    }
}
</script>

Another approach is to write a mixin and pass new options.

Styling

As the module is optional styling for PWA guide must be enabled in entries/checkout.ts

...