In today’s world, you have three seconds for your website to load; otherwise, you risk losing website visitors. But if you have PWA (Progressive Web Apps), you can rest assured that your website will load at the speed you need.
PWA is built to optimize a website by combining a regular website with mobile and desktop applications. It provides fast-loading websites and quality user experiences. PWA is a hybrid application that brings a native app-like user experience to cross-platform web applications, including web browsers and mobile apps for mobile phones or tablets.
The Differences Between Web App, Mobile App, and PWA
PWA Advantages
Fast, Reliable, Engaging
1. Fast
PWA provides efficient applications with the advantage of a responsive user interface like a native app. The application runs seamlessly like a native app with the help of cache and service workers and saves data like a regular website.
2. Reliable
With a service worker, the application always responds quickly, even if the connection is unstable. The data will be cached even with an insufficient connection or offline. The cached data will be loaded instead.
3. Engaging
The natural feel offered by PWA makes it difficult for users to distinguish which native applications are using PWAs. That way, without having to install an application, users can use the application like a native app.
Business Advantages
1. Mobile-First Approach
Based on 2019 Digital Perficient data, 58% of all web users are mobile web device users. The PWA application allows users to choose between application services via a browser or applications like the native applications.
2. Save More Than 75%
There is no need to develop a separate native mobile application. Developers can focus on developing their websites by implementing a PWA on a website.
3. Good for SEO
Since PWA is a website, it can be optimized for SEO.
PWA User Benefits
1. No more low-storage problem
One of the advantages of developing applications using the PWA method is compressing data by 80-90%. In comparison, a native Twitter application with a size of around 100MB can be converted to 1MB in the Twitter Lite (PWA) application.
2. No Network? No Problem
As discussed earlier, when the user is offline, data from the cache will be displayed on the application page. User applications can still be used based on the last data accessed by the user.
3. No Need To Install
The PWA mobile application can be accessed without installing the application. Just open the browser, go to the PWA website and use it as a native app.
PWA Weaknesses
Along with the many advantages that PWA provides, there are a few weaknesses to consider:
1. It Is Underrated
In 2017, Google introduced PWA to the public. PWA might be familiar to developers, but it is still unfamiliar to most people.
2. Does Not Support Previous iOS Versions of Users’ Smartphones
For Apple smartphone users, applications that use the PWA method can only operate for iOS 11.3. However, according to data in January 2019, 75% of iPhone users have migrated to iOS 12. However, that leaves approximately, 15% of iOS 11 users and 5% using previous versions of iOS.
Applications Developed As PWA
1. OLX
Ninety percent of OLX’s visitors use mobile devices, either through applications or browsers. To take advantage of many visitors on the browser, they built a PWA, and their results increased by 250%.
2. Twitter
Almost 80% of Twitter’s traffic comes from mobile devices. By building a PWA, they experienced terrific results, including reducing their bounce rate by 20% and the increased the number of sent tweets by 75%.
3. Trivago
Since using PWAs, the company’s website’s click-through rate has increased by up to 95%.
Building A Simple PWA App Step by Step Using Angular
Let’s assume that you are familiar with Angular.
- Create a new project with the following command. Here I named it pwa-example.
ng new pwa-example2. Go to the project folder, then run the application.
cd pwa-example
ng serve -o3. The browser will open, and by default, the application will run on port 4200.
4. Add the PWA function with the following command:
ng add @angular/pwa5. After the process is complete, several new files will appear, such as ngsw-config.json, src/manifest.webmanifest, and assets/icons.
The ngsw file contains the service worker configuration in a customizable JSON format.
The manifest consists of how the PWA application will look when it’s opened. There is a configuration for the application name and an application icon when it’s installed by the user.
The assets/icons folder contains the default icons, which can be used directly for the PWA.
6. PWA only runs on https and localhost environments. In the example below, we will be using an http-server to run the app locally.
7. Run ng build --prod command. It will create files under dist/pwa-example folder.
8. Navigate to that folder using cd dist/pwa-example.
9. Run http-server command.
10. PWA is running on http://localhost:8080 by default. Open the Chrome developer tools, check the Application tab, and then Service Workers. If you see that the ngsw-worker.js is installed, then you have successfully created a simple PWA app.
Author: I Gede John Arissaputra – Programmer
