How to Make a Progressive Web App: Tutorial

According to DataReportal, the number of Internet users globally has exceeded $4.5 billion. And mobile devices account for more than half of the traffic. However, despite the large supply, conventional applications are losing market share. Giants such as AliExpress, Twitter, Nikkei, Lancôme, and Forbes are actively investing in progressive web app development. Today, the most optimal solution for most users is mobile sites that are not inferior in page loading speed to mobile apps. If you want to maximize your user audience reach, check out the progressive web app tutorial from Deventor. You will learn what PWA technology can do and how to build a site with limitless possibilities with its help.

What is a Progressive Web App?

In simple words, a progressive web application is a website turned into an application. This is a browser application with additional functions: offline performance, support for push notifications, a convenient user-friendly interface, a response speed that is not lower than that native application has, etc. With all this, PWAs are cheaper and easier to develop and maintain, but their biggest plus is the cross-platform nature. They also don’t need to be published in the app markets (Google Play Store and App Store), since they work directly from the browser and can look like full-fledged applications without an address bar in the browser.

Why Choose Progressive Web Apps

According to a study, on average, the application loses about 20% of users for each step between the first contact of the user with the application and the user starting to utilize the app. At first, a user has to find an app in an app store, then download it and install it. The final step is to open the app. When your progressive web app is found by the user, he or she will be able to start using it immediately. A thing is that all the needless installation and downloading stages in PWAs are excluded. When the users will get back to the app, they will be offered to install the app and update it to a full-screen experience.

Nevertheless, using a native app isn’t so bad. An important point to admit is that mobile apps that have push notifications provide three times more retention in comparison to their analogs without the push. It is more likely for users to reopen a mobile application than a website. Moreover, a mobile app that is well-designed consumes less data and works much faster as some resources are contained on the device.

Progressive web applications benefit from having the characteristics of mobile apps and as a result, it leads to increased performance and excludes difficulties connected with mobile application maintenance.

Benefits of Using Progressive Web Apps

PWAs are based on standard web technologies with the addition of Javascript functionality. Using this combination, you can create ultra-fast web pages. They also bridge the gap between responsive web pages and mobile apps. Technology enhances the capabilities of web pages. PWAs can be easily saved on desktops, iOS, and Android devices.

Progressive web app development is built on a tremendous ecosystem of tools and frameworks for the Web that Android or iOS developers can only dream of. Surely, this is not a single reason why developers love PWA apps. The process of support and deployment is also much simpler. PWA app is fast to create and offers just one version of the application that must be maintained.

Key benefits of PWA:

1. Low data usage. PWAs are more “lightweight” because they only use a fraction of the data. They don’t require a significant amount of memory and this results best performance on a mobile device.
2. No updates are required. Native apps require manual updating or constant Wi-Fi connection for automated updates. PWA requires neither background updates before launch, nor Play Store approvals.
3. Low costs. PWAs are as functional as mobile apps, but they can be developed at a much lower cost. Thus, it is the best option for achieving great ROI. Convincing a user to install an app is more difficult than inviting them to a website.
4. Great SEO integration. Not only because of the low volume of data but also because of storage and costs. PWAs load and index quickly, which provides a great user experience. Implementing a PWA can help boost an existing online marketing plan.
5. Much more URL possibilities. You can share links directly on the site, which cannot be done in mobile applications.
6. Strong business results. Low data usage and fast downloads ensure a hassle-free experience. Conversion rates can be increased significantly. Ultimately, the business becomes more successful and profitable when users spend more time and money on its dedicated solution.

A progressive web app offers extensive functionality at no expense of hardware resources. Modern websites need this to provide an interface that matches the native user experience.

Source: quora.com

What Technologies Can be Used for Development?

PWAs have forever changed the way we think about websites. Thanks to progressive web app frameworks like Ruby on Rails, Angular5, VueJS, and React, web development is no longer that difficult. To create PWAs, the same tools are used for websites – HTML5, CSS, JavaScript. This technological stack allows you to build a cross-platform application, which eliminates the need to develop multiple applications for each separate platform. On top of that, you can use custom plugins and modules, and also add HTML, JavaScript, and styles to templates (such as ASP.NET Core, Blazor, and WebAssembly).

Popular PWA Examples

More and more companies are considering using PWAs to capitalize on them. This is especially true for startups and small businesses that don’t have their application yet but need to improve the way they interact with customers. Chrome and Firefox are recognized as the best mobile browsers for unleashing the potential of PWAs, but Safari in iOS 11.3 is just as good. And here are some of the most renowned PWA examples:

• The first progressive web app example is Twitter, which has launched mobile.twitter.com as a PWA created with React and Node.js;
• The other PWA example is Alibaba, Forbes, The Weather Channel, MakeMyTrip, and many more.

The list can be endless, and you are guaranteed to be surprised to find out how many services that we all use daily are progressive web applications. Pinterest has recently announced the launch of a lightweight version of Pinterest Lite to improve user experience in low bandwidth regions. The new PWA delivers significant storage space savings and faster loading times.

How to Make a Progressive Web App?

It doesn’t take long to build a PWA. You can use the progressive web app builder – a handy tool for building PWAs from Microsoft. It will allow you to create a basic web application and extend it to PWA by adding three requirements: HTTPS (you can purchase an SSL certificate from your domain registrar and then configure it through a hosting service), a web application manifest, and a Service Worker.

Setting up and configuring Service Worker

SW is a JavaScript file that mediates between a web application and the network. It provides offline support, advanced caching, background tasks, and is, therefore, a key part of the project. SW is set up in two stages:

1. Creation of a link in the site’s code;
2. Creation of a Service Worker file.

The browser needs to be notified that the Service Worker is there and ready to go. To do this, a simple piece of code is injected into the page template.

if (navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else {
  navigator.serviceWorker.register('sw.js', {
    scope: './'
  }).then(function(reg) {
    console.log('Service worker has been registered for scope:'+ reg.scope);
  });
}

Source: shterkel.com

And this tree of code should be added to a separate file:

self.addEventListener('install', function(event) {
  var indexPage = new Request('index.html');
  event.waitUntil(
    fetch(indexPage).then(function(response) {
      return caches.open('pwabuilder-offline').then(function(cache) {
        console.log('[PWA Builder] Cached index page during Install'+ response.url);
        return cache.put(indexPage, response);
      });
  }));
});
self.addEventListener('fetch', function(event) {
  var updateCache = function(request){
    return caches.open('pwabuilder-offline').then(function (cache) {
      return fetch(request).then(function (response) {
        console.log('[PWA Builder] add page to offline'+response.url)
        return cache.put(request, response);
      });
    });
  };
  event.waitUntil(updateCache(event.request));
  event.respondWith(
    fetch(event.request).catch(function(error) {
      console.log( '[PWA Builder] Network request Failed. Serving content from cache: ' + error );
      return caches.open('pwabuilder-offline').then(function (cache) {
        return cache.match(event.request).then(function (matching) {
          var report =  !matching || matching.status == 404?Promise.reject('no-match'): matching;
          return report
        });
      });
    })
  );
})

Source: shterkel.com

There are several options available in the PWAbuilder tool. When deciding how to create a PWA exactly, choose the best one for you. For java scripts, it is wise to minify.

Adding push notifications

SW allows sending push notifications through the Web Push API. If you are launching an app from scratch, Google Firebase Service comes with Firebase Cloud Messaging. The code below shows how to register to receive push notifications.

navigator.serviceWorker.ready.then(function(registration) {
  if (!registration.pushManager) {
    alert('No push notifications support.');
    return false;
  }
  //To subscribe `push notification` from push manager
  registration.pushManager.subscribe({
  userVisibleOnly: true //Always show notification when received
  })
  .then(function (subscription) {
  console.log('Subscribed.');
  })
  .catch(function (error) {
  console.log('Subscription error: ', error);
  });
})

Source: creativebloq.com

Configuring PWA manifest

For your PWA to be installed, you need to include manifest.json in your application root directory. This is a description of your application, which includes icons, splash screen, name. Here you can set the display configuration when starting from the home screen: address bar, status bar color, and so on. Please note that the correct manifest.json must include the full range of icon sizes for different devices. Here’s an example:

{
 "name": "Progressive Selfies",
 "short_name": "PWA Selfies",
 "icons": [
   {
     "src": "/src/images/icons/app-icon-192x192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "/src/images/icons/app-icon-512x512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
  ],
 "start_url": "/index.html",
 "scope": ".",
 "display": "standalone",
 "background_color": "#fff",
 "theme_color": "#3f51b5"
}

Source: dzone.com

Bug fixing and testing

Building a PWA, all app iterations need to be tested not only at the end but also in the process. You can use Google Lighthouse for this. Its data will tell you about the presence of errors and ways to fix them.

Source: shterkel.com 

If you did everything according to our brief web app tutorial, congratulations! Now you have your own PWA!

Conclusion

PWA is a fully integrated solution that offers a lot for businesses. It requires no base or setup fees, and its reliability, fast downloads, and offline capability improve user experience and increase conversions. Thus, we can safely say that by being aware of how to develop a PWA, you own a good recipe for the profitability of your business. However, this PWA tutorial requires an experiential approach. And if you are just at the beginning of the journey, but already want to use the full potential of advanced technology, contact us. Our team has experience in creating PWAs for multiple industries and is ready to offer innovative solutions to increase the profitability of your business.