Converting the website to a Magento 2 PWA is now a trend in the Magento communities. However, since PWA is still a new thing, most of the merchants don’t know exactly what they will get after transforming their sites and whether that is the right decision or not. That’s why they will need a comprehensive Magento 2 PWA checklist that appears as a “compass” to move forward.
How Is Magento 2 PWA Checklist Used For?
If you are about to integrate PWA into your store, this PWA checklist will help you know what to expect and easily discuss with your developers.
This article is also for those who are going to complete their Magento PWA development projects and need a reliable checklist to make sure that their apps are qualified to release.
PWA Core Features
The first and most crucial criterion in evaluating the result of a Magento 2 PWA development project is whether it fully provides PWA core features or not.
All of the PWA core functions have to run smoothly and efficiently. Below is the list of tasks that need to be tested and how to test them.
Cross Platforms
This is the first feature of PWA to check. PWA must have the ability to work in multiple browsers and operating systems (e.g.: Android Chrome, iOS Safari), and on different user devices (desktop, laptop, tablet, smartphone).
Add To Home Screen
The next one is “Add to home screen” (A2HS). We can check this feature by accessing the site from browsers to see whether it shows the A2HS popup or not, and then accept the “add” request to make sure that the PWA is installable to the mobile home screen.
This function also works on desktops but we often do not pay attention to it.
It’s worth noting that iOS does not fully support this feature. Here is what iOS users have to do to add PWA to their device.
Splash Screen
This is the welcome screen appearing when users launch the PWA. In general, it contains a simple background and store logo.
You need to make sure that this screen is well-designed and displayed in few seconds to create an app-like experience.
Offline Mode
This is an indispensable feature of PWA. We will have to check whether the PWA is able to show preloaded content when lacking an Internet connection or not.
Push Notification
The next feature to test is Push notification. You have to check how it works on both sides. On the one hand, push notifications can be sent from your store backend. On the other hand, the messages would be received in devices that installed PWA.
Magento E-commerce Functions
Along with PWA’s features, Magento’s core functions are equally significant in Magento 2 PWA. The basic e-commerce features should work correctly. Here are some recommended functions to check:
- Shopping cart
- Checkout
- Customer login
- Navigation system
- Search
- Products filtering and sorting
Magento Extensions
In general, most of the Magento websites have a lot of extensions to improve their performance and functionality. However, the majority of Magento extensions can’t work in the PWA storefront.
To deal with that, the developers have to create a new “gate” to connect these things by writing new APIs.
That’s the reason why we have to check whether the extensions work appropriately or not after Magento PWA development.
Custom Functions
Similar to the extensions, when converting a Magento website to a Magento 2 PWA, the developer will rewrite or develop the additional API for all tailored-made functions on the site.
In other cases, all of the old custom code must be eliminated and replaced by the new one for PWA.
Owing to that, it’s essential to test all of your special functions on the new PWA to confirm that they are maintained.
Design
Additionally, PWA’s design is also in the Magento 2 PWA checklist for merchants. The design has to be given a tryout on both desktop and mobile with the suggestion criteria below:
- Responsiveness: The design must be optimized on all types of devices and responsive to all screen sizes.
- Footer: To create like-app looks and feels, PWAs often have a menu for the mobile version instead of the normal website footer.
Performance
Another component that contributes to the success of a Magento PWA development project is app performance.
To evaluate the performance of a PWA, the easiest way is to use Google Lighthouse. This tool is created by Google to measure the quality of a PWA in general.
By using Google Lighthouse, we will be able to draw out the mark of these elements:
- Performance
- Accessibility
- Best practices
- SEO
In the circumstance of detecting issues, Google Lighthouse will notify and give the website owners some suggestions to solve the problems.
Loading Speed
Since the loading speed is the critical factor in enhancing the user experience and getting the user to use the app, every merchant wants to get a fast website. That’s why most Magento store owners want to adopt PWAs that come with blazing fast speed.
However, you still have to check and pay heed to is the loading speed of your Magento PWA at the end of the development process. With this aspect, we can use another Google tool called Google PageSpeed Insights.
Conclusion
Above is the ultimate Magento 2 PWA checklist that all of the merchants should know before starting and after completing their projects. In short, you must scrutinize your PWA in terms of core PWA/ Magento functions, Magento extensions/ custom functions, design, performance, and load speed.
