Progressive Web Apps (PWAs) is a terminology which was presented by Frances Berriman and Alex Russell in 2015. They proposed an idea that uses the capabilities of modern browsers to create web applications which would provide a native app user experience. These are intended to be used on any platform having the standard browsers and would provide features like working offline, push notifications, reliability, swiftness and much more. As they are web-based applications, they no longer require to be downloaded from any app stores.
Web Applications have been present for a long time, but they have stayed behind the native apps in terms of performance and speed. Now, with the help of the right tools and technologies, PWAs are overtaking the native apps.
There are over 5 billion devices that are connected to the internet. Among which, the mobile web users are around 4 times greater than the native app users. But this figure declines when it comes to responsiveness. According to a survey a typical user spends around 180 minutes in a native app and 9 minutes on the mobile web. According to another study, 53% of users will abandon a site if it takes more than 3 seconds to load.
PWAs provide a rich User Experience that is making users switch on the web instead of the native apps. It provides the users to eliminate the steps of downloading an app and helps them in conserving their device storage.
PWAs don’t require to be built and distributed separately. They can be deployed simply like a basic web page. Developers find it easy to build a cross-platform app i.e. it can be used on any device like Mobiles, Laptops, Tablets, etc. PWAs are completely safe and are up to date.
There are of course some limitations to this technology but with the pace at which the web ecosystem is evolving, that time is not far when all the limitations would be addressed.
Following are some main characteristics of Progressive Web Applications:
- Progressiveness: As the name suggests, PWAs do not render like other websites or applications. These applications cache the data progressively which enables them to be lightweight and compromising, without affecting any of its functionalities.
- Responsiveness: Responsiveness is kept as the main priority in PWAs. It is ensured that the users are getting a native app like User Experience.
- Safe and Secure: PWAs are built on an https network, which ensures that these applications are safe from external threats to some extent.
- Affordable: PWAs can run on most of the platforms. It can reduce the overhead for businesses allowing them to write a single code and then deploy it on multiple platforms.
To build your progressive apps, you are going to need the right configuration and following files:
Web App Manifest consists of a JSON file which tells the device about how an application is going to behave after installation. It has the following properties,
- icons: It consists of an array of icons which are displayed when the application is installed on the device.
- short_name: A short name is displayed when an application is installed.
- name: A descriptive name for the same application.
- start_url: This refers to the file which is loaded first. In most cases, it is the entry point Html file of the application.
- display: This determines in what manner the application pops up on installation.
- theme_color: This shows the color on the top of the review.
- background_color: This shows the background color of the splash screen.
- orientation: It helps to decide the landscape or portrait orientation of the display on the device.
A Service Worker can be created in multiple ways. It acts as a backbone of the PWA architecture which plays a critical role in the offline capability works. It is responsible for the caching strategy and decides what responses to send on the incoming requests. Before we dive into its mechanisms, we have to understand that service workers also act as a web proxy for the application when it is losing internet connectivity. It handles push notifications, especially during offline usage.
Some of the caching strategies are as follows:
- Cache Only: It is the simplest strategy followed. It is the only strategy where the request is served by the service worker from the local cache directly before it reaches the network.
- Cache and Update: It sends a request to the network to fetch any update present and moreover serves the assets and data from the local cache.
- Cache, Update and Refresh: There is an exception in this strategy that the user is notified when an update is available from the network side.
- Embedded Fallback: In this strategy, the embedded code is set up in the service worker file. This happens when there is a situation, where one needs to display something, considering cases where the service worker fails.
- Network or Cache: We configure the application to decide which resource to tap in first and then revert to the other one based on time limits. Service workers are placed between the client and the network according to the requirements.
There are different tools available which can help can create PWAs. We are going to discuss a few of them as follows:
This was built by the Microsoft developers. It is an open-source project which is built on Manifold.js. It provides components to build a site application which tends to embrace the PWA architecture. It also includes native device packaging for the applications.
This tool was built by Google. It is also an open-source project which helps to improve the overall quality of web pages. It helps one in understanding the practices used for implementing PWAs.
Yep, you read it right. Your simple WordPress site can be converted into PWA by following in a few simple steps. You can do it manually, use a WordPress plugin or take help from an external service which will handle everything for you.
To achieve this task manually, you’ll have to have hands-on experience with the AngularJS, React or Vue. Developers usually recommend using AngularJS as it has a wonderful connection with Ionic. Ionic uses the same technology to build PWAs and provides a useful framework for developing. Some companies are also using React because of its default support for PWAs.However, each method has its pros and cons, and it usually comes down to your personal preference.
Google has created a checklist covering everything that it takes to build a PWA. The following points should be checked before deploying your site to the public.
- The site is served over HTTPS
- Pages on tablets and mobile devices should be responsive
- All app URLs should be able to load while offline
- Metadata should be provided for Add to Home Screen
- The first load should be faster even on 3G
- The site should work across different browsers
- Page transitions should not feel like they are being blocked on the network
- Each page must have a URL
You can avoid all this hustle to create a PWA by using WordPress Plugins. Following three WordPress plugins will help you out a lot:
Super Progressive Web Apps: It is an open-source plugin for WordPress. It creates high caliber offline pages and is known for its customization. On installation, it provides you with the option for “Add to Home Screen”, which allows you to download the site offline on the home screen of your device.
WordPress Mobile Pack: You can turn your site into a Progressive Mobile App with the help of this plugin. It is compatible with modern browsers and supports the android and IOS. It also offers some in-app purchases to customize your website i.e. changing themes etc.
Progressive WordPress: You don’t need any coding skills to use this plugin. It automatically adds all the PWA functionalities on your website. It can create a framework based on your existing site and moreover, you can do some customization to give your website a more native app like presentation.