How I stumbled upon Strada while forwarding an email

I wanted to forward an email one evening, so I opened up the Hey app on my phone, found the email, tapped on the “More” button, and just before I hit “Forward” I noticed a “Share or print…” button at the bottom of the screen. I hit “Share” and to my surprise was greeted by a share sheet. It offered me to send a link to the email via SMS, Slack, Signal, and others.

If it was any other app this wouldn’t surprise me, but Hey is a hybrid app — its views are server-rendered HTML and some JavaScript wrapped in an app that is essentially a web browser. Showing a share sheet isn’t something you can do with HTML and JS, so how did the team at Hey do this?

I assumed that the Hey mobile app used the same HTML and JS as the web version. So I opened the Hey web app on my computer and started poking around.

The first thing I noticed was that all the buttons that were visible in the mobile app were present in the web version. But they were hidden unless the frontend was running in a browser that used a special User-Agent header. So I changed my User-Agent and reloaded the page. The UI changed — the header row was gone, some buttons looked like they were disabled and new buttons showed up.

I thought the layout changes were related to Turbo Native and the disabled buttons seemed like a CSS issue, so l focused on the “Share and print…” button.

Inspecting it showed that it was controlled by a bridge/share Stimulus controller. So I opened that controller and saw that it only had a component static variable and a #share method. The static variable was hard-coded to the value “share”. The #share method just passed the current URL to a #send method it inherited from bridge/base_component_controller.

#!/usr/bin/node
// bridge/share.js

import BaseComponentController from "bridge/base_component_controller"

class ShareController extends BaseComponentController {
    static component = "share"

    share(event) {
        event.preventDefalt()
        this.send("share", { url: window.location })
    }
}

#!/usr/bin/node
// bridge/base_component_controller.js
// Pseudocode for BaseComponentController's send method
send(event, data, callback) {
    let message = { component: this.constructor.component, event, data, callback }
  let messageId = window.webBridge.send(message)
}

#!/usr/bin/node
// strata.js
// Pseudocode for Strata's send method
send(originalMessage) {
    if (!this.supportsComponent(message.component)) return null
    let id = this.generateID()
    let message = {
        id: id,
        component: originalMessage.component,
        event: originalMessage.event,
        data: originalMessage.data || {}
    }
    this.adapter.receive(message)
    if (originalMessage.callback) this.callbacks[id] = originalMessage.callback
    return id
}

receive(message) {
    const callback = this.callbacks[message.id]
    if (callback) callback(message.data)
}

supportsComponent(component) {
    return this.adapter.supportsComponent(component)
}

#!/usr/bin/swift
// AppDelegate.swift
// Example of how you could register an adapter with Strada from iOS
let supportedComponents = ["share"]

let supportedComponentsJSON = String(
    data: JSONSerialization.data(
        withJSONObject: supportedComponents,
        options: []
    ),
    encoding: String.Encoding.utf8
)

let registerAdapterJS = """
window.registerStradaAdapter = () => {
  const supportedComponents = \(supportedComponentsJSON)

  window.webBridge.setAdapter({
        platform: "ios",
        supportsComponent: (name) => return supportedComponents.include(name),
    supportedComponents: supportedComponents,
        receive: (message) => window.webkit.messageHandlers.strada.receive(message))
    })
}

if (window.webBridge) {
  window.registerStradaAdapter()
}
else {
  document.addEventListener("web-bridge:ready", window.registerStradaAdapter)
}
"""

// Inject the script right after the document is loaded
webView.configuration.userContentController.addUserScript(
    WKUserScript(
      source: registerAdapterJS,
    injectionTime: WKUserScriptInjectionTime.AtDocumentEnd,
    forMainFrameOnly: true
  )
)

#!/usr/bin/swift
// AppDelegate.swift

// Example of how an iOS app could add a
// `window.webkit.messageHandlers.strada.receive`
// function and process calls to it.

// Somewhere in AppDelegate after you have created your
// browser view (webView) and have initialized Turbo Native

let strada = Strada()
let contentController = webView.configuration.userContentController
contentController.addScriptMessageHandler(strada, name: "strada")

// Strada.swift

// Example message handler that responds to calls to
// `window.webkit.messageHandlers.strada.receive`

class Strada: WKScriptMessageHandler {
    func userContentController(userContentController: WKUserContentController!,
                                                         didReceiveScriptMessage message: WKScriptMessage!) {
        // The `name` attribute holds the name of the function that was invoked
      if (message.name != "receive") {
        return
    }

    if (message.body["component"] == "share" &&
        message.body["event"] == "share") {
      // show share sheet
    }
    }
}

// Strada.swift

// Example of how you could call the adapter from iOS
let message: [String: Any] = [
  "id": "7",
  "data": ["foo": "bar"]
]
let messageJSON = String(
    data: JSONSerialization.data(
        withJSONObject: message,
        options: []
    ),
    encoding: String.Encoding.utf8
)

webView.evaluateJavaScript(
    "window.webBridge.receive(\(messageJSON))",
    completionHandler: nil
)