The worksheet of PWA testing on various devices

What is Progressive Web Applications (PWA)?

PWA (progressive web application) transforms the site into an application visually and functionally. These settle as icons in the home screen or app folder. PWA does not require a browser to run yet offers the same experience.

Being similar to mobile applications, PWAs have benefits:

• do not occupy much space on your gadget;
• run quick;
• relieves you from annoying updating proceedings;
• available offline.

This invention is fantastic indeed cause it includes all online functionality unburdening you from hours of search and updating (like the native mobile applications of the vast devices).

How to test PWA?

Before deciding to explore the new PWA, it would be nice to check its functionality. And this list will come in handy:
1. Safeness over HTTPS. HyperText Transfer Protocol (HTTP) is the foundation of any data exchange on the Internet. Therefore, it is vital to know if it serves your chosen PWA.

• Check: any tools like Lighthouse by Google Developer, Jitbit, Seositecheckup, Digicert, SSL chopper, SSL labs, etc. are suitable for this purpose;
• Check failed: implement HTTPS.

2. Responsive web design. Experiment if your PWA can provide the best experience to users across all your gadgets (desktop, laptop, tablet, smartphone). Only apps with a responsive design possess this characteristic.

• Check: manually or via Lighthouse;
• Check failed: implement a responsive design or use the site adaptive for it.

3. Offline running. Respectful PWA provides completely offline working or at least some pages of this application. A 200 response is cacheable by default. Therefore, make sure that PWA provides a successful status response code.

• Check: manually or via Lighthouse. For manual checking, turn the «airplane» mode on and see which context the application provides offline (the whole or separate);
• Check failed: you need service help.
4. Browsers compatibility. Test if the chosen PWA runs fluidly across all installed browsers.

• Check: open PWA in Safari, Chrome, Opera, Mozilla, etc.;
• Check failed: review the issue that occurred in each browser separately; the system will offer a problem solution.

5. Availability of the «Add to Home Screen» function. A useful feature for installation of your PWA on your mobile or desktop device.

• Check: use Lighthouse and mark «yes» the function «Prompt a user to add to home screen»;
• Check failed: add a Web App Manifest file.

6. Smoothness of page transitions. It is an essential feature for your pleasurable performance of PWA during which the pages should not feel snappy while navigating, even during a slow Internet connection.

• Check: manually using a slow Internet speed. Click different icons and see if they respond immediately. If the transition goes smoothly, you can see a placeholder, loading indicator while the application awaits the response.
• Check failed: if it is a customer-oriented single page, open the next page, save the blank pages, and operate any content such as title or thumbnail that you have seen during the loading.

7. A uniform resource locator (URL) for each page.
Every page of PWAs must have an exclusive URL.
Check: every page must have a linkable URL for sharing on social media. Test each page separately. If they open fine, your browser provides a new window.
Check failed: For a single-page application, the service side routing that runs a browser can transform the application state from a provided URL.
8. Content sharing. The full-screen mode of a PWA allows easy sharing of all the content into the social networks or various platforms.
Check: manually using full-screen mode. Try sharing each page, for instance, on Facebook or Twitter.
Check failed: provide social sharing buttons or generic share buttons by copying URL to the clipboard, then offer some options to share.
9. Schema. org metadata availability. PWA should provide a rich card. It improves the general look of the web site or application through different search engines.
Check: use Google Structured data. It will show if an image, introduction, title are available.
Check failed: Markup the content by adding Recipe, NewsArticle, Product type markups for Rich cards.
10. Push notification availability. Implementing push notifications is not necessary but desirable and makes sense for connecting with users. Take care they are not annoying though, provide the information about them.
Check: visit the site or application. The site will show you the permission request, to assure that the content explains the reason why a user should activate these push notifications. The screen color should dim down when the permission request appears.
Check failed: make the permission in a more friendly and precise way. It should encourage users and do not look violent. In case a user rejects push notifications, these should not appear on the screen again for at least several days. The dimming settings you can do on your web application either.
All works perfectly if push notifications:

• appear when the users need it the most;
• contain the precise appeal for action;
• cover the relative to users information only;
• controllable by users who can enable and disable them according to their preferences.

In case you can not solve the problem with setting the push notification, send the informative letters to clients instead. Otherwise, inbuilt a user interface for easy adjustments.

11. Speed test. Customers value high speed the most, so test the load even for 3G connections.
Check: via Lighthouse, Nexus %, or similar services that allow verifying the time to interactive < 10s for the first load on 3G network.
Check failed: There are many ways to elevate an application performance. For a better understanding of the process, use Pagespeed Insights, SpeedIndex on WebPageTest.
Essential is focusing on loading less script. The script should go through <script async> randomly. Check if the setting of blocking CSS is suitable. Try using the PRPL pattern and PageSpeed Module.

Summarizing

Now you can be calm that the PWA is truly progressive indeed. In case of negative results of checking, keep on working on the PWA. If everything works okay, observe the raising rates of conversion and enjoy your PWA performance.