Top 7 tools for Progressive Web App development

Appin' ain't easy, especially if you're looking to specialise in the ever-evolving field of web app development. Firstly, the labours of your creative love have to shape-shift onto a bunch of different devices and browsers via a progressive codebase. And once you do manage to craft a responsive design that plays nice with the majority of form factors and screens, you'll then need to leverage service workers for offline connectivity and an app manifest to describe used resources. And that's on top of integrating a bunch of tools to cleverly re-engage the end-user again and again. Fail to achieve these basic things, and a return visit from your audience probably won't be 'appening. (Alright, we're going to stop with the puns now.)

Fortunately, we know a thing or two about what makes a darn good progressive web app (PWA). Collected here are the tools you'll need to build something professional that little bit faster and better, and to stake your claim in the hyper-competitive world of app development.

If you want a quick and comprehensive way to see if your PWA is seaworthy and ready for release, Lighthouse will offer the no-punches-pulled performance testbed you need. Available for nix on the Chrome Web Store, it's basically an open-source, automated tool designed to audit and boost the quality and correctness of your recently coded baby. Essentially, a report will be generated on how well your page has measured up to strict criteria, after Lighthouse runs it through a gauntlet of tests. Armed with these results, you can then quickly react and chart a better course accordingly.

The absolute very first step in building a PWA is to choose a core framework. While there are a great many options out there in the wild, we tend to go with React more often than not. Loved to death by top corporations like Instagram, Paypal and Twitter as a core part of their front-end development, React is a fast and efficient means to design and implement PWAs.

This tool's greatest benefit lies in the way it enables fast rendering by leveraging JavaScript to generate a virtual DOM browser. Being able to tinker with your creation quickly, using a real-time go-between you and a browser, is an incredibly liberating feature.

Dovetailing well with React is Webpack, a module bundler for JavaScript applications. Providing you're ok with a higher than usual learning curve, in the long run Webpack can become a powerful means to create dependency graphs. And hey, a short period of learning is worth it if it means you get to say goodbye to linking to a plethora of JS files at the bottom of an HTML web page.

When you're fluent in Webpack, you'll have an overall better control over how assets are processed in any complex, front-end driven progressive website or app. The boosts in performance and page load speed alone makes this tool all but essential.

Our favourite community-driven repository of projects, GitHub boasts a slew of project management features that will let you effortlessly and remotely collaborate with other like-minded devs. This should be your first stop if you're new to PWAs and want to expand your knowledge in JavaScript and other PWA service workers, or to find a starter app to clone and tinker with.

Stuck for ideas on how best to design your next project? Well look no farther than the mecca of PWA examples, the GitHub contributor-powered site called PWA.rocks. This website offers a selection of sample PWAs to test out, all of them divided into the genres of business, demo, event, game, news, reference, shopping, social or tools. Well set out and easily searchable, this directory of pre-designed delights is a constantly evolving source of inspiration that really ought to have a permanent place in your bookmarks.

While Lighthouse is great for performance testing, Chrome Dev Tools is perfect for inspecting, modify, and debugging service workers, service worker caches and web app manifests on the fly. Half the hassle with making any PWA is the need to wrangle a bunch of different technologies together, Chrome DevTools makes these disparate elements play nice, thanks to a simple UI system of coordinated inspectors. You should definitely take the time to familiarise yourself with this tool, because being able to diagnose problems earlier translates into better PWAs being built faster.

If you have a mind to compress images/JS and thus speed up your PWA, you need the indispensable tool that is AMP (Accelerated Mobile Pages). This is essentially an open-source web component library created on JavaScript which aims to improve the performance of the web pages.

Sizeable side-bonuses include website publishers having full control over the visual and business design, plus “AMP as PWA” hybrid projects enjoy preferential treatment from the big G (Google's search engine highlights anything powered with AMP). For all its many benefits, AMP's achilles heel is that it's not exactly suitable for e-commerce sites. With the above tools in your belt (and some talent and fair degree of coding nous in your head) you can be creating progressive web work that can boast the interactivity and slick navigation of a professional mobile app. We're talking lightning fast content load times to beat the average user's boredom/bail cut off (which was three seconds, last time we checked). Not to mention the effortless scalability that lets your creation morph to any mobile device or browser.