It doesn’t matter if you’re in a train going through tunnels or you’re in a developing country, Internet connectivity and web access can be a barrier. At eBay, we don’t want these barriers to stop you from accessing our marketplace. Today, we are exploring new ways to make it easier for you, as buyers, to access our global marketplace if your Internet connectivity goes out in the middle of shopping with an offline experience.
We’ve been working on solutions to make our marketplace more available for all users, and our first step was to enable 15 million Accelerated Mobile Page (AMP) based product browse pages. For users who access eBay from platforms like Google or Twitter, they now have speed-optimized experiences that give them more context than they would have otherwise, such as seeing relevant item listings quickly for instant comparisons. Our focus was speed.
Last year, we started migrating pages to HTTPS and looking into how we can leverage some of these new technologies that HTTPS opens up. Features like this, that we’ve added to our infrastructure, can have a positive impact on customer latency and experience. Our focus was security and modernization.
Now, we are tackling the challenge of network access and really leveling the playing field for all users. My team and I have started exploring Progressive Web Apps (PWA). PWAs are regular web pages or websites, but feel more to a user like a traditional application or native mobile application. We want to leverage the new capabilities to enable an offline experience for eBay users, particularly those in developing countries who do not have reliable network connectivity. Now, our focus is inclusion.
This is an important step and goes to the philosophy at the heart of eBay, and our founding principle: using technology to connect people and build economic opportunity.
As one of the first ecommerce companies to create this offline experience, this exploration is an important step toward our goal of providing an inclusive experience that is considerate of every user’s network condition.
Unlike many others who have created a PWA experience, we’re not rebuilding our entire mobile web experience. Instead, we’re incorporating a service worker and PWA technologies into our existing mobile web application. A service worker is like a programmable proxy between your browser and your network.
There’s a notion that in order to use these service workers, you need to rebuild your site from scratch as a PWA. But we’re challenging that notion and using service workers instead in our existing website to quickly enhance our current caching, prefetching and navigational behaviors, as well as providing a network resilient experience. Because service workers are scripts that your browser runs in the background, separate from a web page, they enable features that don’t need a web page or user interaction—think of push notifications. They provide cached versions of a site when no network connectivity is available.
The first version of our offline experience will be on our product pages for Android devices. Currently, we are experimenting only with the product page URLs, with the eventual goal of expanding it to homepage and other relevant pages. This gives us an opportunity to explore network resilient experiences without touching the critical user navigational flows.
To create this seamless user experience offline, the user lands on a product page, then we post a message to the service worker to fetch and cache the offline version of the same product, along with the resources associated with it. The offline product page uses the same user interface (UI) components as the online product page, with some functionality disabled. When the user revisits a product page and the network is offline—or a network connection is lost during a user’s visit to a product page—the service worker falls back to the cached offline version, which is the last product the user visited when they were online. As a user, in the offline experience, you can still do things like browse the product, do price analysis, check out reviews or compare similar products.
When an offline user finds an item they want to buy, they can choose to “Add to cart”. Then, we will maintain that state in their device and once the network is back, the cart will be synced with the backend system. The idea is to simplify the flow. We’re making this functionality work agnostic of network, creating a very simple experience so that users don’t have to remember or bookmark the product, just to come back later (or wait for the network) and add that item to their cart.
Above all, this exploration will increase our understanding of all the nuances associated with service worker lifecycle, especially when dealing with production deployments. In the coming weeks, we will be expanding the scope of service workers with push notifications and then we will follow that by predictive pre-caching of static resources (algorithmically deciding the next page users will navigate to and fetching the associated assets). The idea here is that when a user visits a page (for example, the homepage), our backend system can predict the next page will be search, and then, we can start proactively fetching the resources (CSS, JavaScript, images, etc.) needed for search.
This project is in development but will be live in the second half of 2018. To see the work we’re doing, go to this product page on an Android device, turn off your network, and hit refresh.
BIO
Senthil Padmanabhan is a Distinguished Engineer and Web Platform Lead at eBay. He is currently heading the efforts to build an engaging and seamless web experience for all eBay users across the globe. Most recently, he spearheaded the initiative to migrate the whole of eBay to HTTPS. He is a speaker and a frequent author of technical articles. He holds a master's degree in software engineering.