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.