PWA basic technical requirements
Progress Web Apps are gaining popularity among businesses in a variety of industries. PWAs, which are currently compatible with Google Chrome but not with iOS, must meet four technical progressive web apps requirement:
1. A PWA must be visited twice in five minutes before being able to install
In Google Chrome, users must visit the PWA’s hosting site/ home page twice before the browser displays the message asking to install it.
This might not be the most reliable verification method, but it is a quick way to determine the user’s interest. This parameter will likely be replaced by a better one in the future, but Google’s developers are content with it for the time being.
2. A valid secure HTTPS connection
Users should feel safe when using a Progressive Web App. To check this, Google will look for a secure connection. Because network requests are routed through a service worker script, enabling HTTPS on the server to mitigate vulnerabilities.
This allows heavy code to run in the background and communicate with it so that one or more long tasks do not block the user interface in the progressive web app.
Although the primary goal of this progressive web app requirement may be to increase security, having a secure connection also helps to build trust among users. Furthermore, because search engines can index PWA, it makes sense to serve via TLS – a cryptographic protocol that provides secure Internet communications – to boost minor SEO performance.
3. Verify the installed JSON manifest
When you provide a data extract in JSON format, the service worker can cache this information. The shell app (a model or pattern used in web app development) is then used to load the CSS rules and deliver an offline version with full user interface capabilities.
When a visitor loads a new page, the service worker needs to cache the JSON extract and physically store it in the shell app to meet progressive web apps requirement. This shell contains style sheets, scripts, images, fonts, and HTML outputs required to allow a user to represent an entire page without loading anything else.
4. Service worker installed
As previously stated, the service worker is in charge of caching all files, push notifications, content updates, data handling, and much more.
In progressive web apps’ technical requirement, it is critical to recognize that this script functions separately from any app or website already on the web server, working with events listeners and commands such as “fetch,” which is close to the HTTP commands “Get / Post / Set.”
Because it listens to network requests on the server but is stored in the user device as an a.js file, the service worker will handle these requests with appropriate responses depending on whether there is an Internet connection.
Progressive web apps checklist before launching
1. Is the site served via HTTPS?
Today, in the progressive web apps checklist, security is essential, so you should ensure that your web application is only served over HTTPS.
How Do You Test?
You can use the following tools to determine whether your website is served over HTTPS: Lighthouse by Google Developer, seositecheckup, digicert, ssl chopper, ssl labs, and so on in the checklist of progressive web apps.
How to Fix it?
If you discover that your website or Progressive Web App is not being served over HTTPS, you must implement HTTPS.
2. Are the web pages mobile-friendly?
According to the progressive web app checklist, you must ensure that your PWA is responsive on all mobile and desktop devices, including laptops, computers, smartphones, and tablets.
Your users can use any device to browse your PWA. You can’t ever be 100% sure what they use and its screen size, so it’s best to ensure your PWA interface is compatible with every existing resolution. The tasks that users want to complete and the content that they want to access should remain constant regardless of viewport size.
How Do You Test?
You can use Lighthouse to verify that your design is mobile-friendly, but you can also manually check it.
First, right-click on the pages you want to check for responsiveness. Then click “inspect” and choose “Toggle device toolbar,” which is located next to the “elements” button.
How to Fix it?
Suppose the results show that the web pages on your web app are not responsive. In that case, you should work on implementing a responsive design or serve a viewport-friendly site adaptively.
- Suggested for you: What is Accelerated Mobile Pages? Should we use it for faster web?
3. Is offline loading supported?
When developing your progressive web app, make sure that all or at least some of your web pages work even when your app is offline.
Users expect installed apps to function regardless of network connectivity. When an app is offline, it should never display a blank page, and a Progressive Web App should never display the browser’s default offline page. When a user navigates to a URL that hasn’t been cached or tries to use a feature that requires a connection, providing a custom offline experience helps your web the experience feels like it’s a part of the device on which it’s running.
How do you test?
While keeping airplane mode on, you must load various pages in the PWA. Once airplane mode is enabled, ensure that the app displays at least some offline content. Lighthouse can be used to ensure that the start URL returns a 200 when you are offline.
You can employ a Service Worker to Repair to fix it.
4. Is it cross-browser compatible?
In the following progressive web apps checklist, you must test your PWA for cross-browser compatibility. This is to ensure that your web app provides a flawlessly smooth user experience to all users regardless of the browser that they will use.
Even though it feels like a native app, PWA still operates within a browser. Your users should be able to find, locate and install your PWA, whether they use Chrome, Firefox, Opera, or Safari. Therefore, you can provide a usable experience for the broadest potential users.
How Do You Test and Fix It?
To test your progressive web app’s compatibility across browsers, try testing and installing it on Chrome, Edge, Firefox, and Safari.
You should also identify that the core functionality can run on every browser. In many cases, this means starting with HTML to create the core functionality and then enhancing the user experience with CSS and JavaScript to make it more engaging.
Consider the submission of a form. The simplest method is to use an HTML form that submits a POST request. After that, you can improve the experience for users who can support it by using JavaScript to validate and submit the form via AJAX.
5. Is there metadata for “Add to Home” screen?
The only way for users to install your PWA is through a browser download, not an app store. So, make sure this critical step works and highlight it on your progressive web apps checklist.
How Do You Test and Fix it?
You can use Lighthouse to test this or do it manually through your phone browser. If this causes you problems, simply add a Web App Manifest file to your project.
6. How smooth are the page transitions?
Page transitions are crucial to the perceived performance of the web app, so they should always feel smooth when navigating through it, even if your internet connection is slow.
How Do You Test?
This testing should be done manually, preferably on a slow network. Try clicking on different buttons or links to see if it responds immediately, either by transitioning smoothly to another screen, displaying a placeholder loading screen or while the app waits for a response, a loading indicator appears.
If it is a client-rendered single-page app, you should work to move the user immediately to the next page, then show them a skeleton screen and use any existing content, such as the title or thumbnail, while waiting for the content to load.
7. Is there a URL for each page?
Unlike a website, a web application doesn’t need a URL for every action taken since some elements will stay static while the requested one alters. However, your PWA should generate a unique URL for specific actions requiring a page load.
How Do You Test?
By testing whether a page can be accessed through the browser, you must ensure that it’s linkable through the URLs and that each URL is unique.
You can check whether the client-side router can re-construct the PWA state from a URL.
8. Is the content easily shareable?
Our PWA checklist suggests that all the content on your web app should be easy to share, even in full-screen mode, and it should also be formatted into cards for all social media platforms.
How Do You Test?
This test must be performed manually by sharing the content in the following ways:
- Facebook – Test the URL by entering the post to be shared and determining whether cards were generated.
- Twitter – Determine whether a suitable type of card for your content has been added to the given HTML page’s HEAD.
How to Fix it?
You can address this by including social or generic share buttons in your User Experience. A generic button can automatically copy the URL to the user’s clipboard and then offer them options for social networks to share. You can even experiment with the new Web Share API to integrate Android’s native sharing system.
9. Is Schema.org metadata available at all times?
Your web app should be able to generate a rich card for you to improve the visibility of your website or web app in search engines.
How Do You Test and Fix it?
To test this one, use Google Structured data to see if the image, description, title, and so on are available.
If you markup the content, you can fix this. As an example:
- Rich Cards require the Recipe type markup in a recipe app.
- Rich Cards and/or AMP Support requires the NewsArticle type markup in a news app.
- The Product type markup for Rich Cards should be present in an eCommerce app.
10. Is it possible to receive push notifications?
If push notifications are required for your web app, put this on your progressive web app checklist to ensure they are not overbearing. Though push notifications are not required for an excellent web app, they can be used as a marketing strategy.
How Do You Test?
To test this, go to the web app and look for the push notifications opt-in flow. When the browser displays the permission request, you must check to see if it includes any context explaining what the permission is for.
When the site requests permission on page load, ensure the context is clear about why the user needs to enable push notifications.
How to Fix it?
Create a user-friendly and transparent notifications permissions flow. You must ensure that the User Interface encourages users to turn on Push Notifications without becoming overly aggressive.
11. Is the load Ttime quick (even on 3G)?
Your users might not have access to Wi-Fi all the time. As a result, it is critical to check the first load on 3G or 4G connections.
High-performing sites engage and retain users better than low-performing ones, and performance is critical to the success of any online experience. Scrolling and animation should be fluid, even without a connection.
How Do You Test?
This can be accomplished using Lighthouse to verify the time to interactive 10s for the first visit on a simulated 3G network. Page Speed Insights and the Chrome User Experience Report are other options.
How to Fix it?
One thing you can do is focus on loading less script, ensuring that the maximum amount of script is loaded asynchronously via script async>, and making sure that the render-blocking CSS is appropriately marked. Aside from that, you can experiment with the PRPL pattern and server-side tools such as Page Speed Module.
12. It works with any type of input
Devices provide a variety of input methods, and users should be able to switch between them seamlessly while using your application. Input methods should not be limited by screen size, which means that large viewports must support touch and small viewports must support keyboards. You should also improve experiences to allow input-specific controls (such as pull-to-refresh).
This is the progressive web apps checklist’s criteria that is often neglected.
13. Contextualizes permission requests
Notifications, geolocation, and credentials APIs are intentionally designed to be disruptive to users because they are associated with powerful functionality that requires opt-in. When these prompts appear without additional contexts, users are less likely to accept them. Instead, only show those prompts after you’ve given the user an in-context explanation for why you need that permission.
14. Best practices for healthy code are followed
There is a great deal that goes into developing a modern web application. Keeping your application and codebase up to date will make it less prone to bugs in the future.
There are many recommendations in the progressive web apps checklist to ensure a healthy codebase, including avoiding libraries with known vulnerabilities, ensuring you’re not using deprecated APIs, removing web anti-patterns from your codebase (such as using document.write or having non-passive scroll event listeners).
Consider requiring static code analysis, such as linting, and automated testing in multiple browsers and release channels. These techniques can assist in detecting errors more quickly and earlier.
Other PWA checklists
To assist teams in creating the best possible experiences, Google has created a checklist that breaks down everything they believe it takes to build a Baseline PWA. Checklist of Excellent Progressive Web Apps:
- Google Schema indexes the site’s content.
- Where applicable, org metadata is provided.
- Where applicable, social metadata is provided.
- When necessary, canonical URLs are provided.
- The History API is used by pages.
- The page’s content does not jump as it loads.
- Your scroll position on the previous list page is retained when you return from a detail page.
- When tapped, the on-screen keyboard does not obscure inputs. Content can be easily shared in standalone or full-screen mode.
- The website is responsive to phone, tablet, and desktop screen sizes.
- Any app installation prompts are used sparingly.
- The Add to Home Screen prompt is blocked.
- Even on 3G, the first load is high-speed.
- The site employs cache-first networking.
Wrapping up
Your PWA project won’t be finished without thorough testing and re-testing. To make the job easier, we hope this Progressive web apps checklist and requirements can highlight some critical improvements and criteria to be considered. At the same time, choosing suitable PWA frameworks and tools can help your web app to be less prone to bugs.
More related posts from Web Development blog you shouldn’t skip:
