Progressive Web App
We recommend setting up PWA, which greatly improves user experience of your BooGi page.
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines (optionally).
To be considered a Progressive Web App, BooGi-based pages:
Progressive - Work for every user, regardless of browser choice.
Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next. (improvements in responsiveness are coming soon..)
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Use the app-shell model to provide app-style navigation and interactions.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content has not been tampered with. (depends on deployment option of your choice)
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Meaning they’re zero-friction, zero-install, and easy to share.
In order for PWA to work properly, following base properties must
be set properly as defined in base configuration:
Additional properties used, when provided, are:
calculated from name),
metadata.language (defaults to
|Set to |
|Customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome.|
Read more in the Display section below.
|Set value to |
You can find more information about crossorigin on MDN.
|Path to icon the app should use and generate icons of other resolution based on it. It must exist in |
Read more about icons in Icons section below.
|Value taken from |
|List of icons the app should use. Example: |
|Path to specific icon the app should use.|
|A string containing space-separated image dimensions used as app icons. Examples: |
|MIME Type of the icon used. It is automatically calculated, so override it with caution.||Automatically calculated|
There are three modes in which icon generation can function: automatic, hybrid, and manual.
- Automatic - Generate a pre-configured set of icons from a single source icon.
Used when only
- Hybrid - Generate a manually configured set of icons from a single source icon.
Used when both
- Manual- Don’t generate or pre-configure any icons.
Used when only
If favicon is missing and not defined in
pwa.metadata.favicon, it also will be created
in automatic or hybrid modes.
IMPORTANT: For best results, if you’re providing an icon for generation it should be:
- at least as big as the largest icon being generated (512x512 by default).
- square (if it’s not, transparent bars will automatically be added to make it square).
- of one of the following formats: JPEG, PNG, WebP, TIFF, GIF or SVG.
Below is a set of allowed properties of
|Opens the web application without any browser UI and takes up the entirety of the available display area.|
|Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar.|
|This mode is similar to |
|A standard browser experience.|
Minimal configuration example
metadata:name: My Awesome BooGi sitesiteImage: /assets/myapp.pngpathPrefix: /theme_color: '#0066cc'pwa:enabled: true
Full configuration example
metadata:name: My Awesome BooGi siteshort_name: BooPWAdescription: This is my PWA-enabled BooGi sitelanguage: enpathPrefix: /theme_color: '#0066cc'pwa:enabled: truemanifest:display: standalonecrossOrigin: use-credentialsicon: "/assets/mycustomicon.png"icons:- src: /assets/pwa-320.pngsizes: 320x320