Several developers are now involved in improving website performance by using responsive web design.
In April 2015, Google announced "Mobilegeddon" which is a new system from Google to prioritize responsive websites on google search engine results on mobile devices.
February 2016, the AMP (Accelerated Mobile Pages) feature is also coming to google search engine results on mobile devices, AMP is optimized for mobile web browsing and is intended to help web pages load faster.
Starting in 2021, the PWA feature begins to support many browsers, such as: Google Chrome, Apple Safari, Firefox for Android, Microsoft Edge, and others.
This shows that web technology is constantly evolving. And on this occasion, we will get acquainted with PWA (Progressive Web Apps).
Have you ever seen the "Add to Home Screen" banner? when opening the website?
When clicking on the banner, the app gets installed in the background, and now the website turns into an app.
When opening the application, it will visually feel the same as opening the website through a browser, but now opening it without going through a browser.
That's a quick look at PWAs, but that's not all on the bright side, let's dive a little deeper.
What is a PWA?
A PWA is basically just a website, built using HTML, CSS, JavaScript, and WebAssembly, which generally can run across platforms as long as you have a browser, such as: Windows, Linux, Android, ChromeOS, macOS, iOS.
Maybe when you hear the word "website" in your mind it definitely has to be "online", right?
Here PWA will change our perspective, which is actually a website that doesn't have to be online, and can be accessed offline.
How come?
This is a new web technology called PWA (Progressive Web Apps) that can provide an experience like any other application.
Why use PWA?
Let's take a simple example, if I ask you to open YouTube on your smartphone, do you prefer to open YouTube in the native app or in the browser?
I'm guessing you might prefer to use a native app over a browser.
And the fact is that most users open native apps more often than browsers because of the ease of accessing them.
The presence of this PWA is a smart solution in this case, because PWA is like a combination of a website and a native application.
It's also very easy to use, you don't need to download and install the application first, just access it via a browser as usual, so it will save more on your storage.
And if needed, you can install it to look like a normal application.
As a user
This will make it easier to access your website with the availability of an application icon on the main screen.
As a developer
This will be very helpful in the process of creating and developing applications.
You don't need to create separate programs for Windows, Linux, Android, ChromeOS, macOS, or iOS platforms.
Just create a website and add PWA features and you'll get everything.
As a businessman
This will save you a lot of money and time, because you don't have to work with multiple developers to create apps on different platforms.
The difference between Website, Native App, Website + PWA?
To make it easier to understand, here's a comparison between the three:
Websites
1. Works on all platforms
2. Online mandatory
3. Automatic updates
4. Limited features
5. Low development costs
Native Apps
1. Only runs certain platforms
2. Can be offline
3. Manual updates
4. Very complete features
5. Expensive development costs
Website + PWA
1. Works on all platforms
2. Can be offline
3. Automatic updates
4. More complete features than the usual Web App
5. Low development costs
Characteristics of PWA
After getting to know PWAs, here are the characteristics of PWAs that you need to know:
Progressive
As the name implies, P-W-A, Progressive Web Apps. PWAs are progressive, which means they can be easily accessed by all users.
It doesn't matter what device the user is using, from Android? can, from iOS? can, from Windows? Linux? macOS? ChromeOS? all can.
And, from any browser you can, this is because PWA is basically a website with additional features, so any features on the website can also be done by PWA.
Responsive
PWA is certainly responsive, can appear well on any device and any screen size. Both from mobile, tablet, desktop can work as they should.
Not depending on internet connection
With the help of Service Workers, PWA can store or cache some resources or assets to work offline.
This can improve loading times by serving a static view instead of fetching directly from the server, or even loading the whole thing offline is also possible.
Auto update
Almost similar to the characteristics of websites in general, but in a different way.
Service Workers have the Background Synchronization API feature, by utilizing this feature, the PWA application can update itself automatically if the device is connected to the internet network to retrieve the latest resources or assets from the server.
Installation
If the website has a PWA feature, a popup notification will appear offering to install the application when opening the website.
So that you no longer depend on the Apps Store to download and install applications.
Feels like an app
PWA is designed to behave like a native application in general, such as interaction style, navigation, launcher icon on the home screen, has a splash screen, works offline, even push notifications.
Linkables
PWAs can be easily shared by others without the hassle of downloading and installing apps from the Apps Store.
Just share the url of the website, then other people can directly use it through the browser.
Easy to find
And most importantly, PWA can be found in search engines, no more trouble finding your PWA application.
This is because PWA is a website, so we can take advantage of SEO to appear at the top of search engines.
PWA component
To build a PWA website, at least have the following 3 components so that it can run properly.
Service Workers
Service Workers are Javascript APIs that act as proxy servers between websites, browsers, and networks.
With this, the website can be used offline, receive push notifications, and update in the background even when the website is not currently open.
The website can also be loaded faster because it will fetch the website assets in the stored cache, the cache is stored when opening the PWA web for the first time.
Manifest files
The manifest file is a JSON file that contains configuration and application information, such as application name, description, theme color, UI appearance, application icon, and others.
HTTPS
PWA requires a secure HTTPS protocol, Service Workers use to intercept network requests and can modify responses, all done on the client side.
How PWAs work
Let's take an example of a native application, when we download and install it, important assets such as UI elements and some other data will be stored on the device.
Therefore, native applications can run without an internet network.
Meanwhile, PWA uses the same approach, when we open the PWA website for the first time, several assets such as HTML, CSS, JS files, images, and others will be stored in cache.
Service Workers will handle network calls so there is no need to fetch repeated assets on the server, and fetch assets in the stored cache.
Therefore, PWA applications can also run without an internet network.
A case study of a web using PWA
JD.ID
JD.ID is an e-commerce platform that has operated in more than 350 cities in Indonesia, providing various products such as smartphones, laptops, clothing, accessories, household appliances, sports products, and so on.
Users of the JD.ID website often have an internet network problem that tends to be unstable in Indonesia. Not only that, users who have visited the JD.ID website also do not download the available iOS/Android applications, even though the native JD.ID application offers a better user experience.
Looking at this problem, the JD.ID team uses PWA best practices to help build a better UX website like a native application, in addition to increasing engagement and solving slow internet network problems for users.
The PWA caching strategy they use is as follows :
- Network first, cache later
This strategy is used by them to get a response from the network first, after the response is received it will be forwarded to the browser and stored in cache.
If a network request fails due to bad network for example, it will use the last cache stored.
This is what they use on the JD.ID home page which can even be accessed offline, at least once before.
- Cache first, network later
This strategy is used by them to always use the previously stored cache.
If there is no cache stored, it just uses the network to get a response, displayed to the browser, and stored in the cache.
This is their use for static resources that don't need to be fetched repeatedly like offline pages, css files, js, images, and more.
This saves network requests and speeds up page loading.
- Network only
This strategy is used by them to always use the network, this is used by them on cart and payment pages that require high data accuracy and are impossible to do offline.
Clipchamp
Clipchamp is an online video editor that has been used by more than 12 million users around the world, you don't need special skills to become a video editor at Clipchamp because it's easy to use
Clipchamp offers a simple solution for creating videos, starting with users who find it frustrating to edit videos because the editing software is so complex.
Therefore, Clipchamp makes an online video editor that is easy to use and doesn't need to be installed, just access it via a browser and it's ready to use.
But in building Clipchamp there is a problem, video file processing is usually up to Gigabyte scale, uploading media files that big takes a long time and gives a bad experience for users.
For that reason and considering network bandwidth, Clipchamp ruled out cloud-based solutions, and instead switched to a completely in-browser solution using PWA where all video processing is done locally.
How surprised, user engagement in installing this Clipchamp PWA application increased by 97% within 5 months since the launch of the Clipchamp PWA application.
Pinterest is a visual (photo or image) search engine for finding ideas like food recipes, home decor, style inspiration, and more.
From the analysis of Pinterest users who went through the website, they realized the slow Pinterest web access experience and only succeeded in converting 1% of users who registered, logged in, or installed native applications.
More than 3 months, Pinterest is trying to rebuild their website using PWA with React, Redux and Webpack.
Their web re-development gave a drastic improvement especially on performance issues.
Previously Pinterest's web took 23 seconds to become fully interactive, with their new website it now only takes 5.9 seconds, and on repeat visits it only takes 3.9 seconds.
This is thanks to Service Worker caching of JavaScript, CSS, static assets, and a few other tweaks.
Advantages of PWAs
The following are the advantages of using PWA websites.
Market reach
The website is very good in reaching the market that can be accessed anywhere and on any platform.
However, sometimes websites become a problem for users with bad internet connection, and PWA is the best solution to solve this problem.
Smaller and faster
Native apps usually require a lot of device storage, more apps make the device slower.
This is not a problem on high end devices, but it will be frustrating for users on low end devices due to full storage.
This web-based PWA can overcome this problem, users do not require to install first, but can be accessed directly through the browser.
That way, it doesn't require a lot of storage and can be accessed more quickly because there's no need to download and install.
Offline capability
PWA applications are able to work on poor internet connections, even without an internet connection.
What's more, the PWA application will continue to function even if the server itself is down, so users can still access it.
Doesn't depend on the App Store
In order for native apps to be viewed and downloaded by users, native apps must be published on the Apps Store, unfortunately not all apps can be published on the Apps Store due to strict rules.
Even if you want to update a native app in the Apps Store, there will still be a review process that can take days, so you can't update the app as soon as possible.
Unlike a website, you are free to publish your website on the internet, there are no restrictions on this.
And if you update your website, users also get the latest content in real-time.
Push Notifications
One of the selling points for native applications is the push notifications feature.
Push notifications allow users to interact with the app easily and quickly. Amazingly PWA also provides this feature.
Disadvantages of PWAs
Although PWA has provided great features as I mentioned above, PWA still cannot compete with native applications in terms of device features such as fingerprints and others, so it cannot maximize all the existing features.
How to create a PWA website
To start building a PWA website is not as difficult as you think, here I share 2 guidelines that you can follow.
For a quick start, you can follow this guide to building a simple PWA website.
To learn how to build a more complex PWA website, you can follow the official Google guide below.
Can it be implemented in blogger?
Yes, of course you can.
You can follow the guide above to build a PWA blog on blogger, but there are some adjustments to make for it to work properly.
If you don't want to bother, you can use the Theme62 blogger template.
What is Theme62?
Theme62 is the best blogger template provider website with features inspired by WordPress, has support for many plugins and easy template configuration without touching any code.
The Theme62 blogger template features a Progressive Web Apps (PWA) plugin, so you can easily apply PWA on your blog in one click.
Closing
The ever-evolving web technology has helped us in dealing with various problems.
One of them is PWA which helps us build a website like an application, solve the problem of a slow internet network, save costs and time in the development process, and many others.
Hopefully this article is useful, and see you again in the next article.
Best regards,
Theme62.
Reference :
- https://en.wikipedia.org/wiki/Mobilegeddon
- https://en.wikipedia.org/wiki/Accelerated_Mobile_Pages
- https://en.wikipedia.org/wiki/Progressive_web_app
- https://developer.mozilla.org/en-US/docs/Web/API/Background_Synchronization_API
- https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
- https://developer.mozilla.org/en-US/docs/Web/Manifest
- https://www.geeksforgeeks.org/progressive-web-apps-benefits-components-and-how-it-works
- https://www.dewaweb.com/blog/progressive-web-apps
- https://web.dev/jdid
- https://web.dev/clipchamp
- https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
- https://avengering.com/en/why-use-the-pwa-what-are-advantages-and-disadvantagesof-pwa-part-2