Added maskable versions of the PWA icon.

Recent versions of Android allows the user to choose their own
homescreen icons shape. This introduces the concept of maskable PWA
icons, which without the "purpose" tag and properly padded icons makes
the homescreen icon look really boxy and weird.

This adds a new version of the icon with more padding in three sizes, as
well as the "purpose" attribute in the manifest.json file. The three old
icons are retained for compatibility with desktop and iOS.
This commit is contained in:
Pontus Jensen Karlsson 2023-05-07 11:40:16 +02:00 committed by Frédéric Guillot
parent 4c0c658152
commit 9fdbd180df
4 changed files with 10 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -27,9 +27,10 @@ func (h *handler) showWebManifest(w http.ResponseWriter, r *http.Request) {
}
type webManifestIcon struct {
Source string `json:"src"`
Sizes string `json:"sizes"`
Type string `json:"type"`
Source string `json:"src"`
Sizes string `json:"sizes"`
Type string `json:"type"`
Purpose string `json:"purpose"`
}
type webManifest struct {
@ -63,9 +64,12 @@ func (h *handler) showWebManifest(w http.ResponseWriter, r *http.Request) {
ThemeColor: themeColor,
BackgroundColor: themeColor,
Icons: []webManifestIcon{
{Source: route.Path(h.router, "appIcon", "filename", "icon-120.png"), Sizes: "120x120", Type: "image/png"},
{Source: route.Path(h.router, "appIcon", "filename", "icon-192.png"), Sizes: "192x192", Type: "image/png"},
{Source: route.Path(h.router, "appIcon", "filename", "icon-512.png"), Sizes: "512x512", Type: "image/png"},
{Source: route.Path(h.router, "appIcon", "filename", "icon-120.png"), Sizes: "120x120", Type: "image/png", Purpose: "any"},
{Source: route.Path(h.router, "appIcon", "filename", "icon-192.png"), Sizes: "192x192", Type: "image/png", Purpose: "any"},
{Source: route.Path(h.router, "appIcon", "filename", "icon-512.png"), Sizes: "512x512", Type: "image/png", Purpose: "any"},
{Source: route.Path(h.router, "appIcon", "filename", "maskable-icon-120.png"), Sizes: "120x120", Type: "image/png", Purpose: "maskable"},
{Source: route.Path(h.router, "appIcon", "filename", "maskable-icon-192.png"), Sizes: "192x192", Type: "image/png", Purpose: "maskable"},
{Source: route.Path(h.router, "appIcon", "filename", "maskable-icon-512.png"), Sizes: "512x512", Type: "image/png", Purpose: "maskable"},
},
ShareTarget: webManifestShareTarget{
Action: route.Path(h.router, "bookmarklet"),