joomla-cms
joomla-cms copied to clipboard
joomla
[5.3][PWA] app.webmanifest (manifest.json) file for Joomla
Is your feature request related to a problem? Please describe.
app.webmanifest (legacy name: manifest.json) file for @Joomla
Docs: @Mozilla @MDN: Web App Manifest - https://developer.mozilla.org/docs/Web/Manifest @GoogleChrome: What are Progressive Web Apps? - https://web.dev/articles/what-are-pwas Add a web app manifest - https://web.dev/articles/add-manifest Make it installable - https://web.dev/codelab-make-installable/ (from @google) @W3C: https://w3c.github.io/manifest/ Web Application Manifest - https://www.w3.org/TR/appmanifest/ Web App Manifest - Application Information - https://www.w3.org/TR/manifest-app-info/ Explainer - https://github.com/w3c/manifest/blob/gh-pages/explainer.md @PWA-Builder PWA Docs - https://docs.pwabuilder.com/ @Microsoft PWA Docs - https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/README
Describe the solution you'd like
Linking to a manifest:
<head>
<link rel="manifest" href="app.webmanifest">
</head>
app.webmanifest Example:
{
"name": "Joomla! CMS",
"short_name": "Joomla",
"description": "Joomla! CMS",
"start_url": "/",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"icons": [
{
"src": "apple-touch-icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "images/icons/icon512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "images/icons/icon-1024.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "images/icons/monochrome-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "monochrome"
},
{
"src": "images/icons/monochrome-icon-1024.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "monochrome"
}
],
"screenshots": [
{
"src": "images/screenshots/joomla-1.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla - Mobile App"
},
{
"src": "images/screenshots/joomla-2.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla - Mobile App"
},
{
"src": "images/screenshots/joomla-3.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla News - Mobile App"
},
{
"src": "images/screenshots/joomla-desktop.jpg",
"sizes": "1024x768",
"type": "image/jpg",
"form_factor": "wide",
"label": "Joomla Desktop"
}
],
"dir": "auto",
"scope": "/",
"lang": "en",
"orientation": "any",
"categories": [
"tools",
"news"
],
"edge_side_panel": {
"preferred_width": 400
},
"id": "/",
"prefer_related_applications": false,
"shortcuts": [
{
"name": "News",
"url": "news",
"description": "Joomla News",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
},
{
"name": "Downloads",
"url": "downloads",
"description": "Joomla Downloads",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
},
{
"name": "Extensions",
"url": "extensions",
"description": "Joomla Extensions",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
}
],
"launch_handler": {
"client_mode": [
"navigate-existing",
"auto"
]
},
"handle_links": "auto",
"scope_extensions": [
{
"origin": "*.joomla.org"
}
],
"display_override": [
"standalone",
"window-controls-overlay"
],
"protocol_handlers": [
{
"protocol": "web+home",
"url": "/index.php?%s"
},
{
"protocol": "web+article",
"url": "/index.php?option=com_content&amp;view=article&amp;id=%s"
},
{
"protocol": "web+blog",
"url": "/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=%s"
}
],
"related_applications": [
{
"platform": "webapp",
"url": "https://joomla.org/app.webmanifest",
"id": ""
}
]
}
This file is part of PWA for Joomla: https://github.com/joomla/joomla-cms/issues/44172, https://github.com/joomla/joomla-cms/discussions/44182, https://github.com/joomla/joomla-cms/issues/44311
Additional context
Test your manifest:
- you can test this
manifesthere: https://www.pwabuilder.com (this is the PWABuilder website for testing the manifest from @Microsoft) - To verify your manifest is set up correctly, use the
Manifestpane in theApplicationpanel of Chrome DevTools: https://web.dev/articles/add-manifest#test-manifest
Service Worker:
Service Worker&Offline Page: https://github.com/joomla/joomla-cms/issues/44171Web Share API: https://github.com/joomla/joomla-cms/issues/44311- Demo url: https://webboard.app (from @PWA-Builder) @wikipedia Wikipedia - https://en.wikipedia.org/wiki/Progressive_web_app
A few people are working on this and it should be available in Joomla 4. We already (we = the production leader, the js group leader and all the members of the PWA group) have an agreement on how this should be implemented (this was done in JWC 2017), the only missing part here is the API for the templates but I guess this will be resolved in the coming weeks. So please stay tuned and maybe test the code as soon as we publish it in the J4 repo.
@brianteeman, I recently manually created this file with the site settings and thought that it would be cool to be able to make these settings through the CMS admin panel!
@dgt41, thanx!
Changed Title to show Issue is about 4.0.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19877.
@sanek4life Thanks! keep working hard on that.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19877.
I think you can add this to site settings (how is it done for file configuration.php)
Also look, W3C wants to add a new parameter translations that will be useful for multilingual sites - https://github.com/w3c/i18n-activity/issues/914
Also useful information and sample files (for installation) can be seen here:
https://web.dev/codelab-make-installable/ (from @google) https://www.pwabuilder.com/ (from @microsoft)
It's been 6.5 years since the issue was opened, 4 years since the last comment was made. Is this still a valid issue? Should we keep it open?
It's been 6.5 years since the issue was opened, 4 years since the last comment was made. Is this still a valid issue? Should we keep it open?
This setting should be in @Joomla Control Panel settings.
Here is the code, this is how this app.webmanifest (formerly: manifest.json) might look like:
{
"name": "Joomla! CMS",
"short_name": "Joomla",
"description": "Joomla! CMS",
"start_url": "/",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
"icons": [
{
"src": "apple-touch-icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "images/icons/icon512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "images/icons/icon-1024.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "images/icons/monochrome-icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "monochrome"
},
{
"src": "images/icons/monochrome-icon-1024.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "monochrome"
}
],
"screenshots": [
{
"src": "images/screenshots/joomla-1.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla - Mobile App"
},
{
"src": "images/screenshots/joomla-2.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla - Mobile App"
},
{
"src": "images/screenshots/joomla-3.jpg",
"sizes": "1080x2186",
"type": "image/jpg",
"form_factor": "narrow",
"label": "Joomla News - Mobile App"
},
{
"src": "images/screenshots/joomla-desktop.jpg",
"sizes": "1024x768",
"type": "image/jpg",
"form_factor": "wide",
"label": "Joomla Desktop"
}
],
"dir": "auto",
"scope": "/",
"lang": "en",
"orientation": "any",
"categories": [
"tools",
"news"
],
"edge_side_panel": {
"preferred_width": 400
},
"id": "/",
"prefer_related_applications": false,
"shortcuts": [
{
"name": "News",
"url": "news",
"description": "Joomla News",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
},
{
"name": "Downloads",
"url": "downloads",
"description": "Joomla Downloads",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
},
{
"name": "Extensions",
"url": "extensions",
"description": "Joomla Extensions",
"icons": [
{
"src": "icon96.png",
"type": "image/png",
"sizes": "96x96"
}
]
}
],
"launch_handler": {
"client_mode": [
"navigate-existing",
"auto"
]
},
"handle_links": "auto",
"scope_extensions": [
{
"origin": "*.joomla.org"
}
],
"display_override": [
"standalone",
"window-controls-overlay"
],
"protocol_handlers": [
{
"protocol": "web+home",
"url": "/index.php?%s"
},
{
"protocol": "web+article",
"url": "/index.php?option=com_content&amp;view=article&amp;id=%s"
},
{
"protocol": "web+blog",
"url": "/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=%s"
}
]
}
you can test this manifest here: https://www.pwabuilder.com (this is the PWABuilder website for testing the manifest from @Microsoft)
@W3C: https://www.w3.org/TR/appmanifest/
The biggest issue here is dealing with theme colors and such when every template provider does color schemes differently
I updated the manifest file (example) in my first post, I added the related_applications value.
Any PWA application has a webapp, because webapp is a reference to the manifest of your PWA application.
Source: https://web.dev/learn/pwa/detection#detecting_related_installed_apps Platforms: https://github.com/w3c/manifest/wiki/Platforms
Example:
...
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
...
Now you can get all the necessary points in the @PWA-builder test (except for the age rating point, which you can find iarc_rating_id in the control panel of the official app store like @Google Play, @apple App Store, @Microsoft Store, etc):
please test the manifest file (and other related files) here: https://www.pwabuilder.com/
The biggest issue here is dealing with theme colors and such when every template provider does color schemes differently
This will not be a problem, by default you can specify white color there and by default the manifest file can be disabled.
Each website owner will be able to manually select the color via color picker or manually enter their own value in this field.
Just as each website owner manually enters values such as Site Title and Site Description, each website owner will be able to select a value for the theme_color, this will not be a problem.
and??
A few people are working on this and it should be available in Joomla 4.
@brianteeman @dgrammatiko this was supposed to be in @Joomla 4, but now Joomla 5.2 is coming out and it's still not part of CMS. I added working code examples and updated all the information in my first post, I hope this helps.
I also described this feature here: https://github.com/joomla/joomla-cms/discussions/44182
it's just one extra page of settings in the Control Panel with the generation of this very important manifest file.