DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Unroll Tech
Unroll Tech

Posted on • Originally published at rootquotient.com

Important things to consider while building a Progressive Web App

The biggest advantage of a Progressive Web App is providing instantly accessible, easy to share applications with the availability of features in offline mode. While PWA is a combination of both traditional websites and mobile app, there are certain parameters to make a good PWA.

1. The β€˜Progressive’ in PWA

Progressive Web App should be accessible in any device making the best use of the users’ device & browser features. It's also important that the website is constantly expanding & regularly updated for easy usage & app-like service. Progressive means ever-growing.

2. Easily searchable

Website should be visible for anyone looking for it in a search engine. This is one aspect where Progressive Web App has an edge over native applications, which are not always visible in search engines. A discover-able PWA assists in reaching more people and without much trouble.

3. Faster user experience

A good PWA is fast from the start throughout the time period of usage. Users should not be left waiting for the page to load or for any option to work. As the page loads quicker, it increases the usage probability by 123%. The user should have a smooth experience and not be left wondering if their selection was registered or not. The animation, scrolling, visibility of options, etc. should be transparent and smooth.

4. Responsive to various screen sizes

A PWA can be accessed from any device starting from mobiles to tablets to laptops. So, it is crucial to building a web that fits any view port. The options must fit on the screen and be available for any device.

5. Offline availability

A native app never shows a blank page to a user. Similarly, a PWA should be customized for any user to access it offline. This is a major factor that acts as a bridge between a native application and a traditional website.

6. App-like service

A PWA should imitate an app and be built on an application shell model. It should carry minimum page refreshes and the same options as in a native app.The navigation and interaction should not be any different from a native app. This could be considered a trial for a user willing to download the native app at a later time.

7. Re-engageable

Though native apps are more likely to see regular users, the intention of PWA should be to achieve that status. Re-engaging with the users through push notifications and other feasible modes sells the services easier and keeps the customer engaged.

8. Linkable & installable

A URL that is easy to share and a design that indicates that the PWA is up-to-date is one of the characteristics inherited from a traditional website to make it more accessible. This will ensure easy access through bookmarks and readily shareable. Since it should be available offline, it should be easy to install the PWA on the home screen without involving the app store in between, making it readily available just like a native app.

9. Safe and secure

Since PWAs are accessible in any device and system, it has a more intimate connection with the users, indicating that it can be intercepted through service workers upon network requests. Hence, it has to be hosted with HTTPS to avoid being tampered with.Talking of security, it should be made obvious for the users as well.

Taking permission while providing context and asking for API only when absolutely necessary are some of the responsible steps taken by the service providers to ensure safety to the users directly. Interruptive requests for location, credentials, notifications, etc. without context might develop distrust among the users.

PWAs are often proven to be the best alternative for web developers to quickly cover a new set of audience without having to spend much time on developing native mobile apps.

I would love hear the community's views about pros/cons of using PWAs in the place of native mobile apps.

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post