Building Progressive Web Apps (PWAs): A Comprehensive Guide on Creating PWAs

In the world of software development, everyone strives for excellence in every way possible, that’s why we see the creation of new programming languages, frameworks, and tools. With this in mind, Progressive Web Apps (PWAs) creation occurred. Progressive web application, or progressive web app, is a type of application software provided through the web, created using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices. PWAs are very important in the current tech landscape because they possess various unique features like; offline accessibility, push notifications, discoverability and compatibility with search engines, responsiveness, accessibility via a direct URL without requiring setup or installation, and built-in security features.
The main purpose of this article is to guide developers on how to build PWAs through an intricate process, highlight the benefits of PWAs, and how PWAs compare to traditional web, and native apps.

Understanding Progressive Web Apps
Having already defined PWAs, you might still wonder what makes an app a PWA. Firstly if the app isn’t built with a specific software application for a specific device platform like IOS or Android, hence the moniker “progressive”. There are key technologies that help a PWA achieve its goals, they include;

• Service workers: This is a script that runs in the background, separately from the web page, to provide the needed features, without requiring a user interaction. It works as a proxy between the web application, the browser, and the network, to optimise the web application’s capabilities in areas like offline capabilities and enabling push notifications.
• Web App Manifest: This is a JSON file that lets a browser know how a Progressive Web App (PWA) should behave when installed on the user's desktop or mobile device. It typically contains the following; the app's name, the icons the app should use, and the URL that should be opened when the app launches.
• HTTPS: Hypertext Transfer Protocol Secure is an extension of the Hypertext Transfer Protocol. It uses encryption for secure communication over a computer network and is widely used on the Internet. This makes sure your user's data is secure. It adds an extra layer of security to your site.

Core Features of PWAs
Before an app is considered a PWA, it must possess these core features;

1. Push Notifications: These are messages that can be sent directly to a user's mobile device or your desktop browser, it appears on the screen, or at the top section of a mobile device or a desktop browser. A push notification is a short message that appears as a pop-up on your desktop browser, mobile home screen or mobile app device notification centre. Push notifications usually consist of a title, a message, an image, and a URL. They can also include logos, emojis, and other elements. PWAs can interact with your app without returning to your website thanks to push notifications, which enable PWAs to function far beyond the browser.
2. Offline Capabilities: PWAs are network-independent, this allows them to work even when users are offline or have an unreliable network connection. This is made possible by using Service Workers and APIs to revisit and cache page requests and responses, thereby making it possible for users to browse content they previously viewed.
3. Responsive Design: PWAs have a responsive design, which means that they can adapt to whatever screen size a user’s mobile device has, and it will work seamlessly.
4. Home Screen Access: PWAS have home screen access, which means that users can access them from their home screen simply through a widget or a shortcut.
5. Search Engine Optimisation: PWAs are very discoverable and compatible with search engines because they adhere to certain global standards and formats that make it easier to catalogue, rank, and surface content in search engines.
6. Built-in Security Capabilities: HTTPS are used in building PWAs, they encrypt data shared between the app and the server. This protocol makes it very challenging for hackers to access sensitive data. PWAs also have more limited permissions, which typically reduces exposure to security threats. Progressive web apps are very much in circular than you think, the most common examples include; Tinder, Pinterest, X (formerly known as Twitter), and Starbucks.

Benefits of Progressive Web Apps
PWAs hold many benefits for users and developers;

1. User Experience Enhancement: PWAs have fast loading times, the app-like interactions are smooth and seamless, and the performance is reliable even on unstable networks. All these enhance the user experience of PWAs.
2. Business Advantages: Using PWAs instead of native applications can give businesses an advantage because, unlike other applications the building, deployment, and maintenance of PWAs is very cost-effective, this can be advantageous for small businesses with limited funds at their disposal. Through key features like push notifications and offline access, PWAs can increase user engagement and retention. With responsive designs, PWAs are compatible across various devices, helping businesses get their product to any user.
3. Technical Advantages: The advantages of PWAs are not only restricted to businesses only, they also offer technical advantages like simplified deployment, updates and version control are easier, and access to modern web APIs.
4. Wider Reach: With the push notifications feature PWAs, businesses can aim their advertising campaigns at their target audience, gain insightful feedback on their products, and strengthen their user retention.
5. Lack of Dependence on the Back-end: PWAs offer developer independence from specific back-end technologies with the provision of platform-agnostic solutions. Due to this flexibility, developers are able to build and deploy easily.

Building a Progressive Web App
Building a PWA involves various steps from the initial setup to optimisation, below is a detailed step-by-step guide;
Initial Setup
Choosing the right tools
Choosing well-suited tools and frameworks is critical in building a good PWA, you will need a code editor, i recommend Visual Studio Code (vs code), and the most common framework/library choices include;

• React: A javascript library for building user interfaces, with a focus on single-page applications.
• Angular: a javascript framework for building mobile and desktop web applications.
• Vue.js: a progressive framework for building user interfaces that can be easily integrated into projects built with other javascript frameworks or libraries. Setting Up the Development Environment Firstly, install Node js and Npm on your local machine from the website(https://nodejs.org/en), and to check if you’ve already installed them use these commands in your terminal;

node -v
npm -v

Secondly, setup the framework or library you intend to use;

• For React, in your terminal run the following commands;

npx create-react-app my-pwa
cd my-pwa

• For Angular;

ng new my-pwa
cd my-pwa

• For Vue.js;

ng new my-pwa
cd my-pwa

For the sake of time, I’ll be working with just React in this guide.

Building the Core Components
Creating the Application Shell
This is the minimal HTML, CSS, and JavaScript needed to power the user interface. For the sake of time, I’ll be working with just React in this guide.
React: in the App.js file located in the “src” folder in your react app, input this;

// src/App.js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My PWA</h1>
      </header>
    </div>
  );
}
export default App;

