PWA vs Electron - Which Architecture Wins?

When building a cross-platform web application, the choice of technology used can make or break the success of your project. Two popular architectures for building cross-platform applications are Progressive Web Apps (PWAs) and Electron.

While PWAs and Electron share a similar technology stack, they’re used for different purposes. PWAs are web applications that operate in a browser, meaning they don’t need to be installed. Electron, on the other hand is a framework for building desktop applications using web technologies. Electron applications are installed on your desktop and can interface with parts of your machine that a PWA can’t.

Both technologies have their strengths it can be difficult to determine which one is best suited for a particular project, especially if you're unsure whether a web or desktop application is the best approach.

In this article, we will take a deep dive into the world of PWAs and Electron and compare the two technologies in terms of their key features, advantages, and disadvantages. The goal here is to give you an insight into which technology is more suited for your next cross-platform project.

What is PWA?

A Progressive Web App (PWA) is a web standard that uses the latest web technologies to offer a native-like experience on desktop and mobile devices. The concept is backed by Google and was designed to help businesses increase conversion rates and improve customer experience. Today, the concept has been implemented by some popular companies in building cross platform apps such as Twitter Lite, Pinterest, Tinder, Spotify, and Trivago.

At its core, a PWA is essentially a website-like application built with HTML, CSS, and JavaScript. It can be indexed by search engines, making it accessible and discoverable. But unlike standard websites, it works offline and can be installed in a user’s device to offer a native user experience, such as sending push notifications.

How Do PWAs Work?

The key to PWAs functionality is the use of service workers. They are background scripts that run in the browser and allow PWAs to work offline by using the cache API to store assets and data locally, enabling PWAs to work offline. They can also intercept network requests, serve responses from the cache when there is no network connection, and update the cache as new data becomes available.

The best way to understand the concept of a service worker is to think of them as a proxy between the web app and the network, controlling how network requests are handled.

In addition to offline functionality, service workers enable other PWA features, such as push notifications and background syncing. The service worker listens for push events, which are sent by a server, and can display notifications to users even when the web app is not in the foreground.

To implement a service worker in a PWA, you need to write the service worker code and register it in the main JavaScript file of the web app. Here’s how to do it:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/sw.js').then(function(registration) {
        console.log('Service Worker registered:', registration.scope);
      }, function(err) {
        console.log('Service Worker registration failed:', err);
      });
    });
  }

Here's an example of a service worker that logs all requested URLs in the console and leverages the browser's Cache Storage to cache all responses that haven't been previously cached:

  // Register an event listener for the 'fetch' event on the service worker
self.addEventListener('fetch', function(event) {
 
    // Log the URL of the requested resource to the console
    console.log('URL requested: ', event.request.url);
  
  
    // Use the 'respondWith' method to handle the fetch event
    event.respondWith(
      // Open the cache named 'my-cache'
      caches.open('my-cache').then(function(cache) {
        // Try to find a match for the requested resource in the cache
        return cache.match(event.request).then(function(response) {
          // If a match is found in the cache
          if (response) {
            // Log that the response was retrieved from the cache
            console.log('Response retrieved from cache: ', event.request.url);
            // Return the cached response
            return response;
          } else {
            // If no match is found in the cache, fetch the resource from the network
            return fetch(event.request).then(function(networkResponse) {
              // Add the network response to the cache
              cache.put(event.request, networkResponse.clone());
              // Log that the response was added to the cache
              console.log('Response added to cache: ', event.request.url);
              // Return the network response
              return networkResponse;
            });
          }
        });
      })
    );
  });

Advantages of PWAs for businesses

Some of the key benefits of PWAs for businesses include:

Short-time to market

Developing and deploying a PWA can be done much faster than traditional native apps, making them an attractive option for businesses that need to get their product to market quickly. This is because PWAs can be developed using the same web technologies that are used for traditional web apps, reducing the need for separate development for iOS and Android platforms.

Affordable to build

PWAs are usually less expensive to develop and maintain compared to native apps. This is because PWAs are built using web technologies and can run on a browser, eliminating the need for separate development for different operating systems. Additionally, PWAs can be updated instantly without going through the app store approval process, reducing the time and effort needed to maintain the app.

Improved SEO

PWAs are more easily discoverable by search engines than traditional web apps because they are built using standard web technologies, making it easier for search engines to crawl and index them. This leads to improved search engine rankings and increased web traffic, making it easier for businesses to reach their target audience through the web.

Improved Customer Experience and Engagement

