feat: PWA support with app icon derived from template favicon #169

New Issue

Open

opened 2026-07-18 16:15:24 +00:00 by jmiller · 1 comment

jmiller commented

2026-07-18 16:15:24 +00:00

Owner

Summary

Add Progressive Web App (PWA) support to the MokoOnyx template so the site is installable on mobile/desktop, using the template's existing favicon as the source for the PWA app icons.

Motivation

MokoOnyx is the successor to MokoCassiopeia. A web app manifest + icons makes any site built on the template installable ("Add to Home Screen"), sets the launch theme color, and improves the mobile experience with zero per-site configuration when the icon is derived automatically from the favicon the template already ships/exposes.

Scope

Add a web app manifest (manifest.json / manifest.webmanifest) with name, short_name, start_url, display: standalone, background_color, and theme_color.
Reference the manifest from index.php via <link rel="manifest" ...> and add the theme-color meta tag.
Derive the PWA app icons from the template favicon: generate/expose the required sizes (at minimum 192x192 and 512x512, plus a maskable variant) instead of maintaining a separate icon set.
Wire the icon path to the template's favicon parameter (template params) so a site admin setting a custom favicon also drives the PWA icon.
Add apple-touch-icon for iOS home-screen support.
(Optional / follow-up) Minimal service worker for installability + offline shell â€” evaluate whether to include or defer.

Notes

Colors (theme_color / background_color) should map to the template's existing color params where possible so branding stays consistent.
Keep the manifest generation template-driven (values from Joomla template params), not hardcoded, so it works across all sites built on MokoOnyx.

Acceptance criteria

Lighthouse "Installable" PWA check passes on a default MokoOnyx install.
Setting a custom favicon in the template params updates the PWA/home-screen icon without editing template files.

Pending: implementation. Do not close until tested and verified on a live MokoOnyx site.

## Summary Add Progressive Web App (PWA) support to the MokoOnyx template so the site is installable on mobile/desktop, using the template's existing favicon as the source for the PWA app icons. ## Motivation MokoOnyx is the successor to MokoCassiopeia. A web app manifest + icons makes any site built on the template installable ("Add to Home Screen"), sets the launch theme color, and improves the mobile experience with zero per-site configuration when the icon is derived automatically from the favicon the template already ships/exposes. ## Scope - [ ] Add a web app manifest (`manifest.json` / `manifest.webmanifest`) with `name`, `short_name`, `start_url`, `display: standalone`, `background_color`, and `theme_color`. - [ ] Reference the manifest from `index.php` via `<link rel="manifest" ...>` and add the `theme-color` meta tag. - [ ] Derive the PWA app icons from the template favicon: generate/expose the required sizes (at minimum `192x192` and `512x512`, plus a maskable variant) instead of maintaining a separate icon set. - [ ] Wire the icon path to the template's favicon parameter (template `params`) so a site admin setting a custom favicon also drives the PWA icon. - [ ] Add `apple-touch-icon` for iOS home-screen support. - [ ] (Optional / follow-up) Minimal service worker for installability + offline shell â€” evaluate whether to include or defer. ## Notes - Colors (`theme_color` / `background_color`) should map to the template's existing color params where possible so branding stays consistent. - Keep the manifest generation template-driven (values from Joomla template params), not hardcoded, so it works across all sites built on MokoOnyx. ## Acceptance criteria - Lighthouse "Installable" PWA check passes on a default MokoOnyx install. - Setting a custom favicon in the template params updates the PWA/home-screen icon without editing template files. --- *Pending: implementation. Do not close until tested and verified on a live MokoOnyx site.*

jmiller added the joomla type: feature labels 2026-07-18 16:15:24 +00:00

jmiller commented

2026-07-18 16:15:30 +00:00

Author

Owner

Branch created: feature/169-feat-pwa-support-with-app-icon-derived-f

git fetch origin
git checkout feature/169-feat-pwa-support-with-app-icon-derived-f

Branch created: [`feature/169-feat-pwa-support-with-app-icon-derived-f`](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/src/branch/feature/169-feat-pwa-support-with-app-icon-derived-f) ```bash git fetch origin git checkout feature/169-feat-pwa-support-with-app-icon-derived-f ```

Priority Medium

Type Feature

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoOnyx#169