Native Apps are Doomed

Eric Elliott
Nov 8, 2016 · 9 min read
Image for post
Image for post
2014–09 Vulture — Dick Knight (CC BY-NC-ND 2.0)

Some History

In the early days of the iPhone, there was no app store. Steve Jobs wanted developers to build iPhone apps using standard web technologies.

What Are Progressive Web Apps?

Progressive web apps are just web applications designed to be mobile friendly. If the browser sees that the user wants to keep using the app, it may prompt the user to install it to their home screen, dock, etc… In order to qualify though, they have to meet a specific criteria:

  • Valid manifest with required properties (Web Manifest Validator)
  • Must have service worker
  • Manifest start_url must always load, even offline (using service worker)
  • Must supply its own navigation
  • Should be responsive to different screen sizes and orientations

Progressive Web Apps How-To

There’s a lot of information about building progressive web applications spread all over the web, but many of them are out of date, and lots of them contain only a fraction of what you need to know to build one. Let’s fix that.

Enable HTTPS

[EDIT: 2020 Update]: Use Next.js and deploy with Vercel, and HTTPS, along with page bundle splitting, static server renders, CDN delivery, cache header management and GitHub CI/CD deployment integration will automatically be handled out of the box. It’s like having the best full-time DevOps team in the world, but instead of costing hundreds of thousands of dollars per year, they save you thousands of dollars per month on hosting bills.

The Manifest

The manifest file is called manifest.json and it’s pretty simple. It consists of the name (short_name for the home screen icon, and an optional name for a more complete name), a start url, and a large list of icons so you can support the large range of different icon sizes needed for various platforms. For Android + iOS, you’ll need:

  • 48x48
  • 60x60 (Apple touch icon iPhone)
  • 72x72
  • 76x76 (Apple touch icon iPad)
  • 96x96
  • 120x120 (Apple touch icon iPhone retina)
  • 152x152 (Apple touch icon iPad retina)
  • 180x180 (Apple touch icon for iOS 8+)
  • 192x192
  • 512x512

Sample manifest.json:

Manifest isn’t Everywhere

The first time I built a progressive web application, I was thrilled that it worked as expected on Chrome for Android, but when I looked at it in Safari/iOS, it didn’t seem to work. The reason is that mobile Safari, in spite of supporting these features using custom tags for a decade or so doesn’t yet support the web manifest spec.

<meta name="apple-mobile-web-app-capable" content="yes">

Service Worker

Service Worker is a recent web platform specification that allows you to cache resources locally in order to make sure that your app still works, even if the user is not connected to the internet.

Testing

Debugging the physical device with Chrome inspect

Plug your device into a USB cable. Turn on USB debugging on your Android device. See remote debugging instructions. You may need to Google around to figure out how to put your Android phone in developer mode to enable remote debugging.

Verify your service worker

Visit chrome://inspect/#service-workers to verify that your service worker is working properly.

Verify install to homepage

If you want to skip the user engagement checks and always get the install to homepage option, turn on “Bypass user engagement checks” in Chrome flags:

Native Apps are Not Dead Yet

Progressive Web Apps now have most of the capabilities of native apps, the install friction promises to be lower than native apps, you’ll no longer need to worry about the app store gatekeepers, and you won’t have to pay anybody 30% tax on app sales for the privilege of being in an app store.

Conclusion

In the short term, you may still want to produce a hybrid app that can take advantage of some device APIs that are still not available using web standards.

  • Twitter
  • Uber
  • Spotify
  • Starbucks
  • Pinterest
  • ~80k other apps

Edit: The Web Platform Rocks

If you’re about to jump into the comments to tell me how it’s impossible to build a serious app with the web platform:


Learn JavaScript with Eric Elliott


JavaScript Scene

JavaScript, software leadership, software development, and…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store