Create Web Apps with the Capabilities of Native Apps

One of the biggest challenges for web apps has been that they didn’t look and feel like native apps. Web apps have historically had poor offline capabilities, performance limitations, and almost no access to internal or external hardware. These limitations have motivated many HTML5 developers to use technologies like Cordova and Electron to create hybrid apps that behave like native apps – bridging the technology gap between native and web technologies. Soon, this will no longer be a concern.

Modern web browsers provide new capabilities, so developers can create native-like web apps. Chrome and Firefox already allow web apps to launch from the home screen, run offline, access internal hardware, and even run code compiled in C++ at blazing speed. Last month, I gave a talk at SenchaCon on some of latest technologies that make these new capabilities for web apps possible.

In this article, I will highlight some of these game-changing technologies that will allow you to create a new class of high-performance web apps with native-like capabilities.

Offline Access and Launching from Home Screen

Although the Application Cache API has been available since Internet Explorer 10, it’s been crippled with several annoying limitations. The new Cache API along with Service Workers have fixed many of these limitations. Unfortunately, the implementation of Service Workers and the new Cache API are proving too complicated for many developers. In order to significantly simplify implementation, Ext JS apps can now implement caching with a single line of code using an annotation @sw-cache. Read the docs for implementation details. In addition to caching, Ext JS apps can now implement Web App Manifest features in the app.json file. Some of the capabilities enabled by Web App Manifest include home screen icons, a splash screen, and an orientation lock.

Web Push and Notifications APIs

Web Push allows a server to send data to a web app via the browser even if the browser or the app isn’t currently open. Using Web Push developers can create apps that are more engaging and update their users in a more timely manner regarding relevant content. In order to use Web Push API, you will need an active Service Worker. Upon receiving a message from the server a Service Worker, using the Notifications API, can choose to display a native-like notification to the user. Currently, Web Push is supported in Firefox, Chrome, and is under development in Microsoft Edge. Check out this sample code created by the Google Chrome team, which shows how to use the Web Push and Notifications API.

Hardware Capabilities

Accessing hardware is going to get a lot easier from within the web browser. Web apps have been able to access the camera, microphone, and GPS for some time using the Media Capture and Geolocation APIs. Google is making things interesting by implementing the Web Bluetooth and Web NFC APIs in Chrome. In fact, Web Bluetooth is already available in Google Chrome, you just need to activate it by going to chrome://flags and turn it on. Now that virtual reality technologies like Oculus, Samsung Gear, and even Google Cardboard are taking off, WebVR APIs are being implemented in Chrome and Firefox. Check out some of the WebVR demos using Firefox. Other interesting hardware-focused APIs under development include Web USB, Presentation API, and Web Speech. Take a look at the roadmap from the W3C Device and Sensors Working Group for other hardware-focused APIs under development.

Need for Speed

Performance was often cited as a limitation of web apps. The WebAssembly project aims to resolve performance limitations by allowing developers to compile their C/C++ code and run it in the browser at near native speeds. Google has stated that they are targeting runtime speeds within 20% of equivalent native apps. In addition to WebAssembly, there are many other new browser APIs that are improving performance. For example, most modern browsers now support hardware-accelerated CSS transformations and animations. Also, Web Crypto API enables hardware-accelerated cryptography functions.

Risks

Although Chrome, Firefox, and Microsoft Edge browsers are focusing on creating technologies in their browsers that will enable developers to create native-like web apps, it remains to be seen if Apple Safari is on board. Apple has not yet committed to implementing technologies like Web Application Manifest and Service Workers, which are dependencies for many modern web APIs that provide native-like capabilities. This leads some developers to claim that “Safari is the new Internet Explorer”. As a result, developers should programmatically test the existence of new capabilities before implementing them. The reason Safari has been slow to adopt new standards remains unclear; although one potential reason could be security risks. Recently, a vulnerability was found in the Battery Status API, implemented by Chrome and Firefox, which allowed websites to track a user even if the user cleared the browser cookies. Subsequently, Firefox announced that it would disable this capability.

In this article, I’ve highlighted a few APIs that allow developers to create native-like web apps. Are you excited about other APIs that will give developers new superpowers? If so, share your thoughts in the comments below.