Jon Fletcher 2020-07-01

The essentials of a powerful PWA - Part 2

In the first edition of this blog, we covered exactly what makes a PWA a PWA. All the technical requirements that are needed for a normal mobile website to be classed as a Progressive Web App. In this edition, we're going to cover how to add and optimize these PWA features to start feeling the real benefits of switching to PWA. 
In this post, you will learn how to:
  • Implement push notifications 
  • Make your PWA installable 
  • Combine with AMP 
  • Analyze PWA performance 

Implementing push notifications 

The core technology behind PWAs are Service Workers, scripts that run in the background, separate from the main browser thread. Service worker cache makes it possible for a web site to function offline and it's also the technology that makes web push notifications possible on Progressive Web Applications. When you send a message from your push notification server, an event is triggered. A service worker listens for these 'push events' and will send the notification to the user. 

As service workers operate aside from the main browser thread, they can receive and display notifications when the browser is not active. While Google provides a Codelab to integrate push notifications into a web server yourself, the far simpler option is to use an existing push notification system such as OneSignal. 

In order to add push notifications to your PWA directly, you will need a Web Server for Chrome, or your own web server of choice, a text editor, knowledge of HTML, CSS, JavaScript, and Chrome DevTools, and finally the Codelab. Utilizing a service such as Onesignal provides editing and styling and options, a reporting dashboard, ensures your subscribers are fully GDPR compliant, and tracks the success of your campaigns.

How to add your PWA to the home screen

Next in the required characteristics of a PWA is the ability to save and launch it from the home screen, like a native app. "Add to home screen" allows the browser to take the basic information about your website and use it to define the app on the device's home screen, with an icon and the name of the app. 

The key element used for this feature is a web manifest file. This is a JSON format file that contains all of the information about a website, usually found in the root folder of a web app. The minimal information the web manifest should contain to add this functionality is a name and at least one icon defined, including the src, size, and type.
You will also need to ensure that your site is served from a secure (HTTPS) domain and you have a service worker registered, in order for the app to work offline. 

With these components correctly configured, when your reader accesses your PWA from a supported mobile browser, it will display a notification prompting the reader to install the app as a PWA. Browser support is currently limited to Firefox, Mobile Chrome, Android Webview 31+, and Opera.

PWA and Google AMP

We can't overstate the traffic and engagement benefits of setting up AMP for any online publisher. But there is often a sticking point - publishers don't want to deliver two levels of user experience and have two platforms to manage. Fortunately, AMP and PWA pages integrate and complement each other in many ways. As long as your pages are served from your site's domain— as opposed to an AMP Cache— AMP Pages can use many PWA features. 

This is all made possible by our old friend, the service worker, a proxy that sits between your page and the server. But, your service worker doesn't kick in until the second-page load. To make your first impression as fast as possible, it's recommended to make the entry point into your site an AMP page, loading the PWAin the background for subsequent pages with the full PWA feature set. To use AMP as a gateway to your PWA, you can use the element amp-install-service worker to warm up a cache and the PWA as your reader digests the first page of content.

There are of course many other ways you can combine AMP and PWAs to complement each other that you can read here. The takeaway is that implementing AMP will not harm your PWA - or vice versa. 

Measure your performance

Finally, with a PWA activated, you can start to test and measure to make your PWA outperform other PWAs. 

The first place to start is Google's Lighthouse test. This will not only tell you how well your page is performing, but it will also give you a PWA compatibility score.

With this tool, you can see if your PWA:

  • Can load in offline or flaky network conditions
  • It is relatively fast
  • Is served from a secure origin
  • Uses certain accessibility best practices 

When you run the report from Google’s Dev you can see how well your PWA is configured. 

Lighthouse will also measure performance metrics that are crucial for SEO performance.

Being measured as a ranking factor in 2021, you will be able to see how well your PWA performs across Core Web Vitals, the three performance metrics Google is prioritizing for the coming year. 

This guide should give you an introduction to how a PWA can increase your mobile performance, as well as some of the technical specifics required to implement them.

If you'd like to see how you can convert your existing mobile website into a fully performing PWA, you can schedule a free demo with our team to learn more.

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email