Anyone not familiar with PWA or Progressive Web Apps? For those of you who are not familiar with Progressive Web Apps, we will discuss about Progressive Web Apps for websites, how this technology can increase user engagement, its advantages and others.
This technology was first introduced by Frances Berriman and Alex Russel in 2016, by using Service Workers as website performance into mobile devices. This technology has been widely used in websites to make it more practical and modern, the reason this technology has begun to be widely used is because it can be accessed quickly on smartphones.
1. What are Progressive Web Apps (PWA)
Progressive Web Apps or often abbreviated as PWA is a method on the website to allow users to access websites in mobile applications. Progressive Web Apps (PWA) are considered to be an alternative to mobile applications, apart from not requiring large costs, the process of making them is arguably faster than making native mobile applications.
This technology is like a native application on a mobile device, because it has to go through the installation process in general, but what's interesting is that PWAs can work offline and are easy to synchronize. Progressive Web Apps (PWA) use several technologies to work such as Service Workers, APIs or manifests.
If the website that already uses PWA is already installed on the smartphone, the user does not need to bother to open access to the website with a browser, because it is already available on the smartphone home screen. If the user opens the website URL in the browser, it will be immediately redirected to the PWA application that has been installed.
2. Get to know Service Workers
Service Workers are the main components that must be owned by Progressive Web Apps (PWA), Service Workers themselves work in the browser background. According to the explanation from web.dev, Service Worker is the fundamental of PWA itself. When a website uses PWA, it will automatically register into a service worker that has been set up using Javascript, this is to cache assets offline.
Because the main requirement is that it can be used offline, this Service Worker is a must-have component. In addition, several things that Service Workers can do are Push Notifications. Service Workers will work in HTTPS networks, this is needed to provide a sense of security when connected to the network.
The following is an example of registering a Service Worker into the browser:
if("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/service-worker.js").then(
function (registration) {
console.log('Service worker successfully registered.');
},
function (error) {
console.error('Unable to register service worker.', error);
}
);
});
} And here is an example of the service worker javascript syntax:
//service-worker.js
var name = 'cache assets';
var assets = [
'index.html',
'/js/main.js',
'/css/style.css'
]
self.addEventListener('install', e => {
console.log('Service Worker: Successfully installed');
e.waitUntil(
caches.open(name).then(cache => {
console.log('Service Worker: Caching Files Done!');
cache.addAll(assets);
}).then(() => self.skipWaiting())
);
});
self.addEventListener('activate', e => {
console.log('Service Worker: Successfully activate');
});
self.addEventListener('fetch', e => {
console.log('Service Worker: Fetching Cache');
e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
}); The syntax of the code block will tell the browser what assets will be cached when the user visits the website for the first time and activates it so that the offline feature can work, then fetches the assets that will be cached into the browser.
3. Recognize Manifest
The manifest is needed to determine and manage the PWA application that we want, for example determining the theme color, adding a website logo, determining the name of the application, screen orientation and so on. Manifest works with JSON documents that are embedded in a website's HTML document. Examples of application on the website:
<link rel="manifest" href="manifest.json"/> Then the contents of the JSON manifest document will usually look like this:
{
"short_name": "Apps Lite",
"name": "Apps",
"icons": [
{
"src":"assets/logo.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"background_color": "#000000",
"theme_color": "#000000",
"display": "standalone"
}
4. What are the advantages of Progressive Web Apps (PWA)
Some of the benefits that you will feel if the website already uses this technology, including:
1. Fast manufacturing process
To create a PWA, you only create a few components to work with your website, namely applying a shell to HTML, creating a service worker, registering a service worker into the browser and creating a manifest.
This will not require large costs and a fast build process compared to typical native applications.
2. Increase engagement and conversion with users
Several companies have proven that applying this technology can increase engagement with users, because of the convenience provided to users when accessing the website with a smartphone, namely by installing applications through the add to home screen notification when the user first visits the website. PWAs can work with push notifications both online and offline.
In addition, Progressive Web Apps can increase conversions high compared to websites that do not use this technology at all.
3. No need to install via play store
In general, mobile applications must be installed in the play store so that they can be reached by the user. This is very different from Progressive Web Apps, where the owner does not need to submit to the play store for use by the user, popping up an "add to home screen" notification is an easy way to add PWA applications to the user's smartphone.
5. Disadvantages of Progressive Web Apps (PWA)
In addition to the advantages, you also need to know what are the disadvantages of this Progressive Web Apps (PWA).
1. Cannot be found on Play Store
Because this technology works with the browser, it cannot automatically be submitted to the play store. On the other hand, this is advantageous because there is no need to bother submitting applications and making applications natively.
If you look at it from another perspective, PWA cannot adapt to users who prefer to use the Play Store when looking for applications. This can be a new challenge for website owners.
2. Has limited features and cannot be used by the iOS platform
This technology only has limited features compared to other mobile applications. Native mobile apps are much more exploratory than Progressive Web Apps.
In addition, the drawback is that this technology is not fully supported by iOS devices compared to Android devices.
3. A relatively new technology
Progressive Web Apps (PWA) is a relatively young technology (released in 2016). This results in many developers who do not fully understand the mechanism.
Conclusion
Progressive Web Apps (PWA) is a technology that provides an experience for users to use websites using mobile applications through a browser. PWA is another alternative to native mobile applications, which of course requires a lot of time and high costs.
Even though this technology is still relatively new, it is highly recommended to study it because it has begun to be seen that large companies are already using Progressive Web Apps (PWA) technology as a step to increase engagement with users, in this case other companies will need developers who understand this technology to implement it into their own. their application system.
