Module 4 | Mobile Development » PWAs
Students should be able to:
A Progressive Web App is a web application intended to look, feel and behave like a native application. When we talk about "native" applications in this context, we mean applications that are installed directly on your device, without having to navigate to them in the browser.
Take a couple of minutes to play with the applications you have installed on your mobile devices. Use them with wifi on, wifi off, airplane mode, etc. Take note of how they look, how you use them, and the overall feel and experience. How do you access the application? What happens when you have different settings on your phone? Does the app you're looking at have a web app equivalent? How is it similar to the web app? How is it different?
Make a list on the whiteboard of these similarities and differences.
Progressive Web Apps are gaining a lot of traction in the web development community for several reasons:
For example, if we were building an application like Twitter - we would have to build not only a web application, but also an iOS and Android app. Because these platforms differ so much, and use different technologies, we'd have to hire three separate teams to build three different versions of the same exact application. That's a huge waste of resources.
Up until recently, the web platform was simply not robust enough to provide the same experiences that we get with native applications. A slew of new Web APIs like Service Workers, Background Sync, and Push Notifications aim to close this gap and make the web a better contender against native applications.
We've already talked a little bit about the differences between native applications and regular web apps. Remember that Progressive Web Apps are trying to bridge this gap by closing up some of these differences. This should give you a hint as to what we might expect from a PWA. The most crucial characteristics of a PWA are as follows:
While this is just a handful of ways we would describe a PWA, we can dig further into a larger checklist of requirements for building PWAs by using Chrome's Developer Tools.
Initially there existed a tool called Lighthouse, which would help automate the process of checking to see if your application met all the requirements of a Progressive Web App. This tool was eventually rolled directly into the Chrome Developer Tools, and can give us insight into how well a particular app fits the bill.
Pick an app from pwa.rocks and open it in your browser. Using Chrome Canary, open developer tools and navigate to the 'Audits' panel. Click on the 'Perform An Audit' button and run an audit for 'Progressive Web App'.
When the audit is finished running, dig into the failing and passing checks that are listed. Expand each one to understand what requirement it refers to.
We previously mentioned that a PWA must be installable and launchable from your device. The way we can achieve this is by adding a Web App Manifest file to our applications. The manifest file contains a number of configuration options and information about your app such as logos, brand colors, installation setup, etc.
We can set up a manifest file by creating a simple JSON file. Here's an example with some bare minimum requirements:
Take a look through the manifest documentation here to gain a further understanding of each of these properties.
After our manifest file is set up, we need to tell the browser that it exists. We can do this by adding a link tag in our HTML like so:
< link rel="manifest" href="/manifest.json"> These manifest files provide all the information our application needs in order to show an Installation Banner, which will prompt the user to install the web app to their home screen just like a native application. Installation banners are shown under a couple of conditions. They're generally shown to a user if you have visited the app in the browser more than once over the course of a week, but this could change or vary depending on your device.
Grab an Android buddy and pick an application from pwa.rocks. (The 2048 game is a great candidate.) The Android user should open the app in their browser, close their browser completely, then open it again and navigate to the application. See if you can trigger the installation banner to appear, and have the user choose to install the app on their home screen.
Note that in the above practice section, we all had to gather around an Android user in order to see the installation banner appear. This is because PWA technologies are not yet supported in Safari. Sorry, iPhone users! Apple is making progress towards supporting Progressive Web Apps, but it will likely still be another two years or so before they are completely functional on those platforms. This is why technologies like React Native are so popular, because they can be used today across platforms. In the future, we expect that strategy to dwindle in favor of PWAs.
Add a manifest file to your Palette Picker application and fill out the configuration options. Run a PWA Audit on your application through DevTools and fix any failing checks related to your manifest file.
Hint: Put the manifest file in your public directory next to your HTML index. A quick way to create the required logo sizes is by using a service like placebear. (You can go back later and make these icons more relevant to your application.)
One of the other main requirements of a Progressive Web App is that all content must be served over HTTPS. You may have noticed in some of the PWAs you looked at earlier, that their audits would pass on the check that says 'Serves content over HTTPS' but fail on the check that says 'HTTP content redirected to HTTPS'.
This is because it's not simply enough to support HTTPS in your applications, you must enforce HTTPS. This means that if someone types http://yourapp.com, your app must automatically redirect them to https://yourapp.com. This takes a little bit of work, but can be done in just a few lines of code.
Do some research on how to redirect all HTTP content to HTTPS, and try to find a solution that works for Node/Express applications. Then, using your Palette Picker projects, redirect all HTTP traffic to HTTPS.
Hint: You'll be adding some middleware to your server file that will detect if a request came in with HTTP, and redirect to HTTPS.