My own, personal, PWA
Progressive Web Apps are often something we think of as building for others, but while I was redoing the Service Worker implementation on this site���to improve performance for you, dear reader���I decided to throw in a little goody for me as well, in the form of the Share Target.
Early last year, Tim Kadlec shared his bookmarklet for saving links to his site. I thought it was a brilliant setup, especially for a static site:
The bookmarklet captures the URL, page title, and any selection you���ve made and pipes it over to a form on your site;
The form contains the code that will generate a new static file in you site���s GitHub repo.
Smartly, the form requires you to log in with your GitHub credentials. That keeps it from being abused by others. Sadly, I always struggled to get this setup working fluidly on mobile. With the introduction of the Share Target, it���s become a lot easier.
You define a Share Target in your Web App Manifest. The original design only allowed for links and text to be shared, but version 2 is coming soon with support for any file type.1 Pretty cool stuff! As you���d expect, the key is share_target and it takes a JSON object that looks a lot like a form configuration:
"share_target": {
"action": "linky/poo/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"title": "title",
"text": "body",
"url": "url"
}
}
The first key is the action page. In this case, it points at my link posting form. I want the shared data passed via the query string, so I���m using GET as the method (but you could use other HTTP request methods as well). I set the encoding (enctype) and then identify the parameters I want to send and what they should be called in the payload.
With this in place, I installed my site on my phone and could immediately share links directly to it:
This screenshot shows my PWA as a share target available within Android.
On the receiving end, everything works pretty well. Android doesn���t support sharing selected text along with the title of the page and the URL (like Tim���s bookmarklet does), but I can always copy the text I want to quote before I share the page. Another oddity in Android is that it currently sends the URL over as the body for some strange reason, but I set the JavaScript up on the resulting page to enable me to look for a URL in that field and pop it into the right spot. That way, when Android fixes the issue, it won���t cause any issues with a true text body (like your text selection���hint, hint).
Another nice enhancement I added to the form was autocomplete for the tag field. Using a datalist element, I have all of my site���s tags ready to autocomplete that field. Unfortunately, autocomplete doesn���t work great for multiple items out of the box, so I got some inspiration from this StackOverflow solution and implemented a vanilla JavaScript multiple choice datalist-driven input. Sweet!
While we often think of PWAs as being something we build for others, I���m totally stoked that I can also add PWA functionality that���s just for me (or, more broadly, internally-focused). That���s pretty exciting and demonstrates just how powerful and adaptable PWAs are.
Incidentally, the Share Target implementation for Universal Windows Apps has supported file type association for a long time now, which is why the Windows Store version of Twitter (which is a PWA) can receive images, videos, and more, right from the File Manager.��↩
