Why Use Progressive Web Apps
This is achieved by utilizing the latest growing native device supported features and services from modern web browsers.
Progressive:
(adjective)
1. favoring or advocating progress, making progress toward better conditions, going forward or onward.
As the collection of native device features from modern web browsers continue to grow, web applications should also be able to support them. If web apps are not progressive, they could cease to exist and be just a fad.
Overall, PWA is a fairly new concept and has increasing traction within the development community. The community has been growing for the past two years, and it continues at a steady pace.
Large businesses are also jumping in on the band wagon and adopting PWA. For example, Twitter, the social networking platform with over 328 million monthly active users, and AliExpress, a large worldwide e-commerce service have released a Progressive Web App. Give Twitter Lite a try to see one of the live examples!
Benefits
What is fascinating to the developers and appealing to the end users are the three primary benefits.
- Reliability
PWA provides developers a granular control over the application’s process in which provides a more reliable app. For example, when the connection is unstable, requests can be postponed until the network becomes stable.
- Speed
Developers are given the necessary mechanisms to cache content and resources so that launching an app is as fast as a native app. Specifically, the app can be launched with the cached content while offline.
- User Engagement
As modern browsers support more native device features, developers can create engaging apps. A small simple intriguing notification is all that is necessary to start user engagement.
Browser Supported Features
So what are some of the other features that modern web browsers can bring to the table other than background sync and push messaging? I will point out a few that I feel are very useful, since the list is large.
- Offline Mode
- Home Screen Installation
- Inter-App Communication
- Bluetooth
- NFC
- Proximity Sensors
- Camera & Microphone
- Location & Positioning
One important thing to note is that features are dependent on the version of the browser and up-to-date status of the user. You can test what supported features are available on your device’s browser by going to What Web Can Do Today. This website also provides you a list of all available features and even examples on how to use them.
For example, to get your battery status is as simple as writing the following in JavaScript:
navigator.getBattery().then( function(BatteryManager){ console.log('Current Batter Level: ', BatteryManager.level); });
How to Start
First, we need to create the required files for PWA. Second, we need to declare the manifest metadata into your web app index.html.
Before we go any further, let’s review what each file is in detail.
Manifest
The manifest file, written in JSON format and is used to identify some of the basic application details. Some of the properties defined in this file are the application short and long name, description, background color, icons, display mode, display orientation, and much more.
{
"name": "Vue.js",
"short_name": "Vue",
"description": "The Progressive JavaScript Framework",
"lang": "en-US",
"dir": "ltr",
"scope": "./",
"start_url": "./menu",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#4fc08d",
"icons": [{
"src": "/images/icons/android-icon-48x48.png",
"sizes": "96x96",
"type": "image/png",
"density": "1.0"
}],
"prefer_related_applications": true,
"related_applications": [{
"platform": "web"
}]
}
From being discovered, identified, installed, and right down to the actual execution of the app, you will see that all the information declared in the manifest are used throughout the app’s life cycle.
If you are testing out the latest Android 8.0 (O), when accesses a Progressive Web App’s deployed URL, the discoverability banner will display at the bottom of the browser asking, if you would like to “Add to Home screen”. During the adding process, you can change the display name and can choose the location where the app is placed.
One thing to point out is that on Android 8.0, the app’s icon is placed inside a white bubble with a Chrome icon in the lower right. Hopefully, Google will change it back to what was in Android 7.0 as the Chrome icon might confuse users into thinking that the app requires internet.
If you are using stock Android 7 (Nougat), the discoverability banner may not appear at bottom of the browser. Alternatively, you can select the option “Add to Home screen” from the options menu in the top right corner of the browser.
The splash screen displayed below is created by using the background color, application name, and icon.
You might have noticed in the above screenshot that the address bar is not visible. You have the ability to declare how the app uses the devices canvas space by declaring the display property.
Without going into too many details on every available property, you can see the power and flexibility in the configurations.
To read up more on each property of the manifest file, I would recommend taking a look at the documentation at Google Developers and Mozilla Developer Network (MDN)
Service Worker
The service worker, written in JavaScript, is the acting proxy between your web app and the network. Its primary purpose is to intercept requests between your app and remote service.
With the developers being in-control of the responses, the app’s reliability can be improved and controlled at the earliest stage of the app’s lifecycle. A great example is by preloading the app with existing content that had already been fetched and stored in the cache. At the same time, new content is fetched from a backend, RESTful service layer or third-party and later used. How this can make an app reliable is best noticeable when users face issues around limited or no internet connectivity. Loading cache content mitigates the issue and allows users to continue using the app without any downtime.
The cache loading feature provides users with the feeling of speed. When launching the web app from the home screen, users expect the application to start very quickly so they can start doing what they need to do. If fetching content was the initial requirement, then the app’s load time could be tremendously slow, depending on the internet connectivity. Loading from cache allows users to engage with the app right away and will create positive responses between the user and the application. These positive responses can increase engagement of a user within an app.
Eventually, when a good internet connection is established, new content can be retrieved and injected into the app. The app’s reliability and speed are naturally desired by a user.
Now that we know what the power of the service worker can do, how do we use it? The services worker must first be registered to the clients’ device. For the registration to be successful and for it to work properly, it must be deployed to and running over HTTPS. This provides an extra security measure and ensures that fetched content is reliable.
A couple of important things to note about service workers are as follows.
- It is event-driven
- It has no access directly to the DOM.
- It runs on a separate thread from the application itself which allows it to continue to operate in the background when the application itself is closed.
This is what gives your app the ability for background synchronization, push notification/messaging, and even trigging base on user defined timings.
For more information on how to configure your service worker, take a look at Google Developer and Mozilla Developer Network.
PWA Alternative Comparison
So far, we’ve talked a lot about Progressive Web Apps, but why Progressive Web Apps?
To answer this question, we should take a look at the alternatives. Keep in mind that each solution has their own advantages and disadvantages:
- Native Apps
Being native, applications are expected to have the ability to access more device features, believed to outperform in speed, and easy to be discovered from the app market. The downsides are, native apps must be written in the platform specific language, developers must manage multiple code bases to support multiple platforms, and must download the updates depending on the type of changes.
- Web Apps
Web apps are a bit different from the other options. This type of application can not be installed on the device, requires an internet connection, lacks device feature support (Push Notification, NFC, etc.), and offers very low engaging capabilities. Its main advantage is that it uses web languages such as JavaScript, HTML, and CSS. This means the application can be ported to all platforms and only requires one code base.
- Hybrid Apps (Cordova/PhoneGap)
Hybrid apps are in-between native and web apps. In fact, it takes the best features of native and web apps. Hybrid apps still use web languages to be cross-platform compatible and have access to native devices features with plugins. Performance-wise, PWA and hybrid apps offer similar results since both runs in a native WebView. The disadvantages are, the development stack is a little more complex than plain web apps since it requires plugins for device feature access. Most of the necessary plugins exist but, since some may not exist or are outdated, it might require native language developers to create.
Conclusion
At the end of the day, the users’ experience and engagement are what matters the most for apps to survive and grow. If the user’s experience is anything but positive, it is likely that the user will uninstall, leave bad reviews about their experience, or even not recommend the application.
As browsers become more powerful, more capable, and packed with more native device features, users’ engagement is bound to increase. For example, with background sync support, the user can work in other application while your app is updating its cached content for later use. Additionally, with access to push messaging, the user can receive messages about updates or even intriguing information that draws the user back into your app. The best part is that push messaging can even use the device’s built-in notification bar. When using these feature that a modern browser provides, it gives a more robust and familiar experience to the user.
Suggest:
☞ Ecommerce Furniture App UI Design - Flutter UI - Speed Code
☞ Build a full stack application with Node-RED
☞ What To Learn To Become a Python Backend Developer
☞ 40+ Online Tools & Resources For Web Developers & Designers
☞ Build a NOTES APP with Vue JS and Nhost using GraphQL & Tailwind CSS