Ignite app notification
- Technical

The future of Web Apps

Head shot of AlexBy Alex Crooks

At the start of the new year, we thought it might be fun to briefly highlight some of the most exciting new web platform capabilities from the latter half of 2018 and upcoming in 2019.

To do this I’ll be using of our client projects, Hasbro Ignite, and the inventor management platformwe’ve built over the past few years as an example of how we could use the latest web tech to improve the user experience.

Jump to:

Desktop Progressive Web Apps

While traditional PWAs are great, and Ignite certainly takes advantage of offline first, when your Monday morning tab bar starts to look like this:

You start to long for a dedicated desktop app you can reliably tab to all day without hunting for your web app tab.

To continue using web technology on the desktop, normally we would turn to a framework such as Electron. While we’ve had fair success building desktop apps like this, see our open source JIRA time tracking tool, they suffer from 2 inconveniences if building to accompany a web app:

  • Split codebase
    The user will need to download the app separately, and we will need to update and maintain it independently from any accompanying web app.
  • Higher CPU usage
    A common complaint about Electron apps, which are an incredibly popular way of building desktop apps today, is their higher than native apps system resource usage. Each Electron app ships with its own embedded version of Node.JS and the Chromium runtime (the engine that powers Chrome browser).

Chrome Desktop PWA to the rescue

Chrome v70 (October 2018) introduced Desktop PWAs. This allows the user many of the benefits of a standalone app. You get:

  • One click install from your current web app
  • A dedicated app icon in your taskbar and desktop shortcut
  • Ability to theme the surrounding window
  • A standalone process/window that shares the same runtime as your Chrome browser, meaning no duplicated Chromium resource!

This Spotify example shows how seamless the installation process is:

A dedicated, performant desktop web app would allow companies like Hasbro Ignite to enjoy a distraction-free, dedicated, interface. All while only having to budget for a single codebase that also supports their Inventors who might only wish to access the app occasionally from their browser or mobile.

Writable Files API

So you’ve switched to Desktop PWAs, but a reason you might have been using Electron was to access the user’s file system. Good news is the Chrome dev team are currently in the specification stage for a Writable Files API. You may remember they attempted this a few years ago with the FileSystem API but it was not considered by other browsers and never became a standard we could rely on. Hopefully this time with strong security/sandboxing considerations (giving websites access to your filesystem is a scary concept) it can become a part of our toolbox.

For Hasbro Ignite we could create a persistent file uploader. If a user’s network changed or went down briefly a traditional web file upload would fail and the user would have to manually click to re-find and re-start the upload. If we could access the filesystem we could handle this automatically.

Often Hasbro will be presenting concepts in review meetings, and have complained their wifi access is spotty which negatively impacts the demos when streaming video uploads. This could be negated if large videos could be easily synced to their machine ahead of time, instead of manually downloading and organising into folders which they currently do.

Background fetch

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.

Badging API

Finally a small but welcome proposal, especially to those using Desktop PWAs, the Badging API. This allows web apps to notify the user there is new activity or messages waiting for them inside the app, just as native apps do.

Hasbro Ignite has a notification center, and the badging API will allow us to bring updates to their attention, without manual, regular, checking of the Web App.

Much like the Writable Files API, this is still in the specification proposal stage and not yet released.

Ignite badge notification animation

These are just 5 of our favourite new browser APIs and we are thrilled about the upcoming improvements for user experience and integration.

Get started

Plan your project