An Example Progressive Web App on Android
An Example Progressive Web App on Android
This example web app will help you understand progressive web apps and helpful concepts like service workers, and tools like Lighthouse.
Join the DZone community and get the full member experience.Join For Free
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).
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.
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. 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.
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 in my case).
A couple of minor stuff included setting up meta information in
index.html such 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.
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?
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.
Published at DZone with permission of RJ Delacruz , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.