Top 5 PWA Tools Developers Should Seriously Consider Right Now
App developers know what it’s like to code one version of your app and then have to code it to fit different screen sizes. And then code for different browsers. And then create a whole new app for Android and Apple phones.
But what if you could code one version of your app and have it work on all devices and platforms, natively?
Thanks to progressive web apps (PWAs) you can!
Not only do PWAs make app development simpler for deploying on different platforms, it also has great business benefits as well.
Tinder cut load times with their PWA from 11.91 seconds to 4.69 seconds. Their PWA is also 90% smaller than their native Android app.
Uber created their PWA with global performance in mind. Their core app is only 50kb gzipped and takes less than 3 seconds to load on 2G networks.
PWAs were first introduced in 2015 by Alex Russell who coined the term. Since then, there has been great progress in the tools for PWA development.
In this article I will go over the top 5 PWA tools that developers should seriously consider, right now.
1. PWA Builder
Image: PWA Builder
PWA Builder is an open source project created by Microsoft. This web app aims to make PWAs more popular by making it easy to turn your website or web app into a PWA.
Every PWA app needs at least a manifest.json file and a service worker but PWA Builder wants you to add more value.
Users today have higher standards for an app than a website. Features like authentication, API integrations, and other native features are expected in today’s competitive app world.
Some tools PWA Builder provide for you are:
- Geolocation script API
- Copy to clipboard
- PWA Installation from the browser
- Microsoft authentication
- Share content feature
- Many others
Using the PWA Builder is easy. All you need to do is visit their website, enter the URL of the website you want to turn into a PWA and press “start”. The web app will do all the work and generate the required manifest and service worker files.
Once you add those generated files to your project, your website will be PWA ready!
As you can see from the screenshot, the PWA Builder web app has analyzed my website and shows me exactly what I am missing. The three main components of a PWA are: the manifest, service worker, and security.
I have my security ready to go simply by having an HTTPS URL, a valid SSL certificate and no mixed content on the page.
For the service worker, I am missing everything, because my website is not PWA ready.
If I wanted my website to be a PWA app, I just need to follow the checklist and check off the requirements.
Generally for a manifest, I need a web manifest properly attached, and I need to follow the guidelines of a valid manifest. Configuration like a display property utilized, list icons for the home screen, a name property and many others.
For a service worker, I need a service worker and the proper configuration. The configuration options for a service worker are cache handling, correct scope, pushManager registration, and others.
And that’s it! By going through the list of PWA requirements generated based on my website, I’ll have everything I need to turn my website into a PWA.
2. Workbox
Image: Workbox
Workbox is a set of libraries and Node modules that make it easy for developers to create service workers for their PWA.
Workbox makes it easy for developers to add all of the crucial functionalities a service worker is expected to provide.
When you write your own service worker, there are many pitfalls you can run into. This is why you don’t want to write your own service worker from scratch when the smart people at Google have abstracted all the hard parts into an API that Workbox provides.
It’s not a good idea to write your own front end rendering engine but to use tools like React.js or Angular.js instead. The same principle applies to service workers and Workbox.
If your goal is to write production ready PWAs that use the power of service workers for features like caching, offline support, push notifications and more, then you should consider Workbox.
Instead of worrying about if your caching is optimized, you can focus on what makes your app great and unique. Let Workbox handle all the hard work involved with service workers.
Here are some examples from the Workbox documentation page that shows how to use its API.
Image: Workbox
As you can see, they have their own API and set of methods that you are expected to use. This method of building your service worker has a higher learning curve and makes you learn the Workbox way of building a service worker but it is worth it.
Here are some of the features that their API will help you with:
- Pre-cache files
- Route requests
- Handle third party requests
- Using plugins
- Enable offline Google Analytics
- Using bundlers (webpack, rollup) with Workbox
- Many others
All of these functionalities would require you to write a custom script from scratch to implement if your goal is to add it to your app. For every feature you add with a custom script, issues like testing, maintainability, security, efficiency, and other factors involved with software development must be taken into account.
When you use the Workbox API to implement these features, you’re allowing Google to be responsible for the security, testing, maintainability, and efficiency of these functionalities. That is the benefit of using Workbox. You’re essentially partnering with Google to build your PWA.
3. Lighthouse
Image: Google Lighthouse
Lighthouse is an open source tool created by Google that analyses websites and gives feedback about its performance, SEO, accessibility, progressive web app features and more.
It can be run in the Chrome dev tools, from the command line, or as a Node module.
Lighthouse is a simple tool to use. All you need is the URL of a website you want to test. You can visit the URL in Chrome, open the dev tools, go to the audits tab, and press “Run audits.” Lighthouse will then automatically run its tests and after about a minute, you will see a report about that website.
Image: Google Lighthouse
To run the PWA audit with Lighthouse, you just need to make sure the Progressive Web App option is checked in the audits section.
Once it’s done, you’ll see a report similar to this.
Image: Logo Design
Lighthouse’s report will show you a list of all the features required for a PWA and if the website you’ve audited matches those requirements.
As you can see, my website does not meet the requirements for a PWA entirely. But if I was interested in turning my website into a full fledged PWA, I can go down the list of requirements and fulfill the needs one by one.
The report shows there was no manifest file found, so I know I need a manifest file.
The report shows there is no service worker that controls page and start_url, so I know I need a service worker that controls page and start_url.
Lighthouse makes it easy to check what you need to turn a website into a PWA.
But a PWA is also a website and you still need to make sure your website is doing well. Lighthouse’s PWA testing is just one feature of this great tool. Its main functionality is to test the quality and health of your entire website, not just your PWA features.
You can also test the performance, best practices, accessibility, and SEO of your website using Lighthouse. I’ve gone ahead and tested my website and have seen these results:
I can see right away where I need to improve my code base. My performance is lacking but my accessibility, best practices, and SEO are doing well.
Lighthouse also provides detailed tips on how I can improve my performance, accessibility, best practices, and SEO.
I can see exactly what I can do to improve the performance of my website. Not only do I see the tip to use video formats for animated content, I can open the tab to see even more details about this tip. This extends down to every section of the audit.
4. Create React App
Image: Create React App
Create React App (CRA) is an open source command line tool created by Facebook, the creators of React. CRA is used to generate a fully functional React app with one line.
Why is this relevant for PWA developers? Because when you use CRA to create an app, it automatically generates a service worker file for you. So if you want to create a PWA and you want to build it with React, then CRA makes it as easy as creating a new React app.
All you need to do to turn your new React app into a PWA, is make one change. The index.js file that CRA generates has a line which registers or unregisters the service worker. By default it is unregistered so you just need to change that to register.
Since PWAs are production ready apps, you have to first build your React app by running yarn build. This will generate a build folder with a production version of your app. When the app is served you can run a Lighthouse test on it to see that it passes as a PWA.
Using CRA to build your PWA isn’t a perfect solution though. Like many tools, there are certain trade offs to take into consideration.
As this post outlines, customizing the functionality of your PWA can be difficult to do when using CRA to scaffold your project.
For example, if you want to update your cache when your user visits a route, that means the data will not be available at build time. To bypass this limitation, you’re faced with two options. One, you eject your CRA, which is a notoriously troublesome procedure. Two, you have to override the default service worker by going through many steps that aren’t well documented.
Should you use CRA to build your PWA? It’s good for getting started quickly but if you have large plans for your PWA, it may be a better idea to build your manifest and service worker using something like Workbox for more control and flexibility.
5. Offline-plugin for webpack
Image: Webpack.com
The tools mentioned above were large tools created by large tech companies like Facebook, Google, and Microsoft. Those tools did many different things in complex ways. Offline-Plugin for webpack though was created by a single developer that does one thing.
The functionality that the offline-plugin for webpack provides is, yup you guessed it, add offline functionality to your PWA.
Though this is just one feature of your PWA, it may be the most important one. PWAs are meant to mimic the native feel of an app that you download from the app store.
Imagine that you downloaded an app, and need to use it on the subway with no internet. You open the app and realize that it’s not working because you have no internet connection. I would probably delete the app from my phone out of frustration because native apps are meant to work offline.
That is why this plugin is so important, you need offline functionality in your PWA, otherwise it’s just a web app with more configuration.
To use this plugin, you need to be using Webpack in your PWA project. It’s a plugin designed to be used in your Webpack configuration.
Some famous PWAs and projects built using the offline-plugin are:
It’s very simple to set up. Just check out this short introduction on the Github page:
Simple!
The documentation is amazing as well. The Github page links to examples, articles, tutorials, and open source code for you to learn from. There are over 700 commits and over 300 issues. This is not a forgotten plugin, it is widely used and maintained.
It even has a troubleshooting guide and an FAQ page!
Check out this plugin if you’re looking to add offline functionality in your web app. This plugin is the best option out there and it’s maintained with care.
Conclusion
Now that you’ve been introduced with 5 awesome tools that make PWA development a breeze, it’s your turn to make an app.
It has never been easier to create an app that works across multiple platforms and that’s thanks to PWAs.
No longer will you have to worry about if your web app is worth working on because you don’t want to spend the effort developing an iOS or Android app. Just make your website or web app, add the manifest and service worker, and then you’ll have a fully functional PWA that works across devices and platforms.
Are PWAs the future? Only Nostradamus knows. Until then, take comfort in the fact that PWAs are faster and smaller than native apps.
