almanac.httparchive.org
almanac.httparchive.org copied to clipboard
HTTPArchive
Add Web Share API to chapters
To encourage readers to share chapters, let's add support for the Web Share API. Browser support is mostly mobile-only, so we should use feature detection before adding the UI.
We should also add an analytics event when someone uses the share button.
More info: https://web.dev/web-share/
And pinging our resident experts in new APIs: @christianliebel / @tomayac for any tips or advice on this one!
Interestingly, my browser doesn't support the API but on that web.dev post clicking the share CTA opens up a new window with a prepopulated tweet. I like that approach so that there's an action for even the unsupported browsers.
It's coming to desktop (and already is on Windows), but definitely needs feature detection for now. I think falling back to a tweet intent is the way to go given the audience is oftentimes on Twitter.
What is the design tag for this issue? I'm not familiar with web share API
The Web Share API, allows you to use the native OS share features.
More details here: https://web.dev/web-share/
And they have also implemented it on that site! Try it! It's not supported on Desktop Chrome (so they fall back to a Twitter pop up). However if you visit it on your mobile (iOS or Android Chrome) then you see it in action.
So the design question is, if we did implement this, then where should it go? We currently have a "Reactions" floating link on mobile which takes you to the Reactions section below. Should this replace that? Or be in addition to that (like web.dev has two floating buttons)? Or something else? Also do we like the Twitter fallback or should we just hide it on browsers that don't support it?
I happen to have just written an article about a progressively enhanced Share button. Here's the staging preview. Feel free to take the code from there.
Oh I see! Desktop safari actually seems to support a version of it, it's pretty neat.
I think we had another ticket last year that also added additional actions where the reaction button was (comments maybe?) but I can't find where it is. There was a design option there that had a "..." button that was able to host several slots. I think we also discussed there the issues with taking up more room on the mobile view.
Could this also work as a share button on the top and/or bottom of the article page?
Found it: https://github.com/HTTPArchive/almanac.httparchive.org/pull/2196
Oh interesting to know about Desktop Safari. Though that potentially highlights the danger here too as I don't think those options are that useful to be honest. There's no Tweet, nor Copy button, and I don't even have a Mail button as I use Gmail rather than an installed client like Mail. Also it doesn't seem like the page can influence what shows here (correct me if I'm wrong @tomayac ?).
Still it is a progressive enhancement.
I think we had another ticket last year that also added additional actions where the reaction button was (comments maybe?) but I can't find where it is. There was a design option there that had a "..." button that was able to host several slots. I think we also discussed there the issues with taking up more room on the mobile view.
That might be worthwhile revisiting now we've dropped the reaction count in favour of webmentions, so I'm less concerned with hiding it behind a menu now.
Could this also work as a share button on the top and/or bottom of the article page?
Absolutely. Though think it's more likely to be used if it's floating.
@tomayac you any ideas if it's used much on web.dev?
Oh interesting to know about Desktop Safari. Though that potentially highlights the danger here too as I don't think those options are that useful to be honest. There's no Tweet, nor Copy button, and I don't even have a Mail button as I use Gmail rather than an installed client like Mail. Also it doesn't seem like the page can influence what shows here (correct me if I'm wrong @tomayac ?).
You can't determine what's there, but I agree: a copy feature would be neat. On Windows, if you have the Twitter PWA installed, it does show up, since it's a share target, so it definitely is very useful there. I hope in the long-term we will get there, too, on macOS.
Still it is a progressive enhancement.
Ça!
@tomayac you any ideas if it's used much on web.dev?
Not a ton of usage, but definitely some.