In my experience, the best way to learn a new technology is to create something tangible with it. I recently sought out to learn Angular and Angular Material. So, I developed an experimental Angular app that uses omdbapi to query Movie Posters. It’s aptly named Movie Poster Finder.

Developing the Movie Poster Finder application, I ran into a thing called PWAs, which are also known as Progressive Web Applications. I thought it was really neat that both Android and mobile Chrome treat them as native applications.

In this post, I will show an example Progressive Web Application in action, explaining what I encountered when turning an experimental Angular web application into a PWA.

Understanding What PWAs Are

Learning about PWAs, I first did what any curious developer would do: research.

I came upon Google’s documentation on best practices for what to do. Here is Google’s take on PWAs and Mozilla’s take on PWAs. Both are excellent resources.

See a PWA in Action

To get a better understanding of what PWAs are, try the following from an Android phone with the latest version of Chrome.

From your Android phone (again, with the latest version of Chrome), navigate to the Movie Poster Finder website. Then, invoke the “Add to Home Screen” option in Chrome and watch the magic happen. (Also, while you’re there, feel free to search for movie posters).

If you’re not on Android, that’s okay. Here is what you will see from an Android phone:

You’ll notice that Chrome wraps the web application in an APK (WebAPK to be exact). It installs it on your phone like a regular native application. If you’re lucky enough, when you first visit the site, you may get an ‘Install’ banner prompt. If not, you can access it in the Options menu.

When you open the PWA by touching on the icon, it looks and acts like a native app. You can even uninstall it like a native application.

Lighthouse

One thing that really helps with PWAs is Lighthouse.

Lighthouse is an open-source, automated tool for improving the quality of Progressive Web Apps, eliminating much of the manual testing that was previously required. It is a benchmarking tool in the form of a Chrome Extension, Chrome Developer Tool, or Node Module that you run against your site to measure certain criteria such as performance and progressive web app.

Lighthouse provides audit results, in addition to tips for passing some of the failed audit results. I ran this against my Angular application to see where I needed to start.

An Example Lighthouse Test Result

For example, the results of the Lighthouse test indicated that I didn’t register a Service Worker, so it failed. This allowed me to know where to start, so I looked into that to fix it.

P.S. Just for fun, try running Lighthouse on other popular sites…like Facebook. The results may or may not surprise you.

Service Workers

Service Workers are JavaScript applications that run in the background. An example service worker use case for PWA would be for caching.

For our Movie Poster Finder, I used sw-precache to generate the caching service worker code for me. Then I added some JavaScript code in the index of my application to register it. The end result would ultimately be a PWA that could work offline.

One note when using sw-precache: whenever I do a new build of my Angular app, I must re-run the commands to generate a new service worker.

Web App Manifest

After adding a service worker that caches the app, I re-ran Lighthouse to see what else I need.

The next thing on the list I tackled was adding a web application manifest. This is a JSON file that Chrome reads in order to get stuff like icons (which is what Chrome will use when they add it to your phone), name of the application, theme color, background color, start_url (most likely this will be index.html), and display.

In my experience, the hardest part of all this was creating an icon and making copies of it in different sizes. The theme color and background color are used for the splash screen. Everything else is pretty simple (at least for my case).

Other Tips

A couple of minor stuff included setting up meta information in index.htmlsuch as:

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

There were a couple of other things that I didn’t pursue that are worth mentioning.

One example is having a fallback page for when JavaScript isn’t available. There are also other APIs that can access parts of the phone such as the GPS and Accelerometer that I didn’t implement. You can also do Chrome Notifications.

Do make sure your site is served over https. For my case, I used Firebase to host my Angular app.

If you want a Web App Install Banner to pop up for your PWA, you will need to meet the Google’s Web App Install Banner criteria.

The Future of PWAs?

Besides Google, Microsoft is also looking into incorporating more PWAs into its ecosystem.

However, it’s time to address the elephant in the room: Apple. As far as I can tell, Apple currently doesn’t support PWA to its fullest. Sure you can add to home screen a PWA on your iPhone, but it’s just a shortcut that opens the site in Safari. Will Apple bring in support for PWAs? Personally I don’t know, but a couple of articles pointed out that WebKit has started supporting service workers, which could be a sign.

There are some really neat examples of progressive web applications out there to check out.

Will this replace native apps? I say no, at least not at this stage. It’s still too early, but if more adoption and more tools come out it, it does have potential. Angular 5 supposedly will put emphasis on PWA, which is something to look forward to.