Set up Progressive Web Application

A Progressive Web Application (PWA) is a web-based application that offers an app-like experience on mobile devices. It allows users to install Web Shop directly on their home screen, providing quick access without the need to open a browser and manually navigate to the store.

For platforms with redirection limitations, the PWA provides a more direct and convenient way for users to reach the store, reducing unnecessary steps and enhancing engagement. By streamlining access, PWA helps improve user retention and encourages more frequent purchases.

PWA installation user flow

On iOS devices

1. The user opens Web Shop on their mobile device.

2. Web Shop displays the application install prompt banner at the bottom of the screen.

3. The user clicks Install.

4. Web Shop displays the installation instructions for the PWA.

5. The user follows the instructions. As a result, the PWA is added to the home screen of the user’s device.

On Android devices

1. The user opens Web Shop on their mobile device.

2. Web Shop displays the application install prompt banner at the bottom of the screen.

3. The user clicks Install.

4. The user confirms the installation in the system dialog window.

5. The PWA is installed automatically and appears on the home screen and in the application drawer.

How to set up

1. In your project in Publisher Account, go to the Site Builder section.

2. In the pane of your Web Shop site, click Open Site Builder.

3. Go to Web App settings.

4. Set the Enable Web App toggle to active.

5. Customize the application install prompt banner (optional):
   • Change the banner header text.
   • Change the banner secondary text.
   • Set the custom background.
   • Change the button style.

6. Customize installation instructions (optional).

7. Set up PWA appearance on the user’s device:
   1. Specify the name of your PWA. It will be displayed on the home screen or in the application drawer of the user’s device.
   2. Upload a PWA icon.

お知らせ

If the PWA uses the same icon as your game, we recommend setting the Show icon frame toggle to active. This will add a frame around the store icon, making it easier for users to distinguish it from the game.

8. To apply changes, publish your site.