forks/miniflux
1
0
Fork 0
Code Releases Activity

Added maskable versions of the PWA icon.

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ui/static/bin/maskable-icon-120.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
ui/static/bin/maskable-icon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
ui/static/bin/maskable-icon-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

10
ui/static_manifest.go
View file

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