Progressify
Generatify
Lightify
Rankify
SnapshotifyNavigation
Pro. A fixed bar of tabs pinned to the bottom of the screen on mobile, the way most native apps navigate.This matters most with the
standalone display mode, which removes the browser’s own back button. Without a tab bar or swipe navigation, visitors in a standalone app can get stranded.The contents of the tab bar. Each item takes an icon, a label, and a URL. Keep it to four or five items; more than that and the labels stop being readable on a narrow screen.
toggle
default:"off"
Restricts the tab bar to signed-in visitors. Useful on membership sites where the tabs point at account-only destinations.
Adds swipe-from-edge gestures for back and forward. A lighter alternative to the tab bar, and worth enabling alongside it in standalone mode.
toggle
default:"off"
A thin bar showing how far through the page the visitor has scrolled. Best suited to long-form content.
Visual modes
toggle
default:"off"
Pro. Adds a control that switches your site to a dark palette.Progressify derives the dark palette rather than reading one from your theme. If your theme already ships a dark mode, use that instead of this, or the two will fight.
select
default:"floating-button"
floating-button places a control over the page. menu-switch puts it in your navigation menu, which is less intrusive but easier to miss.toggle
default:"off"
Follows the visitor’s system theme automatically, so someone whose phone is set to dark gets dark on arrival without touching the switch. Turn this on whenever you turn on dark mode.
toggle
default:"off"
Switches to dark automatically below 10% battery. Only affects devices whose browser exposes battery level.
toggle
default:"off"
Blurs the page when the tab loses focus. A privacy gesture for sites showing personal information on shared screens. It also makes the app task switcher preview unreadable, so consider whether that helps or annoys your visitors.
Refresh interactions
toggle
default:"off"
Pro. Drag down at the top of the page to reload, as in most mobile apps.
Some themes and sliders bind their own touch handlers at the top of the page. If dragging does nothing, or triggers something else, that is usually the conflict.
toggle
default:"off"
Pro. Shaking the device reloads the page. Discoverable only by accident, so treat it as a bonus rather than a primary control, and avoid it on sites where an accidental reload loses work.
System feedback
toggle
default:"on"
Shows an animation between page loads, which fills the gap that would otherwise look like a frozen app.
select
default:"default"
skeleton reads as fastest because it hints at the layout arriving. percent only makes sense if your pages are heavy enough for the number to move.toggle
default:"off"
Pro. Small transient messages at the edge of the screen for confirmations and errors, replacing the browser’s own alerts.
User actions
A floating button that opens the device’s native share sheet through the Web Share API, so visitors share to whatever apps they actually use rather than to a fixed list of networks.
select
default:"bottom-right"
bottom-right, bottom-left, top-right, or top-left. Check it against your theme’s own floating elements, such as a chat widget or a back-to-top button.Custom CSS and JS
code
Pro. CSS applied only when the site is running as an installed PWA. Use it for adjustments that should not affect ordinary web visitors, such as padding for a device notch or hiding a header that duplicates the app title bar.
code
Pro. JavaScript loaded under the same condition.