Implementing the Web Manifest
This is a JSON file that contains the metadata about your application.
Create it with the title; “manifest.json” in the public folder of your react app, and input the following metadata;

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Then link in your index.html file with the following input;

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

Registering Service Workers
As mentioned earlier in this article, Service workers are scripts that run in the background, separate from a web page, to provide needed features like push notifications and background sync. Using the create react app setup includes a service worker setup, so you just import it in the index.js file in your react app;

// src/index.js
import * as serviceWorker from './serviceWorker';

serviceWorker.register();

Then register it.

If ('serviceWorker'in navigator) {
     navigator.serviceWorker.register("/serviceworker.js");
}

Enhance User Experience
We can achieve this by doing these three things;

• First, we implement a responsive design in our CSS code.

• Next, we add offline functionality, service workers can enable this by caching assets and APIs using the “workbox-webpack-plugin” in the service-worker file in our react app with this input;
  

// in service-worker.js
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

• Finally, we enable push notifications by subscribing to them with this input;

// Example with Service Worker
navigator.serviceWorker.ready.then(function(registration) {
  registration.pushManager.subscribe({userVisibleOnly: true}).then(function(subscription) {
    console.log('Subscribed to push notifications:', subscription);
  });
});

Testing and Optimisation
Testing Tools:
For testing you can use the following tool;

• Lighthouse: It is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. You can install it as a Chrome extension in your browser, you can access it in the performance tab of Chrome dev tools. You can use it to test the performance of your PWA.
  Performance Optimization Techniques:
  After testing the performance of your app, you can optimise the needed areas you discovered with the following techniques;

• Code Splitting: This is done by dynamically importing parts of your app to reduce initial load time, like so;
  

// In js
import(/* webpackChunkName: "component" */ './Component').then(Component => {
  // use component
});

• Lazy Loading: By loading components only when they are needed

// In js
const LazyComponent = React.lazy(() => import('./LazyComponent'));

• Optimising Images: You can do this by using modern formats like WebP and responsive images.

//In HTML
<img src="image.webp" alt="example" width="600" height="400">

You can create a solid Progressive Web App with improved performance, offline functionality, and an amazing user experience by following these steps.

Comparing PWAs with Traditional Web Apps, and Native Apps
Even with the presence of PWAs in the tech landscape, there are still people who prefer traditional web apps or native apps, let’s make a comparison to see which one is most suitable.

1. Development Process: PWAs and Traditional web apps are typically built with mostly HTML, CSS, and JavaScript, but traditional web apps are also built with backend technologies like Node.js, Django etc. While Native apps are built with platform-specific languages (e.g. Swift for IOS, Kotlin for Android). PWAs and Native apps are built to have offline capabilities and deep device integration, but Traditional web apps lack that.
2. Maintenance and Updates: PWAs and Traditional web apps are easier to maintain because they have one codebase, unlike Native apps that have separate codebases for different platforms, hence their maintenance is more tedious. With PWAs and Traditional web apps updates are automatically available to users without the delay of app store approval processes, unlike Native apps that require these approvals.
3. Performance and User Experience: PWAs have fast load times due to caching and service workers, they are responsive and work offline, PWAs have native-like features like push notifications and offline, but their access to device-specific features is limited, While Traditional web apps have slower load times because they are dependent on the speed of internet connectivity with very little access to device features. Native apps on the other hand have the fastest load times and performance due to direct access to hardware and optimised code, they are smooth, highly responsive, and have full access to device features, thereby providing a richer and immersive user experience.
4. Distribution and Accessibility: PWAs are distributed via the web, and they can be accessed and installed directly from the browser, without any app store requirements thereby making distribution easier, and they are easy to discover via search engines and shared links. Traditional web apps can be distributed as simple as sharing a URL, and they can be accessed through web browsers without installation, and similar discoverability with PWAs. But Native apps are typically distributed through app stores (e.g. Apple App Store and the Google Playstore), and the require adherence to app store guidelines and approval processes.
5. Cost and Resources: PWAs are very cost-effective because they incur very low development costs due to a single codebase for multiple platforms, and less resource-intensive maintenance. Traditional web apps are similar in cost to PWAs. On the other hand, Native apps incur high development costs due to the need for multiple codebases, and more resources for ongoing maintenance.

These points can help businesses and developers make the right decision on what type is best suited for their needs and goals.

Conclusion
Progressive Web Apps (PWAs) represent a significant growth in the world of web development, combining the best features of both web and native applications. In this article, we have gone through what makes them unique, their many benefits, and how they differ from traditional web and native apps. By providing optimised user experiences, offline capabilities, and seamless performance across various devices and network conditions, PWAs provide an interesting and convincing solution for both developers and businesses. With them, development and maintenance are cost-effective, while increasing user engagement and retention. In comparing PWAs with traditional web and native apps, it is clear that PWAs offer a balance of performance and accessibility. They remove the need for distributing via an app store, making them easily accessible and discoverable via the web, while still delivering a native app-like experience. As the web continues to grow and evolve, the adoption of PWAs is likely to grow, driven by advancements in browser capabilities and the ever growing demand for fast, reliable, and engaging applications. Developers are encouraged to explore PWAs further, leveraging their unique capabilities to create powerful and user-friendly applications. In summary, PWAs are poised to play a crucial role in the future of web development. By embracing and utilising this technology, developers can provide better user experiences and steer business success. I hope this guide has provided valuable information into building PWAs and inspired you to start your journey in PWA development.