BT

Angular Mobile Toolkit Tries to Make Web Apps Feel Native

| by David Iffland Follow 4 Followers on May 10, 2016. Estimated reading time: 2 minutes |

Deciding what platforms to build an app for is a constant challenge. Should developers spend time and money on native implementations, focus strictly on the web, or some combination? The new Angular Mobile Toolkit (AMT) hopes to make this decision a little less stressful by giving web apps more of a native feel using new web platform APIs.

Jeff Cross and Alex Rickabaugh spent some time at ng-conf 2016 to explain the AMT and how it can help developers make their web apps act more like native apps. Cross summarized the idea:

'Progressive Web Apps' is best practices and techniques based on emerging web standards that have already been implemented in some browsers. You take normal web apps and make them more powerful by adding new ideas to them using new platform APIs. They can work on any platform but be better on platforms the more they take advantage of the new techniques and APIs.

The main goal of these techniques is to make apps load in an instant, work offline, installable, and provide notifications. Often, native apps have these features by default, but it's not so easy to do on the web. Of these four, Cross and Rickabaugh focused on the first three and the respective technology behind each of them:

  • App Shell (Instant Loading)
  • Service Worker (Offline)
  • Web App Manifest (Installable)

App Shell refers to the "static UI surrounding dynamic content, which usually consists of a toolbar and some kind of navigation ... the things that are there for all views in your application," says Cross. The AMT leans on a part of Angular Universal that does static generation of content during offline compilation.

One advantage of native apps is that, since they are installed, they always minimally available, even if a network is not. The AMT relies on Service Worker to download app code in the background so that the app is available in an offline manner. A side-effect is that on subsequent loads, the app can start-up even faster because it already has the code, saving the network and download calls.

Using App Shell and Service Worker, the duo was able to reduce a sample app's time to first interaction from 2,356 ms to 128 ms.

Finally, Web App Manifest is "a standard that allows you to specify metadata about an application," says Rickabaugh. It's purpose is to allow a web app to be "installed" on a device. Running one of these apps can look and feel like a native app because the browser's chrome can be hidden.

The biggest problem is that two of the three components of progressive web apps don't work on Safari or Edge.

App Shell works because it is simply rendering out HTML to the client before the app is loaded. Service Worker is an ongoing web platform development and should see broad browser support over time. Web App Manifest only works on Android. iOS currently has its own way to make an app appear on the user's home screen without browser chrome.

The full video of the presentation is available on YouTube.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

So what to use by Mark N

So First Ionic, then NativeScript and now this. Which to use? I've dont some work with Ionic. I am starting to look at NS now. I know why i would choose between the two.

Nice by Leonardo Pullock

Nice article

Grear for Android by Leonardo Pullock

This development for android seems exciting

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

3 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT