BLOG

The Best Way to Create a Progressive Web App (PWA) Using Ruby on Rails (ROR)

sprintale-blog

Web Development

By Mayank Jain
Published: Oct 29, 2024


With the digitalization of today’s world, organizations can no longer ignore the need to interact more with their mobile users and the PWAs have emerged to fill this gap tremendously. They deliver both the web and mobile app experiences to the user. They are fast to load and even perform offline and can be installed on the homescreen without the app store’s interference. In this article, we will discuss the reason why Ruby on Rails (ROR) is the best framework for developing PWAs and how to build one.

Why Ruby on Rails for Developing a PWA?

When it comes to building web applications, it’s no surprise that Ruby on Rails (ROR) is very popular given its agility and ease of use. Let’s see how it is suitable for PWAs:

1. Readymade Libraries and Gems: Rails offers plenty of readymade solutions (often called gems) that enable you to implement features required for a PWA, such as service workers and caching.

2. Smooth Idioms: As per Ruby on Rails principles, configurations may not be required because the framework works on making certain assumptions, which eases the entire development process and eliminating the additional configurations.

3. Managing APIs with Minimum Effort: Most of the time, PWAs use APIs in the background, and it is quite an effortless task to develop and use such APIs in Rails.


What Must Be Included in a PWA? 

Before getting deep in it, a brief overview of the features of a Progressive Web App is needed:

Service Workers: These are background JavaScript or scripts that perform cache management and make an app accessible without data connection.

Manifest File: A JSON file that has the app title, logos, color schemes, and its position on the home screen.

HTTPS: PWAs need to run in a secure environment, meaning no eavesdropping of information exchanged.

Responsive Design: A PWA should not only be functional but also visually appealing on every device, be it a mobile phone, a tablet, or a computer.


Creating a Progressive Web App in Ruby on Rails in seven easy steps.


Stage 1: Gather the Required Tools for Your Rails Project.
Let’s begin by building a new Rails application or let’s work on an already existing project.

rails new your_pwa_app
Before we integrate PWA functions, let us run the rails application to see that everything is okay.

Stage 2: Generate the Manifest File
A manifest file can be said to acts like “a PWA impersonation card”. This is more of less a ‘quick facts’ regarding the app, its titles, primary color, icons and more. In Rails, this file goes into the public folder.

Make a directory public/manifest.json and create a file manifest.json in it with this code:

{
  "name": "Your PWA App",
  "short_name": "PWAApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
Link the manifest file in your app’s layout file (app/views/layouts/application.html.erb):

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">

Step 3: Set Up Icons for the App
The manifest file needs icons to display on users’ home screens. You can design icons yourself or use an online tool like Real Favicon Generator. Save these icons in a folder named icons inside the public folder.

Step 4: Set Up Service Workers
Service workers are code written in the JavaScript programming language and used for caching, offline work, and other purposes. In order to configure them in Rails, open a new file service-worker.js and create it inside the public folder.

Below is a default sample of a service-worker.js file:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('your-app-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/offline.html',
        '/stylesheets/application.css',
        '/javascripts/application.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
This snippet would enable the application to work in the absence of an internet connection as the specified files would be stored.

Then go ahead and add the following code in application.js to register the service worker within your Rails application:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

Step 5: Spare Page For Going Offline
Prepare an additional custom offline page called (offline.html) that will also be inserted into the public folder. This page will be shown to etapp users when trying to open the application and there is no internet connection.

Extend the cache list of your service worker by including this page so that it will be accessible even when offline.

Step 6: Ensure HTTPS
HTTPS is a requirement for the installation of PWAs. In the deployment process, please take note that every application is deployed using the HTTPS protocol. If you are deploying on Heroku, it is very straightforward. For development purposes running from localhost, tunnels should be created using ngrok.

Step 7: Validate Your Implementation As an Advanced Level PWA.
When you are finished arranging everything, go ahead and check the implementation of yours on various devices. Consider using the Lighthouse tool in Chrome DevTools in order to perform a PWA audit on your application with respect to performance and other aspects.

Real-Life Input Of PWAs

Let’s take some illustrations of PWAs usage in practice:

Flipkart Lite: Flipkart has a progressive web application (PWA) called Flipkart Lite that is more functional for users having slow data connectivity. This expanded the user base for Flipkart to the rural areas enhanced even further the shopping experience bringing about a 70% increase in conversions.

Twitter Lite: Like Flipkart, Twitter Lite is a PWA that breaks boundaries of connectivity. Since its release sixty-six engagements-three session pages self-reported for each user and seventy-one tweets per user was improved by the usage of the product.

Uber: The PWA of Uber is not more than 50 KB in size and due to this, it is said to be able load within three seconds on a 2G network. This has helped Uber attain its users even in the most remote places where the internet is slow or limited.

Benefits of Using Rails to Build a PWA

There are many benefits of building a PWA with Rails:

1. Rapid Prototyping: one of the defining characteristics of Rails is that it allows one to do quick rapid prototyping which enables one to start use PWA in few hours very easily.

2. Good Backend System: one of the most appropriate backends designed for data and APIs management is provided by Rails.

3. SEO Optimized: In addition, when using Rails, it is possible to use server-side rendering which increases SEO, therefore, more people are able to read and search your PWA.

Developing a PWA with Ruby on Rails is almost like hitting two birds with one stone whereby, high performance, application-like environments can be created without the struggles of going native. How fast and reliable rails can help you develop a PWA that will enhance user retention even for the areas that have poor internet connectivity. If the aim is to provide a mobile first experience that will have more users reached then PWAs with Rails is definitely an option worth exploring.

By implementing these actions, it is possible to design and deploy a PWA which is consistent in its user experience, encouraging device use for the content. The use of PWAs is on the rise, and for businesses looking to increase their penetration in the market, these are quite effective at providing good experiences without heavy development requirements.

Contact Us

Want to know us closer?

Let's unfold a new chapter of growth together.

sprintale

sprintale

sprintale

Contact

© 2023 Sprintale Technologies Pvt. Ltd. All Rights Reserved.