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.
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.
- Check: manually or via Lighthouse;
- Check failed: implement a responsive design or use the site adaptive for it.
- 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.
- Check: use Lighthouse and mark «yes» the function «Prompt a user to add to home screen»;
- Check failed: add a Web App Manifest file.
- 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.
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.
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.