 Resources from Chris Achard in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

We can view the PWA offline because we are caching the static and CDN assets for the app - but the list of todo items won't display, because those API calls are not being cached.  We'll add another route to the service worker, to store the result of any `.json` API call from our server.  Then, we'll be able to view the app with the entire list of items offline.

Cache JSON Data in a React PWA with Workbox, and Display it while Offline

Since we can view our app offline now, it may be important to tell our users that the app is operating in an offline mode.  That way, we can let the user know that the app may not be fully functional until then re-connect to the Internet.

We'll use `navigator.onLine` to detect if there is a network connection present or not, and then we'll listen for the window's `online` and `offline` events to update the offline badge.

Add an Offline Status Indicator to a PWA with React

We're storing JSON data in the cache - but that only applies to HTTP `GET` requests - and not to `POST` or `DELETE` requests.

We'll add a `fetch` event listener to the service worker, where we can intercept all fetch requests in our app.  We'll forward them to the server - but if they fail, then we'll return an error back to the app.

In the app, we can detect that error, and respond by showing an alert that the functionality isn't available in offline mode.

Show an Error when a POST or DELETE Fails in an Offline PWA

We'll add a custom app icon to our PWA, and specify those new icon sizes in the `manifest.json` file, which defines our PWA to the browser.  That will add the icons that will allow us to install the app on Android, Chrome, and iOS.

Add a Custom App Icon to a PWA built with create-react-app

The name of a PWA is defined in the `manifest.json` file.  We'll edit the default manifest that comes with `create-react-app` to change the name and short name of our app.

The short name has a maximum length of 12 characters, and is used underneath your app when it is installed on a user's homescreen.

The full name has a maximum length of 45 characters, and is used in the Chrome web store, and in the installation dialog boxes, when a user is installing your application.

If you don't specify a short name, then the long name will be truncated to fit the space.

Change the Name and Short Name of a PWA built with create-react-app

A primary benefit to PWAs is that they can get added, just like native apps, to the home screens of iOS, Android, and Chrome.  We'll show the process to add the PWA to the home screen, and also see the app launch in `standalone` mode, which is without the typical web browser controls.

Add a PWA to the Home Screen of an iOS or Android Device, and the Chrome App Home Screen

When a PWA operates in `standalone` mode on a mobile device, it doesn't have the usual back button (and other browser controls) that it would on the web.  Because of that, it's very important that you add your own navigation controls (like back buttons) to your app, so that your user can get to all parts of your app without relying on any browser controls.

We'll look at the new `Profile` page, and add a back button that allows the user to go back to the home page.

Add Navigation Elements in React to a PWA in Standalone Mode

It's possible to access some, but not all, of the native device features from a PWA.  One that we _can_ access, is the camera and camera roll.  We'll use two different methods to allow users to upload images to our application.  

First, we'll add a file `input` that accepts images.  We can specify a `capture` param, which will tell PWAs on mobile devices to prompt the user to take a picture with their camera.

Next, we'll access the camera feed directly by rendering a `video` tag, and accessing `navigator.mediaDevices.getUserMedia` directly - which will allow us to show a live video feed from the camera.  Then, we can use a `canvas` tag to grab a frame from that video, and render the image. 

Access the Camera in a PWA built with React

On Android and in Chrome (but not on iOS), it's possible to send push notifications with a PWA.  We'll start by asking the user for permission to send them push notifications, and then look at how to intercept the `push` event in a service worker.  We can test the push notifications directly in Chrome's devtools, and we will also make a button that can trigger a push notification directly from the PWA app code itself.

Add Push Notifications to a PWA with React in Chrome and on Android

Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel. 

We'll first disable the ability to select text in our app by setting the css `user-select` options to `none`.

Then, we'll disable the iOS long-press "callout" menu by setting `-webkit-touch-callout` to `none`.

Disable Text Selection and Touch Callouts in a PWA on iOS

The default status bar color on iOS doesn't look great with the color scheme of our application, so we'll set a custom theme color for Android, and a status bar meta tag for iOS.  We can't set a fully custom status bar color in iOS, but we can set the `apple-mobile-web-app-status-bar-style` meta tag to either `default`, `black`, or `black-translucent`.

Change the Status Bar Color on iOS and Android in a PWA

Android displays a splash screen for PWAs based on the icons and names you provide, but iOS just displays a solid color splash screen for installed PWAs by default.  

We'll make a new splash screen image for every iOS device resolution size that we want to support, and then we can make a `link` tag in `index.html` to specify those images as the splash screen for each device resolution.

Also, make sure to remove `background_color` from the manifest - or it may overwrite the splash screen images on iOS.

Customize the Splash Screen of a PWA built with create-react-app

Chrome has a built-in audit tool called `Lighthouse` that we can use to give a readiness score to our web app.  We'll run the progressive web app test, and interpret the results.

In particular, it's essential that a PWA gets run over HTTPS in production - otherwise, it won't work as a PWA at all.

Also, it's important to recognize the many differences in how PWAs operate between Android and iOS - and to manually test in each browser that you plan to support.

Topics

Instructors

Content Type