Is it possible to create & submit an PWA launcher icon to a website marketplace?
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.
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"
}
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"
}
]
This is posible neither in iOS nor in Android:
Regarding the icons
Android depends on the manifest.json file at the root of your domain to handle the information about the PWA.
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
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.
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
Provide great information for users on how to install the PWAs listed in your site.
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.
Related
Is there an accepted way to represent information about a website's favicon using https://schema.org? I am using image (to list here some of the icon variations that I generated using realfavicongenerator.net) with https://schema.org/WebSite in the following way:
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "WebSite",
"url": "http://localhost:4000/",
"name": "WebSite Name",
"image":
[
"/android-chrome-512x512.png",
"/android-chrome-192x192.png",
"/favicon-194x194.png"
]
}
</script>
A web search led me to discover the favicon for the schema.org website, but nothing about how to convey information about a website's favicon using schema.org.
Check the description of the logo property of Schema. As in your example, this property has:
Values expected to be one of these types ImageObject
However, there is also a difference from your example:
Used on these types Brand Organization Place Product Service
You can see that there is no WebSite type as specified in your example.
Additionally, you can use Google's guide for the logo property. Here you should pay attention to the following Google requirements:
logo URL
URL of a logo that is representative of the organization.
Additional image guidelines:
The image must be 112x112px, at minimum. The image URL must be
crawlable and indexable. The image file format must be supported by
Google Images.
From this info, we can conclude that Google requires a square, although this is not explicitly indicated.
Like any other image, the logo also needs to be compressed, and given the insignificant visual value, the compression can be maximum, for example, I use a 65% compression level.
Update: Basically the same issue as Standalone PWA breaks login but on iOS.
If you add a web app to the home screen, Chrome on android shares the local storage with the same domain in the browser. You can test this by going to https://wilfrem.github.io/add_to_homescreen_test/ then adding to home screen and see you have the same id when opened from home screen. (I did Nexus 5x)
If you do the same in iOS Safari you get a new id. (i did iPod iOS 12.1.1)
The oidc-client-js library sets a session reference in local storage and then recalls that on the web app
s signin callback. So if you try to log in from a web app opened from the home screen on iOS, it opens the OP (oidc provider) in Safari, then redirects back the web app's url, but in Safari not the opened from home screen web app, so because of the different local storage you get:
No matching state found in storage
How are you supposed to use oidc with an iOS opened from home screen web app if the local storage isn't shared across the same domain? Or how do I get iOS to reopen the correct window(the one opened from home screen) when redirecting back to the web app? Or how to I get iOS to never leave the fullscreen app when navigating to the OP (oidc provider) in the first place?
edit:
Here is a narrative to explain the issue.
open my.app.com
add to home screen
open app from home screen
click login button
login button calls UserManager.signinRedirect()
UserManager.signinRedirect() calls OidcClient.createSigninRequest()
OidcClient.createSigninRequest() stores signin state in localstorage and navigates to my.op.com see on android my.op.com opens a Chrome tab and on iOS my.op.com opens Safari
complete signin process on op
op redirects to my.app.com/signin-callback.html here is the problem
On android my.app.com/signin-callback.html opens in the app opened from the home screen, on iOS it stays in Safari. So you get:
No matching state found in storage
I'm not having difficulty with the error, based on what is happening the error is completely expected, I just don't know how to get Safari to behave in a way that will work with the library.
If its relevant this is my manifest.json
{
"name": "omitted",
"short_name": "omitted",
"theme_color": "#omitted",
"background_color": "#omitted",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "omitted",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "omitted",
"sizes": "512x512",
"type": "image/png"
}
]
}
add also removed scope but didn't have any change, in behavior.
update:
also tried setting start to full domain, not just relative /, still no change.
I have already experienced this problem and it has helped me.
See if it helps!
I'm using multiple blocks of structured data on my website:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Event",
"name": "Something",
"url": "http://www.example.com/?id=123"
}
</script>
This will show another bar under the search results of my website to directly visit the page to see more details about the event.
But if providing links like http://www.example.com/?id=123 Google will also show this link as normal link in search results.
But if setting noindex for this webpage Google will also refuse to list the events, won't it?
Does anybody know a solution?
Here's an image what I mean:
Put a canonical link with value http://www.example.com/ on the http://www.example.com/?id=123 page. All pages with query parameters will be merged into http://www.example.com/ regarding rankings.
I follow Google’s tutorial for improved search box within the search results just like above screenshot.
I added this code in my front sitepage:
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "WebSite",
"url": "https://www.xxx.com/",
"potentialAction": {
"#type": "SearchAction",
"target": "https://www.xxx.com/search/site/{keys}",
"query-input": "required name=keys"
}
}
</script>
Am I doing something wrong? My site uses Drupal 7.
Looks correct (assuming that /search/site/strawberry successfully searches for "strawberry").
Note that Google is not displaying the Sitelinks Search Box for all sites/queries:
Search box not displaying? The sitelinks search box appears only for navigational queries and when relevant for users. Google algorithms use a variety of factors to determine when the box appears, including the information on the site and different types of navigational queries from Search users.
Edit: 2017-05-09 Updated Sitelinks Search Box Information and URL
I have a very strange issue while sharing a page, probably connected to DNS used by Facebook.
I usually share pages from my own sites with no problem. In only one new site, I cannot correctly share any page.
where is the problem?
If I try to share a page from this new site (www.tarocchibluemoon.com), I expected to share an image, a page title etc.
However, I didn't see any images choosen from the ones in my page.
I used the debugger developers.facebook.com/tools/debug
and typed in the site http://www.tarocchibluemoon.com having a beautiful "Critical Errors must be fixed"
Looking deeper in Graph API I see:
{
"url": "http://www.tarocchibluemoon.com/",
"type": "website",
"title": "www.tarocchibluemoon.com",
"image": [
{
"url": "http://www.tarocchibluemoon.com/images/domain_reserviert.gif"
}
],
"updated_time": "2011-11-14T20:43:22+0000",
"id": "10150336639081017"
}
This means that debugger sees the site like it was a month ago when the provider showed the classic default page shown when you buy a new domain with written inside "The domain is reserved" (a page like this example).
Probably Facebook didn't received the update to the DNS done when I published the site!
I tried also to change again the IP address of my site but with no results.
I think the problem is the canonical tag in your head section (end of line 3):
<link href="http://bluemoon.thiellaconsulting.com/Default.aspx" rel="canonical" />
Facebook tries to scrape your canonical url - but in this case that url doesn't exist so you get a 'can't download' error.
If you switch that tag so it points to your current domain (or remove it altogether) you should allow Facebook to scrape the page and update it's graph entry.