Fwd: Proposal about make "install page as an app" icon follow Apple style
Dan Murphy
Subject: Proposal about make "install page as an app" icon follow Apple style
------------------------
Date: Fri, Sep 27, 2024 at 2:58 AM
To: dmurph <dmu...@google.com>, Yuncong Zhuang <yzh...@microsoft.com>
Cc: Natasha Gaitonde <naga...@microsoft.com>, Xiaobin Cui <xiaob...@microsoft.com>, Lingyan Zhao <lingy...@microsoft.com>
Hi Dan, this is Lingchao from Edge PWA team in China, and I heard from Natasha that you are the manager in Chromium PWA team, very nice to e-meet you!
@Yuncong Zhuang from my team recently has been investigating on fix this bug: MacPWAs PWA Icons are too big on macOS if 'maskable' icons not specified [40827667] - Chromium, and we have a design doc almost ready for review: Make "install page as an app" icon follow Apple style - Google Docs. Could you help to review? Any feedback is highly appreciated. Thanks a lot!
We’ve been working on PoC and below is a before/after comparison. The first two Apple icons are benchmarks, and latter four icons look much better and follow Apple style after the icon refinement algorithm.
Before:
After:
Thanks,
Lingchao
From: Dan Murphy <dmu...@google.com>
Date: Fri, Sep 27, 2024 at 9:21 AM
To: Lingchao Guo <lin...@microsoft.com>, Vincent Scheib <sch...@google.com>, Marijn Kruisselbrink <m...@google.com>
Cc: Yuncong Zhuang <yzh...@microsoft.com>, Natasha Gaitonde <naga...@microsoft.com>, Xiaobin Cui <xiaob...@microsoft.com>, Lingyan Zhao <lingy...@microsoft.com>
- Many devs don't provide maskable icons.
- Many devs don't make sure their 'any' icon works on mac / looks right.
- To be fair to them, you can't customize your icons to be one thing on mac, and one thing on windows, one thing on CrOS, etc (other than maskable).
- (hardest) Introduce a new icon purpose / manifest spec change to allow this.
- ... give up for the above cases?
- Say that we'll do the 'solid color' detection and mask that (case 3), but not the 'white rounded rectangle' case (case 4).
From: Lingchao Guo <lin...@microsoft.com>
Date: Sun, Sep 29, 2024 at 2:44 AM
To: dmurph <dmu...@google.com>, Vincent Scheib <sch...@google.com>, Marijn Kruisselbrink <m...@google.com>
Cc: Yuncong Zhuang <yzh...@microsoft.com>, Natasha Gaitonde <naga...@microsoft.com>, Xiaobin Cui <xiaob...@microsoft.com>, Lingyan Zhao <lingy...@microsoft.com>
Hi Dan, thank you for your detailed reply!
As our doc emphasized, our scope is just limited to a site/page which does not have a web app manifest (aka. not a PWA app), which means web developer does not intentionally provide icons in a manifest. I agree that we should respect that ‘any’ icon should not be masked if the icon is declared in a web app manifest. But if the icon is not declared in a web app manifest, then I think the browser should have kind of freedom to mask the icon to make it more blend into the native system (MacOS icon style in this case). This is what Safari on Mac currently do.
From users’ perspective, I’d like my icons listed on my docker looks Apple style with a same icon size. The icons in the docker comes from two sources: one is Apple native apps (we couldn’t control), and the other is the pages/apps installed from different browsers (mainly Safari and Chromium-based browsers). So if our ultimate goal is to make icons on Mac docker looks more native and similar icon style, then I think Chromium-based browsers and Safari should have a similar design direction, rather than diverging. Just some of my thoughts, what do you think?
Below we’ve added Safari’s behavior as comparison as well, and including some icons Dan mentioned below (sorry for the bad icon resolution). Believe it or not, Safari also add a white rounded background when installing these sites (Grammarly, HextEdit, etc).
Before:
After:
Safari:
BTW, we will have a National Day holiday at 10/1-10/7, and all China folks will be OOF and may not be able to respond timely, and we will reply as soon as we come back. Thank you!
Thanks,
Lingchao
From: Dan Murphy <dmu...@google.com>
Sent: Saturday, September 28, 2024 12:21 AM
To: Lingchao Guo <lin...@microsoft.com>; Vincent Scheib <sch...@google.com>; Marijn Kruisselbrink <m...@google.com>
Cc: Yuncong Zhuang <yzh...@microsoft.com>; Natasha Gaitonde <naga...@microsoft.com>; Xiaobin Cui <xiaob...@microsoft.com>; Lingyan Zhao <lingy...@microsoft.com>
Subject: [EXTERNAL] Re: Proposal about make "install page as an app" icon follow Apple style
Hi!
I'm the TL of the PWA area, +Vincent Scheib is a good macro manager for PWA, and +Marijn Kruisselbrink knows a lot of history here on Mac for icon masking.
Very cool doc! I believe our current state is: "If the developer specifies masked icons, then we mask them and they look good. Otherwise, we respect that the 'any' icons will not be masked". I think the purpose here is that the masking guidelines from Apple aren't a literal mask requirement as much as a guideline, and if you look at the app store there are a bunch of icons in for apps approved in the Maac app store that break it but are OK:
So I believe we got stuck here in that we didn't want to 'limit' developers to masking. However, as you know:
- Many devs don't provide maskable icons.
- Many devs don't make sure their 'any' icon works on mac / looks right.
- To be fair to them, you can't customize your icons to be one thing on mac, and one thing on windows, one thing on CrOS, etc (other than maskable).
Your proposal handles the solid colors well - I'm wondering if it's possible for us to also not force the above icons to be "put into the white rounded rect". Do you have any ideas there? Some initial ideas:
- (hardest) Introduce a new icon purpose / manifest spec change to allow this.
- ... give up for the above cases?
- Say that we'll do the 'solid color' detection and mask that (case 3), but not the 'white rounded rectangle' case (case 4).
Marijn may have more context here or maybe there is another solution.
From: Dan Murphy <dmu...@google.com>
Date: Mon, Sep 30, 2024 at 8:46 AM
To: Lingchao Guo <lin...@microsoft.com>
Cc: Vincent Scheib <sch...@google.com>, Marijn Kruisselbrink <m...@google.com>, Yuncong Zhuang <yzh...@microsoft.com>, Natasha Gaitonde <naga...@microsoft.com>, Xiaobin Cui <xiaob...@microsoft.com>, Lingyan Zhao <lingy...@microsoft.com>
Hi Dan, thank you for your detailed reply!
As our doc emphasized, our scope is just limited to a site/page which does not have a web app manifest (aka. not a PWA app), which means web developer does not intentionally provide icons in a manifest. I agree that we should respect that ‘any’ icon should not be masked if the icon is declared in a web app manifest. But if the icon is not declared in a web app manifest, then I think the browser should have kind of freedom to mask the icon to make it more blend into the native system (MacOS icon style in this case). This is what Safari on Mac currently do.
From users’ perspective, I’d like my icons listed on my docker looks Apple style with a same icon size. The icons in the docker comes from two sources: one is Apple native apps (we couldn’t control), and the other is the pages/apps installed from different browsers (mainly Safari and Chromium-based browsers). So if our ultimate goal is to make icons on Mac docker looks more native and similar icon style, then I think Chromium-based browsers and Safari should have a similar design direction, rather than diverging. Just some of my thoughts, what do you think?
Below we’ve added Safari’s behavior as comparison as well, and including some icons Dan mentioned below (sorry for the bad icon resolution). Believe it or not, Safari also add a white rounded background when installing these sites (Grammarly, HextEdit, etc).