Google originally proposed progressive web applications in 2015, and they drew much attention due to rather simple development and many benefits for the application’s user experience.
What is this Progressive Web App?
A progressive web app (PWA) is a software development methodology, combining the best technologies used in mobile and web applications. Such application takes advantage of functions of browsers and features of mobile apps. Just imagine a website, which acts like an application, though it was built using web technologies.
The usual features of typical apps are sending push notifications, offline work, loading on homepage etc. The PWAs shift the features of typical applications to the mobile browser, using standards-based technologies.
In other words, a progressive web application uses web capabilities in order to provide an application-like experience.
In order to be called progressive, a web app must:
- be supported by any device and deploy all the features of a device it is used on.
- have a look of a typical app and be built using the application shell model.
- work in terms of low connectivity or even offline.
- be discoverable in search engines, since a PWA is a website.
- have a user interface corresponding to the device’s characteristics (screen size, form factor).
- use the universal resource identifier to show the current status of application.
- provide the features of mobile apps, such as push notifications and others.
- provide installation on the home screen of a device.
- provide fresh content when connected to the Internet.
- be hosted over HTTPS, in order to provide security of network requests.
HTML, JavaScript and CSS are used for the building of the progressive web apps, which are based on open web standards. The key peculiarities of PWAs are flexibility and capability to change functions depending on frameworks and limitations of a device.
Pros and Cons of Progressive Web App Development
PWAs can boast of many advantages over the traditional web and mobile methods:
Pros of Progressive Web Apps
1. The PWAs are the web pages; therefore they do not require installation. Nevertheless, you can install a progressive web app on your home screen for easy access anytime.
2. The same thing is with updates. Being essentially the web pages, the PWAs can only be refreshed using and require no update function.
3. High portability is another benefit of a PWA and it does not change your packaging or deployment model unlike the strategies for native apps.
4. Service Worker technology provides quick loading of your app regardless of the network connection quality.
5. The PWAs are always available on your home screen for easy run and return.
6. Due to the Service Worker technology, the PWAs sends push notifications to the device providing refreshed content even at the closed browser.
7. Security of the PWAs is ensured via HTTPS hosting.
8. No matter what device you use, the PWAs will fit all kinds of tablets, laptops or smartphones due to the use of responsive web design techniques.
9. Compared to the native apps, the PWAs do not use much space and resources, which extends the battery life of a device and requires less data usage due to the Service Worker, which provides functioning even in offline mode.
10. The use of application shell model for building the PWAs provides an interface of native apps with scrolling, navigation and other features.
11. Once more to recall that the PWAs are the web pages, so they offer sharing function for their users unlike native apps.
12. Unlike the usual apps, the PWAs can be discovered through search engines due to the W3C manifests and registration of Service Worker.
13. Forget about app store, since you have no need to install or update the PWAs.
Such an amount of benefits does not mean that no flaws are attributed to the PWAs. There are some substantial disadvantages of progressive web applications, due to which the users will not have an opportunity to enjoy the PWA experience.
Cons of Progressive Web App Development
1. The PWAs support not all browsers. Of course, the newer versions of such popular browsers as Opera, Samsung’s Android browser and Chrome do support PWA, however, Internet Explorer, Safari, Edge and many other custom browsers do not. This point is quite essential, since the Safari browser alone covers 50% of browser market for mobile devices.
2. Unfortunately, not all devices support the entire software functionality. For example, a progressive app for Android devices has some support issues, and a progressive app for iOS devices does not support notifications and shortcut prompting on the home screen. Herewith, the iOS devices cover about 50% of the mobile device market in the USA.
3. Hardware functionality is also not supported on all devices. The hardware components, which are supported by the native apps (fingerprint scanners, GPS, and camera) are not supported by the PWAs.
4. There is no download store. This point may be deemed as both advantage and disadvantage. Since the PWAs are the web pages, they do not require any installation from any app store. The app stores are very convenient repositories, which help users search applications. For this reason, some difficulties might occur with the search of the PWAs and proving their legitimacy.
5. The PWAs do not support cross application logins. Unlike many applications, requiring an individual login, the PWAs can not collect this data independently.
How to Develop Progressive Web App
Development of a progressive web app is similar to native app development, however, it has own peculiarities and differences. The development progressive app process includes the following steps:
1. Defining Purpose, Direction and Goals of a Progressive Web App
It is an initial task and an essential stage of the process. You have to define the purpose and goals of a PWA, based on which you can establish the direction for the project and start the work.
2. Defining Security Documents and Audience
This step envisages the research of prospective users or customers, and the following assessments:
- Type of target users (gender, age, skill level etc.)
- Type and level of users’ access
- Type of audience for planning the level of security based on characteristics of users, fraud level of the area and other factors
3. Creating Functional Specifications
You need to specify all of the functionalities and technical features of a progressive web application to accomplish. As a rule, a functional specification document is composed, which will help prevent any misunderstanding of the project functionalities and features. Any function should be described as detailed as possible, listing every user’s behavior.
The easier way is to create a feature summary document, containing the sample screen shots of the progressive web application screens, or to create a simple document with a summary of the features.
4. Identification, Analysis and Selection of Third Party Vendors
This step includes the research and selection of vendors, services and products, including:
- Progressive App Development Company
- Payment System and Merchant Account
- SSL Certificate
- Server Provider
- Network, Server, Load Balancer, Firewall Equipment
5. Selection of Technology, Technical Specifications, and Structure of Progressive Web Application
This step envisages the selection of platform, structure, development environment and framework for your future PWA. It is recommended to compose a Technical Specifications Document with the detailed data on the technology used, versions and licenses.
6. Application Visual Guide
This step provides the creation of visual guide in order to look at the project from the outside.
7. PWA Development
Now the development team may join the process. Its tasks are the following:
- Creation of the PWA framework and architecture
- Design of database structure
- Development of the PWA module, classes and libraries
- Completion of the development and implementation of all functionalities
8. Beta Testing and Error Checking
The final step of development process is the test stage in order to elicit and remove any errors and defects.
Costs of development
Of course, the prices for various PWAs are average and very rough, because they depend on many factors including complexity, intended use, selected framework and technology, location and name of Development Company and many others. The highest prices can be found in the developers from North America. The Eastern European progressive app developers offer affordable rates along with a high quality. Due to the fact that a PWA runs on every device with a browser, there is one code base for all platforms. This significantly reduce the costs for progressive web app development services.
So, it is impossible to specify the exact development costs without understanding of what PWA is to be developed. However, despite some flaws, the progressive web applications are the future and you should pay your attention to them.
