3
  1. Is it possible to create & submit an PWA launcher icon to a website marketplace?
  2. The launcher icon should work like a "Add to home screen" PWA function.

What I am trying to achieve is a PWA store making it easy for users to Add an icon to their homescreen for launching a PWA website. Please advice.

user10425302
  • 31
  • 1
  • 3
  • It's hard to tell, but this doesn't look on-topic for this site. If you can restrict this to a single question about a [mcve] then it is on topic. –  Sep 27 '18 at 16:51

3 Answers3

0

If you mean that in your web marketplace, you want to get the icons of submitted PWA then, you can get the PWA launch icons from either the link tags:

<link rel="icon" sizes="192x192" href="nice-highres.png"> (recommended)
<link rel="icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

or from the manifest.json icons section:

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}
Arshad Mehmood
  • 409
  • 3
  • 14
0

You can set the icon to be displayed according to sizes on home screen in manifest.json file.

https://developers.google.com/web/fundamentals/web-app-manifest/

"icons": [
{
  "src": "/images/icons-192.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "/images/icons-512.png",
  "type": "image/png",
  "sizes": "512x512"
}
]
Sid
  • 29
  • 7
-1

This is posible neither in iOS nor in Android:

Regarding the icons

  1. Android depends on the manifest.json file at the root of your domain to handle the information about the PWA.
  2. iOS: You may be able to change the icon and launch screen at the top of the page holding the link to the PWA, but this will not help you in any way, because Safari iOS does not allow you to generate a bookmark programmatically.

Regarding the actual link saved to the desktop

  1. Android Chrome checks the status of both the manifest and the certificate in the site before popping up the option to save a PWA to the Home Screen. If the popup appears in your site it will be for your PWA, not for the linked PWA.
  2. iOS does not have a way to programmatically add bookmarks. This seems to be on purpose, as a security measure. The only way to add the bookmark to the desktop is using the Safari Share button. Safari does validate your certificate at that moment before downloading the custom icon.

I understand that Android now lets you install PWAs from the Play Store, but the process to publish them there is convoluted.

What you can do

  1. Provide great information for users on how to install the PWAs listed in your site.
  2. Provide code to generate an install popup system in iOS for the developers publishing in your store, branded. We had to do that screen for this website and it took quite some time to get it right.
Community
  • 1
  • 1
ganar
  • 627
  • 8
  • 17