fbpx
Paul Jackowski Updated: 12 Sep 2022 8 min to read

PWA Checklist & Best Practices – Progressive Web App Requirements

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

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:


{
  "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 your app’s single web pages. 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 the implementation of push notifications.

3. HTTPS

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

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 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

security and performence

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

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 good. 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 required to power interfaces cached offline. Thanks to that, performance is reliable and swift because the shell is not loaded every time the user visits the app. The approach is reliable for catching the shell using a service worker to get the app running. Then, the content loads using JavaScript. Handy, isn’t it?

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. 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 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.

 

  • Workbox 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’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.

 

Call to action
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! If you need any help, please don’t hesitate to contact us.
avatar

Paul Jackowski

Executive Brother

Share

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.

    ADD COMMENT

    RELATED articles