PWAs provide a more seamless and engaging experience for users compared to traditional web apps. With features like offline functionality, push notifications, and fast loading times, PWAs are designed to keep users engaged and coming back for more. Additionally, PWAs can be installed on the home screen of a user's device, making them feel more like a native app than a traditional web app.

High Performance

PWAs are designed to be fast and responsive, providing a smooth and satisfying experience for users. They minimize data usage, minimize loading times, and optimize performance even on low-end devices. This is made possible through the use of Service Workers, which run in the background, allowing PWAs to cache assets and improve performance even when the network is slow or unavailable.

Disadvantages of PWAs

PWAs aren't perfect. They're a great mid-way solution but have some downsides:

Limited adoption

PWAs are still a relatively new technology, and adoption among users and businesses is limited. This can make it more difficult for businesses to find developers who are familiar with PWAs, or to find users who are looking for PWAs. Additionally, some users may still prefer native apps over PWAs, which can limit the reach and impact of PWAs.

Compatibility issues

PWAs rely on modern browser technologies, and not all browsers support these technologies equally. This can result in compatibility issues, with some users being unable to access the full functionality of the PWA on their device. This can limit the reach of the PWA and reduce its effectiveness as a solution.

No push notifications on iOS - Wait!

It's finally happened. Apple has delivered push notifications to iOS in 16.4. They're still a little janky, but this is a great step forward.

We've had the lack of push notifications in iOS as a disadvantage in this article for the past six months, but it's time to strike it off the list.

What is Electron?

Electron is a popular framework for building cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. It provides a runtime environment for executing these technologies in a desktop environment and offers a comprehensive set of APIs for accessing native operating system functionalities such as system notifications, and file system access.

How does Electron work?

Electron operates on the principle of creating a web view, which acts as a container for your application's web pages. It then runs a Chromium browser instance within this web view, providing you with a fully functional web browser environment. This means that Electron applications have the full capabilities of a browser and can access web APIs, execute JavaScript, and render HTML and CSS, just like a web page in a browser window.

The main process in Electron is responsible for creating the web view and running the Chromium browser instance. It also provides the main window for your application and handles interactions between the user and your application.

In addition to the main process, Electron supports creating additional renderer processes, which run your application's web pages. These renderer processes run in separate threads and can interact with the main process through inter-process communication (IPC).

The IPC is implemented using a simple message-passing mechanism. The main process and renderer processes can send messages to one another using the ipcRenderer and ipcMain modules, respectively.

Here's an example of using IPC in Electron:

// Main Process
const { ipcMain } = require('electron');


ipcMain.on('message-from-render-process', (event, arg) => {
  console.log(arg);  // prints "ping"


  // send a reply message to the render process
  event.reply('message-from-main-process', 'pong');
});


// Render Process
const { ipcRenderer } = require('electron');


// send a message to the main process
ipcRenderer.send('message-from-render-process', 'ping');


// listen for messages from the main process
ipcRenderer.on('message-from-main-process', (event, arg) => {
  console.log(arg);  // prints "pong"
});

In this example, the renderer sends an asynchronous message ‘ping’ to the main process using the ipcRenderer.send method. The main process listens for this message using the ipcMain.on method and logs the message to the console. The main process sends a reply "pong" to the renderer process using the event.reply method. The renderer process listens for this reply using the ipcRenderer.on method and logs the reply to the console.

Let's look into the advantages of Electron

Advantages of Electron for businesses

Cross-platform development

Electron allows developers to create cross-platform applications that run seamlessly on multiple platforms such as Windows, Mac, and Linux, making it a cost-effective solution for businesses that want to reach a wide audience.

Strong community support

Electron has a large and active open-source community that continuously works towards improving the framework. This community support enables businesses to easily find solutions to any challenges they face during the development process.

Robust development environment

Electron provides a comprehensive development environment, including a complete set of APIs and a powerful renderer engine. This makes it easier for businesses to develop feature-rich applications with a high level of performance and stability.

Access to a wide range of libraries

Electron enables developers to utilize a wide range of libraries and frameworks, making it easier for businesses to add the features and functionality they need to their applications.

Reusable codebase

The codebase developed using Electron can be reused across multiple platforms, reducing development time and effort and enabling businesses to focus on delivering the best possible user experience.

Integration with existing technologies

Electron enables seamless integration with existing technologies and platforms, making it easier for businesses to leverage their existing infrastructure and tools.

PWA vs Electron: Comparison

