Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PWA No supplied icon is at least 144px square #17384

Closed
14 tasks
richardscholten73 opened this issue Apr 3, 2020 · 2 comments · Fixed by #17386
Closed
14 tasks

PWA No supplied icon is at least 144px square #17384

richardscholten73 opened this issue Apr 3, 2020 · 2 comments · Fixed by #17386
Labels
area: angular/pwa freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Milestone

Comments

@richardscholten73
Copy link

richardscholten73 commented Apr 3, 2020

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • [ x] add @angular/pwa
  • update
  • lint
  • xi18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

I dont know

Description

When i add pwa to my project with add @angular/pwa the generated manifest includes icons with "purpose": "maskable". But the current chrome browser demands "purpose": "maskable any" (as mentioned in this post: https://stackoverflow.com/questions/59958247/pwa-manifest-does-not-contain-a-suitable-icon) Because of this the install option for pwa does not apear in the address bar when opening the app in a browser (the + sign in the address bar and the install option from the ... menu)

🔬 Minimal Reproduction

Follow this guide: https://angular.io/guide/service-worker-getting-started

🔥 Exception or Error

"Manifest does not include a suitable icon" and "No supplied icon is at least 144px square".


## 🌍 Your Environment
Windows 10 Chrome 80+



     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.6
Node: 12.14.1
OS: win32 x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/service-worker           9.0.7
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?
Chrome Version 80.0.3987.163 (Official Build) (64-bit)

@alan-agius4 alan-agius4 added area: angular/pwa freq1: low Only reported by a handful of users who observe it rarely type: bug/fix labels Apr 3, 2020
@ngbot ngbot bot modified the milestone: needsTriage Apr 3, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Apr 3, 2020
@richardscholten73
Copy link
Author

@alan-agius4 Whow that was fast :)

mgechev pushed a commit that referenced this issue Apr 6, 2020
The `purpose` property defines the purpose of an icon, for example if the icon is intended to serve some special purpose in the context of the host OS (i.e., for better integration).

`Purpose` can have one or more of the following values, separated by spaces:

- `badge`: A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon.
- `maskable`: The image is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can safely be ignored and masked away by the user agent.
- `any`: The user agent is free to display the icon in any context (this is the default value).

Closes #17384
mgechev pushed a commit that referenced this issue Apr 6, 2020
The `purpose` property defines the purpose of an icon, for example if the icon is intended to serve some special purpose in the context of the host OS (i.e., for better integration).

`Purpose` can have one or more of the following values, separated by spaces:

- `badge`: A user agent can present this icon where space constraints and/or color requirements differ from those of the application icon.
- `maskable`: The image is designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can safely be ignored and masked away by the user agent.
- `any`: The user agent is free to display the icon in any context (this is the default value).

Closes #17384
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: angular/pwa freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants