The basic idea of the Physical Web is to tag the real world. This is implemented with devices called beacons that broadcast small identifiers such as short URLs to everyone listening (as defined by a protocol called Eddystone). These beacons use the Bluetooth Low Energy (AKA BLE, part of the Bluetooth 4.0 standard) protocol which means that they can operate for quite a while even if running on battery power (right now about a year).
Typical listeners are mobile phones. There are two common ways for users to interact with beacons. First, passively: when a beacon is detected nearby, mobile phones will show a message notifying the user of something interesting offered by the nearby real world. These messages usually appear in the notification bar of the mobile OS, just like when you get a new text message or email.
Then, actively: an app can search for beacons nearby. For example, you might use a search app such as Google Search to find a service nearby. The search app can search for beacons to give you local results together with the traditional indexed results.
The Physical Web has many applications, from suggesting you order coffee online ahead when standing in a queue at a coffee shop, to announcing special offers in stores, to searching for a special service, or telling you about the next buses coming at the bus stop where you are currently standing.
Beacons are still relatively expensive (around $5-$10) so it is unlikely to find them on every single instance of a product in the near future, however they are perfect for representing a product class or a series of products and can be attached to places, such as in-store displays etc.
As said before, the project has been around for 2 years already but the Physical Web seems to be one step closer to reality thanks to its increasing support on Android (through the Google Play Store and Google Search) but also on iOS (through Chrome for iOS and other apps) and hence is likely to hit prime time in the near future.
Let's implement a simple but powerful use-case. Imagine we build a smart retail clothes rack for a fictitious brand called UNITI. We attach a beacon to each retail rack so that we can run in-store promotion campaigns.
The very first step is to create the experience: what will our customers see when clicking on the call-to-action sent by the beacon? Well actually the answer is easy: a Web page.
The content of this Web page is yours to decide. However there are a few elements your web page will have to include to be compatible with the Physical Web. In particular, the header (
<head>) section of your page will have to provide a title, a message and an icon you want to be displayed on the mobile notification (see image above). Make sure to keep the title very short and the message a short as possible or it they will end up truncated. Also, make sure to provide at least one image of size 32x32 pixels.
An example of this metadata set is shown below:
<head> <!-- for the physical web --> <meta charset="UTF-8"> <meta name="description" content="Get 20% off UNITI clothing!"> <title>UNITI SMART SPORTSWEAR</title> <link rel="shortcut icon" sizes="32x32" href="/images/app-icon-32.png"> </head>
Next, build the content of your page. In our case we'll build a page that provides a 20% discount voucher for our UNITI range. Finally, upload this page to a Web host such as Wordpress, Heroku or S3 and write down its URL. Note that for your page to be useable in a Physical Web context it will have to be accessible via an HTTPS URL. EVRYTHNG Enterprise customers can use our Files API to access secure file hosting.
In many cases these unique URLs are serialised in QR codes, NFC tags, or deduced from barcodes and images (through our Identifier Recognition service). Now, they can also be broadcasted by Physical Web or Eddystone beacons. Let's see how that will work.
We first need to create all the EVRYTHNG resources the smart rack will need. All of these could be created via our API but to make it even quicker we'll use the Dashboard. You'll need to register for a free account if you don't have one.
Every good project at EVRYTHNG starts by creating a project resource. Go ahead and create a new project using the plus icon next to ‘Projects’. Once this is done create an application inside the project: a project can contain multiple applications. Don't worry about the details for now, just give your application a dummy name. For example: "Smart Rack App".
Now we are ready to create an EVRYTHNG Thng that the smart rack (and its physical web beacon) will correspond to. Go ahead and create a new Thng. Notice the ID field generated for this Thng: this is the unique EVRYTHNG Platform identifier for this Thng.
We then generate a short URL for our Thng This will generate a unique, randomised (i.e., hard to guess) address for the smart rack. To create the short URL click on "Setup Redirection". A dialog will prompt you for a Web address, this is the redirection address. This address is the URL of the Web page your created in the first step. It is the destination you want to send your your customers when they discover the short URL of the smart rack.
Once this is setup you can go ahead and scan the QR code with any scanner, this should redirect you to your Web page.
Finally, we need to write the short URL of our smart rack to a Physical Web compatible beacon. There is a fairly large choice of beacons you can choose from from this list (not exhaustive). If you do not have a beacon not all hope is lost: the Beacon Toy mobile app can emulate one from your phone.
If you do have a beacon available to you, use the app provided by the manufacturer (or this Web app) to write the short URL of the smart rack (e.g.,
https://tn.gg/kUgCKHew in our case) to the beacon.
From this point any nearby Android 6+ phone should pick up the broadcasted short URL and show a notification. If you'd like to test with an iOS device you'll need to make sure Chrome is installed and the Physical Web notifications authorized (more information about how to enable your phone to support the Physical Web).
The EVRYTHNG Platform does not only enable basic support for the Physical Web and beacons, but it also supports complex rules that dynamically decide what experience to serve depending on a lot of context parameters (who is the user? where is she? what time is it? what other products did he interact with? in which country? etc.) thanks to our unique Redirector component.
As an example with this component you could implement an interactive treasure hunt for your brand in a store or make sure the offers you broadcast to your users are really relevant to their profiles. All in all this lets you create interactive beacon experiences for your products to make them even smarter.