The only way to work out if PWA or Electron is the right choice for your project is to think through your requirements and see which technology ticks more boxes.

Below is a comparison between PWA and Electron based on four criteria:

Performance

Does your application need to be lightning quick? Will you lose user interest or engagement if your applications becomes even slightly lagged? Or are a big proportion of your intended audience operating on slow networks (i.e. 3G)? Then PWA is probably the right choice.

PWAs have the edge over Electron in terms of performance. This is partly because much of the JavaScript overhead is transferred to the service workers, which run in the background and do not require a main UI thread. This means that PWAs can provide fast and smooth user experiences, even with limited network connectivity or on low-end devices.

Since PWAs rely on the browser to handle much of the heavy lifting, they can take advantage of browser optimizations and are less resource-intensive than Electron apps. As a result, PWAs often load faster and consume less memory, leading to better overall performance and a more seamless user experience.

Security

If your application handles highly sensitive data (i.e. financial or medical transactions), then PWA probably gets the nod of approval.

In terms of security, PWAs are "relatively" secure, as they rely on browser-based security features, such as Same-Origin Policy and Content Security Policy, to prevent cross-site scripting attacks and other security vulnerabilities.

Applications built with Electron can be more vulnerable to security threats, such as zero-day exploits since they run on a platform independent of the underlying operating system.

Mobile friendly

Will your application need to be available to users on mobile devices and tablets? Then, once again, PWA is going to be the right choice.

Ideally, you want your app to be accessible to your potential customers on multiple platforms - desktop and mobile devices. PWAs have the upper hand here since they work on all devices, including desktops, tablets, and smartphones.

Desktop friendly

On the flip side to the last requirement, does your application have a specific use case where it needs to operate as an installable desktop program? If the answer is yes, then Electron is a perfect choice.

Good examples of this use case are Slack, Microsoft Teams and VS Code. There are times when using these applications in the browser makes sense, like when the user is jumping between machines. But most of the time, having a dedicated desktop application is going to allow for a more immersive and user friendly experience.

Updates and integrations

As for updates and integrations, PWAs can be updated seamlessly, delivering changes directly to users' devices. Electron applications, on the other hand, require manual installation of updates, and their integration with existing technologies and platforms can be more complex.

By now, it's evident PWAs are the winner in most of the categories. However, it's worth noting that it depends with your project goals.

PWA vs Electron use cases

PWAs are a good fit for businesses that need to offer their customers a fast and accessible experience without requiring them to install an app. PWAs are designed to work offline, have fast loading times, and are accessible through a browser, making them ideal for content-based websites and web apps that require low-level hardware access.

Electron is an excellent option for businesses that need to build desktop applications with a native look and feel. Electron provides access to native operating system APIs, allowing developers to build high-performance desktop applications with the same technologies they use for web development. Electron is also a good choice for businesses that need to integrate their apps with the native desktop environment, such as file systems and system notifications.

Frequently asked questions

Q: Which is better for businesses, PWAs or Electron?

The choice between PWAs and Electron depends on the specific requirements and goals of the business. PWAs are well-suited for businesses that prioritize a quick time to market, affordability, and high performance, while Electron is a better fit for businesses that require a full-fledged native desktop application.

Q: What are the best tools for developing PWAs and Electron apps?

PWAs can be developed using standard web development tools such as HTML, CSS, and JavaScript. Some popular frameworks and libraries for building PWAs include React, Angular, and Vue.js.

Electron apps, on the other hand, require knowledge of Node.js and JavaScript to develop. Some popular tools for building Electron apps include Visual Studio Code, Atom, and Electron Forge.

Q: Can I convert my existing web app into a Progressive Web App or Electron App?

You can convert your existing web app into a Progressive Web App (PWA) or an Electron App. Converting to a PWA involves updating your app to meet PWA standards and utilizing service workers to add offline functionality and improve performance. Converting to an Electron App involves wrapping your web app in an Electron shell to give it the functionality of a native desktop app. This process involves using Node.js and Chromium to create a standalone app.

Key Takeaway

Progressive Web Apps and Electron are two powerful technologies that have their own unique strengths and limitations. PWAs offer a fast, affordable, and secure solution for businesses looking to improve customer experience and engagement.

At the same time, Electron provides the best solution for businesses that need to create native-like desktop applications. The choice between the two ultimately depends on the specific needs of your business, so it is important to consider the trade-offs between PWAs and Electron. With the right technology and implementation, businesses can leverage the benefits of both to create powerful, engaging, and user-friendly applications that drive growth and success.