When you look around a subway station during rush hours, what do you see? Likely, a crowd of commuting people keeping...
PWA Checklist & Best Practices – Progressive Web App Requirements
No wonder the concept of writing one app to run on all platforms and is managed by one common code is the sexy thing in the web development world and the moment’s trend.
It is especially so, to achieve satisfactory results, building a Progressive Web Apps often requires implementing only a few changes in combination with just a slight optimization of existing websites. Particularly if you’ve already been keen on taking care of User Experience and have put effort into designing a clean User Interface and maximized performance, not to mention the enormous pool of support developers can tap into online, with a great community and market leaders sharing their tips and tricks on implementing outstanding PWAs.
Although building a simple PWA is easy, it doesn’t mean you have to take the easy way out! Outlining and completing a MINIMUM PWA development checklist IS JUST THE BEGINNING. It is definitely worth going the extra mile to truly harness the benefits of this technology.
That is why in this article, we’ll take a look at what a minimum PWA checklist should be comprised of, we’ll suggest what other solutions are there to implement to boost positive results of introducing a PWA, and we’ll see what tools are available to make sure we’ve built a PWA that stands apart.
First things first, so let’s start with the basics.
The line of least resistance – a minimal requirements PWA checklist
Technically speaking, PWA is a website with a manifest. Conceptually, there’s much more! It’s the way (the only way) to save the website on the home screen of a mobile device without being listed in the platform’s app store. Not to mention it’s for free! Bearing that in mind, let’s see what’s the necessary minimum of 4 elements that a PWA should cover to fulfil basic requirements and practices, and let’s outline a checklist:
1. Web app manifest file: manifest.json
Web manifest file is a JSON container of meta-data regarding your website that you put at your web app’s root. It gathers all the information that’s needed to configure the appearance of a PWA. The most crucial details are – icons, theme colour, name, short name and display as standalone (as a PWA). Thanks to that, a device knows how a PWA will look like after installation or adding to the home screen and how it will behave after launching.
The JSON file contains fundamental data and is very simple. For example, it may look like this:
"name": "Google Maps",
2. Service Worker
A service worker must serve over HTTPS, so it’s a must for a PWA to include SSL certification on a webserver. The most popular (not to say easy and cost-free) method is via Let’s Encrypt.
4. App icon
There’s no app without an icon, and a PWA is not an exemption here. Not to mention a manifest should have that covered. The icon will be used to launch a PWA from the home screen. The easiest way around this would be a single 512 x 512 px icon, but a PWA can have a wide variety of differently sized icons.
Going the extra mile – Best practices
As mentioned before, the above is just the necessary minimum and the line of least resistance, which we definitely do not recommend taking. Building a PWA is relatively seamless, so it’s worth putting extra effort to really satisfy the users and increase the chances of its overall success.
Many additional features take a basic PWA to an exemplary level. Web developers should look at them from three major perspectives: appearance and UX, security and performance, technology, and dev solutions. Let’s take a deep dive and explore how each of these could help you stay ahead of the curve:
Appearance and user experience
Avoiding common mistakes in user experience and appearance is crucial in terms of killing or boosting a PWA. Web developers need to be aware that designing a PWA is closer to working on a native mobile app than a responsive web app. Redesigning conventional web designs for mobile purposes is an easy way of making serious mistakes.
Designing a PWA, it is important to resolve issues with responsive touch feedback and scrolling glitches, especially regarding websites with large feeds or infinite scroll. Nothing annoys users more than when the appearance crushes or the app goes blank. A good PWA practice is never to make it scroll horizontally, not unless it’s necessary. Settings width or height can be omitted completely. Limiting these increases the chances of breaking the layout. The good idea is to implement a skeleton screen that will resolve to block screen transition on slow networks to maintain a smooth experience.
Another good practice would be to go for device fonts instead of custom fonts. Native apps use native fonts, as they load event instantly without a network connection, and users are usually already familiar with them. Also, don’t bother raster graphics and stick to SVGs for UI elements, such as simple bottom navigation.
To take the PWA’s UI and appearance a level higher and make it look closer to a native app, you can also remove blue flashes from CSS, disable text selection, disable highlighting, facilitate navigation to the maximum (go for bottom navigation instead of hamburger menu), make sure pages are responsive across all mobile devices. The content doesn’t jump as the page loads.
Last but not least, it’s worth leveraging Google APIs that can significantly enrich the web experience. The most popular solutions are facilitating credential management and payment requests. The first one is handy as users often leave the page when they see a need to sign-in. It’s also good to access via API the credentials saved in the browser. In terms of payment requests, not to force users to face frustration related to filling long payment forms before checking out, API can limit the whole procedure to just a single API call.
Security and performance
Today, the rich experience is all about performance. Focus on loading less script and make sure it’s being loaded asynchronously. Enhancing load speed and performance is also achievable by keeping the app small. Web developers can use Source Map Explorer tools to identify the heaviest dependencies and get rid of them.
Performance is crucial even with low or without an Internet connection at all. Make sure your page loads fast, even on the 3G network. It uses cache-first networking, and that all URLs in the app load is even when offline. What is more, the PWA should appropriately inform users that they’re offline.
When it comes to security, HTTPS is the absolute standard for PWAs. Do make sure your site is served over this certificate! Also, make proper use of the PRPL Pattern, used for structuring and serving PWAs. It attempts to make time-to-interaction as optimal as possible and ensures maximum caching efficiency. Decoding the name translates it best:
- Push critical resources for the initial URL route
- Render initial route
- Pre-cache remaining routes
- Lazy-load and create remaining routes on demand
It’s important to remember that for a PWA point-of-view, the performance is critical. You can understand it better by using PageSpeed Insights (try beating score 85) and SpeedIndex on WebPageTest (aim over 4000 on 3G network). Both solutions will give you insights on how to increase it.
Technology and dev solutions
Don’t forget the basics (the minimum checklist from above), such as web manifest and service worker caching. Make sure your site works across all browsers. Also, remember to provide the metadata for Add to Homescreen feature.
You could say that we did PWA before it was cool 😉 Each of our projects has included the best usability standards and performance on mobile devices. Now, thanks to PWA, the best practices have become even higher. It’s a win-win situation for everyone, and the possibilities of using PWA are huge. That’s why we promote and believe in PWA as a real alternative to native applications. Operating Brother
Help from the above facilitating a smooth kick-off
Speaking of Google, they do their best to promote high standards and practices of PWAs. They publish numerous courses and educational materials, share tools facilitating testing and implementation of PWAs – literally heaven for open-minded and willing to learn developers! These solutions are useful, especially when you completed the checklist – let’s take a closer look at the two most popular tools to visualize the scale of the help available:
- Lighthouse, which is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and much more. Lighthouse generates audits on how well the page did in tests and provides simple indicators on how to improve its performance.
Wrapping it up – don’t take the easy way out!
As you can see, meeting the basic requirements of PWA’s best practices is not extremely complicated. The fun begins when we’ll try to take it to the next level, tune in and take usability and efficiency seriously. It’s important, especially as PWA is definitely here to stay, delivering a great user experience whilst introducing handy tech solutions. With such a PWA checklist as the one listed in this article, it’s relatively easy to enrich the user experience and create a solution that will be likeable and shareable.
What should be your mobile app development plan? Should you have a progressive web app, or should you stick to a...
In today’s article, we’ll look at the leaders of several industries and see how they have benefited...