Adding support so other mobile apps can share to my React PWA
We’re all familiar with the sharing built into mobile operating systems these days. The ubiquitous share button provides a standard way to pass the context from one application to another.
I detailed building an app that I call “What Can I Borrow?” (“WCIB”) in a story I posted on managing state between React URL routing and browser local storage. The app’s main job is checking which books on a Goodreads list or shelf are available as digital loans at my local library. Recently I found myself wondering if I could create a way to check on just one book that I happened to be looking at in the Goodreads app. Sometimes friends or family will share me a Goodreads link, or I’ll see a book in my feed, and I’d like to know if that one is available.
I wanted to be able to “share” the book from Goodreads directly to my installed app and have the app do the work to check on availability at the library and show the result.
WCIB is a progressive web app (PWA), not a native mobile app. It’s a bog-standard React single page application with a special manifest and a Service Worker from a Create React App template that means it can be installed as an app on modern mobile OSes. When the user browses to the web URL for a PWA, the browser pops up a message offering to “install” it. An icon is added to launch it that runs a browser in a dedicated full screen frame to appear as if it is a regular mobile app.
It turns out that the PWA spec also includes the ability for an app to act as a “share target”. I followed the official instructions to tweak the PWA manifest.json and add the share target information:
The share_target section tells the OS that the installed PWA will accept a share as a get request and to send the request to the relative url /share with parameters title, text, and url.
Once I’d installed the version with the updated manifest, I could see WCIB in the list of potential apps to share to after clicking the share button in the Goodreads app.
I wasn’t sure what Goodreads would be sending to the app, so I installed the test app on the PWA site and shared a book from Goodreads to it. The title parameter was populated (unsurprisingly with a summary title) but the url was not. Instead the text parameter contained a perky “user has shared a book with you” type message and the URL in plain text. Social media apps will usually treat a plain text URL as legitimate and link it anyway, so I guess Goodreads are just relying on that happening.
I created a new React component to show a single book lookup and added a new route to my React app for the /share relative URL. In the new component I used the useSearchParams hook from React Router to read the text URL parameter that Goodreads is passing.
That all worked a treat. I am now able to share a book I’m viewing on Goodreads with the app and see if it’s available at the library.
If you’ve read my story on handling long-running batch jobs in a scale-to-zero, serverless way, you’ll know that it the work required to actually look up the book is nasty. I have to scrape the Goodreads page, grab the author, title, and cover image URL using the Cheerio library and then scrape the results returned from my library’s catalogue system on a form post of that author and title. I put that logic that I’d already written for the batch version behind a Cloud Functions endpoint in my usual way.
It’s good to know that I’ll be able to handle share target behaviour to all my apps from now on!
