Progressive Web Apps (PWAs) try to overlap the worlds of the mobile web apps and native mobile apps by offering the best features of each to mobile users.
They offer an app-like user experience (splash screens and home screen icons), they're served from HTTPS-secured servers, they can load quickly (thanks to page load performance best practices) even in low quality or slow network conditions, and they have offline support, instant loading and push notifications. The concept of PWAs was first introduced by Google, and is still supported by many Chrome features and great tools, such as Lighthouse, an open-source tool for accessibility, performance and progressiveness auditing which we'll look into a bit later.
Throughout this crash course, we'll build a PWA from scratch with ES6 and React and optimize it step by step with Lighthouse until we achieve the best results in terms of UX and performance.
The term progressive simply means that PWAs are designed in a such a way that they can be progressively enhanced in modern browsers where many new features and technologies are already supported but should also work fine in old browsers with no cutting-edge features.
Native vs Mobile = Progressive
A native app is distributable and downloadable from the mobile OS's respective app store. Mobile web apps, on the other hand, are accessible from within a web browser by simply entering their address or URL. From the user's point of view, launching a browser and navigating to an address is much more convenient than going to the app store and downloading, installing, then launching the app. From the developer/owner's point of view, paying a one-time fee for getting an app store account and then uploading their apps to become accessible to users worldwide is better than having to deal with the complexities of web hosting.
A native app can be used offline. In the case of remote data that needs to be retrieved from some API server, the app can be easily conceived to support some sort of SQLite caching of the latest accessed data.
A mobile web app is indexable by search engines like Google, and through search engine optimization you can reach more users. This is also true for native apps, as the app stores have their own search engines where developers can apply different techniques --- commonly known as App Store Optimization --- to reach more users.
A native app loads instantly, at least with a splash screen, until all resources are ready for the app to execute.
These are the most important perceived differences. Each approach to app distribution has advantages for the end user (regarding user experience, availability etc.) and app owner (regarding costs, reach of customers etc.). Taking that into consideration, Google introduced PWAs to bring the best features of each side into one concept. These aspects are summarized in this list introduced by Alex Russell, a Google Chrome engineer. (Source: Infrequently Noted.)
- Responsive: to fit any form factor.
- Connectivity independent: progressively-enhanced with service workers to let them work offline.
- App-like-interactions: adopt a Shell + Content application model to create appy navigations & interactions.
- Fresh: transparently always up-to-date thanks to the service worker update process.
- Safe: served via TLS (a service worker requirement) to prevent snooping.
- Discoverable: are identifiable as “applications” thanks to W3C Manifests and service worker registration scope allowing search engines to find them.
- Re-engageable: can access the re-engagement UIs of the OS; e.g. push notifications.
- Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store.
- Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
Lighthouse
Lighthouse is a tool for auditing web apps created by Google. It's integrated with the Chrome Dev Tools and can be triggered from the Audits panel.
You can also use Lighthouse as a NodeJS CLI tool:
npm install -g lighthouse
You can then run it with:
lighthouse https://sitepoint.com/
Lighthouse can also be installed as a Chrome extension, but Google recommends using the version integrated with DevTools and only use the extension if you somehow can't use the DevTools.
Please note that you need to have Chrome installed on your system to be able to use Lighthouse, even if you're using the CLI-based version.
Building your First PWA from Scratch
In this section, we'll be creating a progressive web app from scratch. First, we'll create a simple web application using React and Reddit's API. Next, we'll be adding PWA features by following the instructions provided by the Lighthouse report.
Please note that the public no-authentication Reddit API has CORS headers enabled so you can consume it from your client-side app without an intermediary server.
Before we start, this course will assume you have a development environment setup with NodeJS and NPM installed. If you don't, start with the awesome Homestead Improved, which is running the latest versions of each and is ready for development and testing out of the box.
We start by installing Create React App, a project boilerplate created by the React team that saves you from the hassle of WebPack configuration.
npm install -g create-react-app
create-react-app react-pwa
cd react-pwa/
The application shell architecture
The application shell is an essential concept of progressive web apps. It's simply the minimal HTML, CSS and JavaScript code responsible for rendering the user interface.
This app shell has many benefits for performance. You can cache the application shell so when users visit your app next time, it will be loaded instantly because the browser doesn't need to fetch assets from a remote server.
For building a simple UI we'll use Material UI, an implementation of Google Material design in React.
Let's install the package from NPM:
npm install material-ui --save
Next open src/App.js then add:
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import {Card, CardActions, CardHeader,CardTitle,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: []
};
}
render() {
return (
<MuiThemeProvider>
<div>
<AppBar
title={<span >React PWA</span>}
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
}
/>
{this.state.posts.map(function (el, index) {
return <Card key={index}>
<CardHeader
title={el.data.title}
subtitle={el.data.author}
actAsExpander={el.data.is_self === true}
showExpandableButton={false}
/>
<CardText expandable={el.data.is_self === true}>
{el.data.selftext}
</CardText>
<CardActions>
<FlatButton label="View" onClick={() => {
window.open(el.data.url);
}} />
</CardActions>
</Card>
})}
<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</div>
</MuiThemeProvider>
);
}
}
export default App;
Next we need to fetch the Reddit posts using two methods fetchFirst() and fetchNext():
fetchFirst(url) {
var that = this;
if (url) {
fetch('http://ift.tt/1sZr1Ax' + url + '.json').then(function (response) {
return response.json();
}).then(function (result) {
that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
console.log(that.state.posts);
});
}
}
fetchNext(url, lastPostName) {
var that = this;
if (url) {
fetch('http://ift.tt/1sZr1Ax' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) {
return response.json();
}).then(function (result) {
that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
console.log(that.state.posts);
});
}
}
componentWillMount() {
this.fetchFirst("reactjs");
}
You can find the source code in this GitHub Repository.
Before you can run audits against your app you'll need to make a build and serve your app locally using a local server:
npm run build
This command invokes the build script in package.json and produces a build in the react-pwa/build folder.
Now you can use any local server to serve your app. On Homestead Improved you can simply point the nginx virtual host to the build folder and open homestead.app in the browser, or you can use the serve package via NodeJS:
npm install -g serve
cd build
serve
With serve, your app will be served locally from http://localhost:5000/.
You can audit your app without any problems, but in case you want to test it in a mobile device you can also use services like surge.sh to deploy it with one command!
npm install --global surge
Next, run surge from within any directory to publish that directory onto the web.
You can find the hosted version of this app from this link.
Now let's open Chrome DevTools, go to Audits panel and click on Perform an audit.
From the report we can see we already have a score of 45/100 for Progressive Web App and 68/100 for Performance.
Under Progressive Web App we have 6 failed audits and 5 passed audits. That's because the generated project already has some PWA features added by default, such as a web manifest, a viewport meta and a <no-script> tag.
Under Performance we have diagnostics and different calculated metrics, such as First meaningful paint, First Interactive, Consistently Interactive, Perceptual Speed Index and Estimated Input Latency. We'll look into these later on.
Lighthouse suggests improving page load performance by reducing the length of Critical Render Chains either by reducing the download size or deferring the download of unnecessary resources.
Please note that the Performance score and metrics values can change between different auditing sessions on the same machine, because they're affected by many varying conditions such as your current network state and also your current machine state.
Continue reading %Progressive Web Apps: A Crash Course%
by Ahmed Bouchefra via SitePoint
