Facilitating the spread of knowledge and innovation in professional software development



Choose your language

InfoQ Homepage News Angular Mobile Toolkit Tries to Make Web Apps Feel Native

Angular Mobile Toolkit Tries to Make Web Apps Feel Native


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.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article


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.

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

Community comments

  • So what to use

    by Mark N,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    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,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Nice article

  • Grear for Android

    by Leonardo Pullock,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    This development for android seems exciting

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

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


Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.