The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

We’ve been talking a lot about Progressive Web Apps—web apps built using modern standardized web APIs like service workers, web manifest, and web push, that provide an app-like experience delivered through the browser. Maybe you’ve built a few yourself by now. Progressive Web Apps have certain important advantages over native apps, especially for the next billion users who will come online in the near future. Let’s talk about those advantages and why they’re crucial to those users’ mobile experience.

The New Mobile Environment

Before we talk about the advantages of PWAs, it’s important to understand how the modern mobile environment differs from the environment we’re used to developing for. As more users are able to access the internet from mobile devices in developing countries, we need to be prepared to build apps that work just as well for them as they do for someone in San Francisco with an iPhone 7.

First, these users’ connectivity is mainly going to consist of 2G and 3G networks that are spotty at best, or almost completely absent at worst. Second, the devices these users are going to be using will on average have 1 to 2GB of ram, a slow quad core cpu, and 4GB of disk storage, and will be running Android 5.0 and higher. Third, mobile data is incredibly expensive in these developing countries. As of 2016, the average cost of 1GB of mobile data in India is $3.81, while the minimum wage rate is around 31 cents an hour. This is clearly a challenging environment, but with PWAs, we can still build awesome apps that provide a great user experience.

Why PWAs Excel in the Modern Mobile Environment

PWAs have three key features that allow them to provide better functionality and user experience for users around the world, compared to native apps: They make efficient use of the disk and efficient use of the network, and they don’t require large installs that take place all at once. Service workers help us accomplish all three of these things.

For example, service workers allow us to dynamically cache assets to a user’s device, so we can provide them with a positive experience on slow, spotty networks. The key here is the fact that this is dynamic caching. This means that we can cache only the assets we deem are important for both a good experience and fast load times on slow, spotty networks, instead of having to download a large APK to our disk. For example, for the average e-commerce app, you wouldn’t want to cache every one of your of product pages offline. We can instead cache previously viewed products, along with only the key app assets (app shell) needed for those parts of the app to function.

Also, because of the way the web works, users don’t need to download large apps all at once. Instead, users only need to download the pages of the PWAs they visit, and with dynamic caching using a service worker, we can choose to cache important pages of our PWA, so that those pages only have to be downloaded once. To see this in action, check out the Flipkart PWA. On my Nexus 6, it takes up about 351KB of storage. On the same device, the Twitter app takes up 69.36MB. As you can see, this is a huge difference, and on a device with only 4GB of storage available, the difference is even bigger.

Ionic’s plan for PWA’s

We currently support PWA’s out of the box in Ionic and plan to make our PWA support for even more robust in the near future. We currently provide a service worker and web manifest by default that gives your Ionic app out-of-the-box PWA abilities like offline caching and the ability for the browser to prompt the user to add to the homescreen. Also, since Ionic is built completely with web technologies, your Ionic app is built from scratch to work great in the browser. Looking ahead, we are already focusing on getting our bundle size drastically smaller through code splitting, treeshaking, and property renaming, in order to make your Ionic 2 app even faster. We know that load time is extremely important on the mobile web, and through these changes, we believe we can achieve this.

With Progressive Web Apps and the power of the modern web, we can provide an excellent user experience even on low-end, inexpensive devices. PWA’s provide a completely new paradigm for mobile apps that are crucial for the new mobile environment. Next time you have an awesometastic new app idea, think about building it as a PWA and extend your reach to those next billion users!

  • Mike Strawhat

    Great progress Ionic team. I’m looking forward to the next release.

  • https://Savelist.co Rodrigo Fernández

    Great article! Full tree shaking and code splitting will be a super speed boost. Looking forward to it.

  • a n onymous

    Is all the “code splitting, treeshaking, and property renaming” necessary because using a monolithic framework like Angular 2 is, out of the box, mutually incompatible with making a Progressive Web App?

  • Holla

    I think it would be great to have a out of the box database as a service solution form ionic.io with full pwa support and nicely integrated into ionic!
    Ionic could do all the magic by choosing the best sync and storage option based on the platform and enable offline database support based on the browser or platform.

    • Holla

      Wow just heard about IonicDB! Hopefully it will have full pwa supprt: https://ionic.io/db