Progressive websites are rapidly growing in popularity as a way to create JavaScript, CSS, and HTML applications that have a level of performance and usability that is almost identical to native applications.
While there are many “Getting Started with Progressive Web Applications” tutorials on the web, I want to dig a little deeper and offer suggestions for JavaScript libraries and tools that you can use to get started developing PWA at a faster pace and with minimal complexity.
There are critical capabilities that separate a progressive website from a traditional website. Progressive web applications should be able to do the following:
- It works with most browsers and devices (mobile and desktop) with a progressive code base.
- Adjust all screen and form factors with a responsive design.
- Leverage service workers to enable offline connectivity (HTTPS required).
- Provide an application-like experience that takes advantage of reconnection tools such as push notifications.
- Leverage a web application manifest to describe the resources used
A good place to start if you’re new to progressive web apps is Google’s guide to building your first progressive web app. The goal of this article, however, is to assume that you have experienced or completed your first progressive web application and are looking for tools that allow you to develop applications faster. Here, then, are the best tools my team uses to mobile app development.
Table of Contents
Develop progressive web applications with React
The first step in creating a progressive web application is to choose a central framework. There are many frameworks and I encourage you to look at the options, but we use React, for two reasons:
It is managed and supported by Facebook, which uses the framework on its sites and thus demonstrates that the framework is rigorously tested with 1.18 billion users a day.
React is the foundation of React Native, which allows you to easily port applications created with React to Native Applications.
The appeal of ReactJS is its component-centric approach to development. Each component is built with JavaScript, and you can easily reuse it. Using JavaScript has its advantages:
We have many developers who already know JS, so they don’t need to learn a new language.
Rich data can be quickly passed through the DOM layer.
ReactJS supports raw JavaScript and JSX. JSX is an XML-like syntax for writing JavaScript.
The user interface consists of components. Those components can be rendered in the browser, on the server, using Node.js and within applications, using React Native. This solves the challenges of managing applications that must be delivered to many different operating systems, browsers, and devices.
First steps: using a Polymer template
You can significantly reduce the time required to configure a progressive web application using Polymer as a template. This Google open source project is frequently updated to keep you in sync with the open source projects the template takes advantage of.
Polymer templates use the PRPL pattern to optimize delivery of the application to the device. Use it for:
- Push critical resources to the initial path
- Render the initial path
- Pre-cache the remaining routes
- Slow load and create remaining routes on demand
You need to use an HTTP2 server to deliver resources on demand. In addition, the server will pre-cache the resources provided by the service workers. As for the design, the Polymer template applies the popular Google material design by default.
My team uses Polymer to quickly build prototypes. It allows them to immediately get started with important work (the project code) and quickly bypass custom settings.
Manage dependencies with Webpack
While Polymer is great to start with, there are times when my team will need to develop custom applications. To do this, we use Webpack, a module package for JavaScript applications.
There are two reasons why we use Knockout for quick projects instead of React. First, we can use Knockout to extend HTML, which in turn makes it easier to learn, and does not require JSX. The second reason is the creation of templates. Template creation makes it easy to create complex applications by minimizing duplication of DOM elements.
Knockout is easy enough for a junior developer to learn quickly and comes with many attributes that should otherwise be written in competency frameworks like Backbone.js.
Check your code with Lighthouse
The last part of our progressive web application tools tool is Google’s PWA performance monitoring tool, Lighthouse, which is installed as a plugin for Chrome. Go to the progressive website you want to run tests with and click the Beacon button on the Chrome toolbar once you have installed the plugin. The report you receive has many details in the report. The first section, “Progressive Web App”, returns the following analyzes:
- The app can load offline / flaky connections
- Page load performance is fast
- The site is progressively improved
- The network connection is secure
- User can be asked to add to home screen
- The installed web application will start with a custom splash screen
- Address bar matches brand colors
- Design is mobile friendly
Each of these subsections reveals specific technologies that you can add or modify to improve the performance of your progressive web application. For example, the report “The application can load offline / flaky connections” provides details on:
- You have a registered service worker (and describe what a service worker is)
- URL responds with 200 when offline
The second section, “Best Practices,” provides details on the following:
- Use modern offline features
- Using modern protocols
- Using modern CSS
- Use modern JavaScript functions
- Avoid APIs that harm the user experience
- Accessibility
The third section, “Performance,” lists how fast it takes to load a page from a responsive web application and how long it takes to load each item on the page. It also includes tools to drill down on any issues causing slowdowns.
The final section, “Fancier Stuff”, examines whether the latest HTML5 / JS features are in use.
The goal with Lighthouse is to test your site and give you the direction to troubleshoot.
