PWA tester online

Analyze your Progressive Web App score and diagnostic

Check the performance of your PWA, and try to deliver high quality, engaging, fast and capable apps on every devices

Tester and validators

4.7 Share

Insert Url to test

Include protocol type (http or https)

ANALYZE

What is a PWA?

Why should you care?

Today, more than 60% of total internet usage is happening via mobile phone. Portability, cheap hardware, easy access to internet and the increased number of services on the internet and on the 4G/5G networks are some of the reasons why.

If companies have a dedicated native mobile apps, there's a possibility that many users will prefer their web responsive version to avoid downloading and installing due to memory and hardware constraint or some other personal preference.

Let's take the example of Whatsapp, on your phone. When there is no network, you can still open the app, check past messages and even reply to someone. When the phone gets the internet connection, the messages are being automatically sent in the background.

This is what PWA promises to provide in web apps. It enables web apps to load when there is no network, sync in the background and seamlessly do things while providing a native-like experience for your users.

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable: load instantly and never show the downasaur, even in uncertain network conditions;
Fast: respond quickly to user interactions with silky smooth animations and no janky scrolling;
Engaging: feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

Reliable

When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.

A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.

Fast

53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.

Engaging

Progressive Web Apps are installable and live on the user's home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.

PWAs Come to Desktop and Chrome OS

Google I/O '19

Progressive Web Apps aren't just for mobile any more, they make it possible to deliver high quality, capable apps on Windows, Mac, Linux and Chrome OS.

We'll dive into the key things you need to know about how to build them, some of the unique features they offer, best practices you should be following, and how some of our favorite desktop PWAs were built.

Audit references

Address Bar Matches Brand Colors	Theming the browser's address bar to match your brand's colors provides a more immersive user experience.
Cache Contains start_url From Manifest	Ensures that a progressive web app properly launches from a mobile device homescreen while offline..
Configured For A Custom Splash Screen	A custom splash screen makes your progressive web app (PWA) feel more like a native app.
Contains Some Content When JavaScript Is Not Available	Progressive Enhancement is a web development strategy that ensures that your site is accessible to the largest possible audience.
Content Sized Correctly for Viewport	This audit checks that the width of the content on your page is equal to the width of the viewport. When content width is smaller or larger than viewport width, that's often a cue that the page is not optimized for mobile screens.
Has A Viewport Meta Tag With width Or initial-scale	Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Setting the viewport enables you to control the width and scaling of the viewport.
Manifest Contains Icons at Least 192px	When a user adds your app to the homescreen, the mobile device needs an icon to display. That icon is specified in the icons array of the Web App Manifest.
Manifest Contains background_color	When your web app is loading from a user's homescreen, the browser uses the background_color property to draw the background color of the browser while the app loads. This creates a smooth transition between launching the app and loading the app's content.
Manifest Contains name	The name property of the Web App Manifest is a human-readable name of your application as it is intended to be displayed to the user's mobile device.
Manifest Contains short_name	After a user adds your app to the homescreen, the short_name is the text that is displayed on the homescreen next to your app icon. In general, it is used wherever there is insufficient space to display the full name of your app.
Manifest Contains Start URL	After your web app has been added to a user's homescreen, the start_url property in the Web App Manifest determines what page of your app loads first when the user launches your app from the homescreen.
Manifest Exists	The Web App Manifest is the web technology that enables you to add your web app to a user's homescreen. This feature is commonly referred to as "Add to Homescreen (A2HS)".
Manifest's display Property Is Set	When your app is launched from the homescreen, you can use the display property in your Web App Manifest to specify the display mode for the app.
Page Load Is Fast Enough On Mobile	Many users of your page visit over a slow cellular network connection. Ensuring that your page loads fast over a simulated mobile network ensures that your page loads in a reasonable amount of time for your mobile users.
Redirects HTTP Traffic To HTTPS	All sites should be protected with HTTPS. See the following Lighthouse doc to learn why: Site is on HTTPS. Once you've got HTTPS set up, you need to make sure that all unsecure HTTP traffic to your site is redirected to HTTPS.
Registers A Service Worker	Registering a service worker is the first step towards enabling the following progressive web app features: Offline, Push notifications, Add to homescreen.
Responds With A 200 When Offline	Progressive web apps work offline. If Lighthouse does not receive an HTTP 200 response when accessing a page while offline, then the page is not accessible offline.
User Can Be Prompted To Install The Web App	The prompt to install a web app lets users add your app to their homescreen. Users that add apps to homescreens engage those apps more.
Uses HTTPS	All websites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your site and your users.