PWA 2019 best practices – minimal & optimal checklist for web developers

Progressive Web Apps (PWA) are recently gaining enormous momentum. It’s not a surprise! PWAs are fast, reliable and engaging, whilst ensuring desirable functionalities combined with great convenience introduced to both mobile users and developers.

No wonderthe concept of writing one app to run on all platforms andbeing managed by one common code is the sexy thing in web development world and the trend of the moment.

It is especially so, asin order to achieve satisfactory results, building a Progressive Web App often requires implementing only a few changes in combination with just a slight optimisation of existing website. Particularly, if you’ve already been keen on taking care about User Experience and have put effort in designing a clean User Interface and maximised 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 on 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 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 app store of the platform. 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 coverto 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 the root of your web app. 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 home screen, and how it will behave after launching.

The JSON file contains really basic data and is very simple. For example, it may look like this:


{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

 

2. Service Worker

A service worker is in fact a JavaScript file, sitting between the browser and the server. It is a major component of a PWA that you put at the root of the web application, as it handles requests and sends responses in the background on behalf of both the browser and the server. The idea behind that is to provide offline capabilities and access to PWA’s features by caching single web pages of your app. Thanks to a service worker, users don’t have to wait until the data loads when they open an app next time. It also enables implementation of push notifications.

3. HTTPS

It is requirement of a service worker to 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 home screen. The easiest way around this would be a single 512 x 512 px icon, but a PWA can have a vast variety of differently sized icons.

Going the extra mile

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 some extra effort to really satisfy the users and to increase the chances of its overall success.

There are many additional features, that take a basic PWA to exemplary level. Web developers ought to 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 staying ahead of the curve:

 

Appearance and user experience

users_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, rather than a responsive web app. Redesigning conventional web designs for mobile purposes is an easy way to 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 to never make it scroll horizontally, not unless it’s absolutely necessary. Settings width or height can be omitted completely. Limiting these increases chances of breaking the layout. Also, a good idea is to implement a skeleton screen that will resolve blocking screen transition on slow networks, in order to maintain smooth experience.

Another good practice would be to go for device fonts instead of custom fonts. Native apps use native fonts, as they load instantly event without 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 a bottom navigation instead of hamburger menu), make sure pages are responsive across all mobile devices and the content doesn’t jump as the page loads.

Last but not least, it’s worth to leverage Google APIs, that can significantly enrich 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

security and performence

Today, 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 tools such as Source Map Explorer to identify the heaviest dependencies and to get rid of them.

Performance is crucial even with low or without Internet connection at all. Make sure your page loads fast even on 3G network, it uses cache-first networking and that all URLs in the app load 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

technology

There are some tech solutions for developers that are worth using to make your PWA outstanding. For example, server-side rendering is recommended, as it increases the speed of how users interact with the content, even with disabled or failed JavaScript. It is also great for SEO, with search engines indexing the PWA easier, which is also a good practice. For that to happen, ensure your content is accessible and that each page has a URL.

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.

In terms of fundamentals of PWA architecture, use the App Shell Model by Google. It’s a great way to build PWAs that are reliable and load instantly on screens – just like in the native apps. App “shell” is a minimal HTML, CSS and JavaScript that’s required to power interfaces cached offline. Thanks to that, performance is reliable and swift, because the shell is not loaded every time user visits the app. The approach is reliable on catching the shell using a service worker in order to get the app running. Then, the content loads using JavaScript. Handy, isn’t it?

 

Mike Jackowski

 

“You could say that we did PWA before it was cool 😉 Each of our projects has included 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.” – Mike Jackowski, 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 a 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, just to visualise 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.

 

  • Workbox, which is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build PWAs. Using these JavaScript libraries developers can easily add offline support to web apps. Caching and serving files to improve performance, stability even on unreliable connections and user experience enhancement – working with Workbox makes things much easier!

 

Wrapping it up – don’t take the easy way out!

As you can see, meeting the basic requirements of PWA 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 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 user experience and create a solution that will be likeable and shareable.

Basic PWA or exemplary, top-notch solution? The choice is yours to make, but we’re pretty sure we know what your users would choose!

Executive Brother
All posts Paul's

SUBSCRIBE our NEWSLETTER

Are you interested in news from the world of software development? Subscribe to our newsletter and receive a list of the most interesting information once a week.

Add comment