Hasbro Ignite is an Offline First web application. This means admins can meet with new inventors in an area with spotty internet connection, record the details of the meeting, and be able to sync with the server when they are back on stable wifi.

Currently, the syncing is a manual process, the user is reminded they have offline data to sync, and they click a button to start this process. Back in 2015, the Background Sync API was introduced, allowing applications to automatically perform actions such as this in the background, without requiring user interaction. Unfortunately, it only worked for as long as the service worker was kept alive. If the process took too long to execute it would be killed by the browser, not ideal mid-upload.

Offline data for Hasbro Ignite might consist of several high-quality photographs and videos of the invention concept. Background Sync’s timeouts would not have been reliable enough for this type of data syncing.

In Chrome 71 (currently behind an experimental setting you need to manually enable) Background Fetch was introduced. This allows you to initiate a transfer in the background. If the user is offline when you attempt to do so, it will automatically resume when a stable connection is detected, even if the user isn’t browsing the web app anymore!

The biggest advantage over Background Sync is there are no process killing timeouts. This works of course for downloads too, so in our previous example of downloading video files to your machine, this could extend that process to allow you “download and forget”. No more waiting around to watch a download progress spinner, just close the tab and continue multi-tasking knowing your download will continue and be waiting for you on the filesystem.

Picture-In-Picture Web API

For Hasbro Ignite, a lot of the inventors will upload a video of their new toy to the platform. When reviewing these concepts, watching videos is a single task process. It’s hard to multitask when you are forced to keep the browser viewport focused on this video.

In Chrome 70, Picture-In-Picture video was released. Now users can “detach” the video from the viewport, overlay it on their browser window, and tweak position/size to their liking. This allows you to watch and listen to the video, while freeing up navigation of the web page to continue reviewing other data on the page while still having visibility of the video.

You can try a demo from your desktop browser.