DEV Community: Chukwunonso Orjiakor

How to transform a React app built on Webpack to PWA

Chukwunonso Orjiakor — Tue, 12 May 2020 20:01:42 +0000

Early this month, in my spare time I was able to transform one of my Solo React projects into a Progressive Web App (PWA). I accomplished this in less than a day and I will be writing on how I achieved this feat in this article.

First thing first, for some of you that are not familiar with PWA. According to Wikipedia, "A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. Functionality includes working offline, push notifications, and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices".

List of companies that are currently using it for their user-facing apps is endless and it includes big names like Twitter, Instagram, Telegram, AliExpress, FlipBoard just to mention a few.

Pre-requisites

Before forging ahead with this article I expect you to have a working React application that is built on Webpack. Also, it will be a plus if the app is responsive and mobile-friendly, as this will give the users a feel of a native mobile app or desktop app.

Steps

To successfully transform a react app built on webpack into a PWA, we will be creating a manifest file and a service worker that will help us to achieve our aim. Read through the below steps to see how I accomplished it.

Create The Manifest File

According to this article, "The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched".
The manifest file is best put in the public folder where the index.html file can easily access it. Below is a sample of what the manifest file looks like in its simplest form:

{
  "short_name": "Football Update",
  "name": "Live Football Score Update",
  "icons": [
    {
      "src": "../images/favicon.gif",
      "sizes": "64x64",
      "type": "image/gif"
    },
    {
      "src": "../images/football-logo.png",
      "type": "image/png",
      "sizes": "256x256"
    }
  ],
  "start_url": "../",
  "display": "standalone",
  "theme_color": "#27ae60",
  "background_color": "#fff"
}

You can read more on the manifest file and its properties here.

For the manifest file to take effect, ensure you deploy it in the index.html file by adding the below line of code in the <head> tag:

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

Generate The Service Worker

Sandoche ADITTANE in one of his articles titled How PWAs works and how I implemented it with React and Webpack described Service Worker as thus: "A service worker is a script that runs in the background of your browser separated from your website. You can use this script to cache files, send a push notification or do other background tasks like updating your page for example".

This helps to cache files such as logos, favicons, manifest and other resources that make the PWA run smoothly in the browser. You can read more on it from the above link or here or here.

To generate the Service Worker, you will have to add Webpack's Workbox plugin in your webpack.config.js file.

First, install the workbox-webpack-plugin node module by running:

npm install workbox-webpack-plugin --save-dev

Then, in your webpack.config.js, add the following lines of code that starts with a +:

  const path = require('path');
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
+ const WorkboxPlugin = require('workbox-webpack-plugin');
  const Dotenv = require('dotenv-webpack');

  module.exports = {
    ...
    plugins: [
      new Dotenv({
        safe: true,
        systemvars: true
      }),
      new HtmlWebpackPlugin({
 -      title: 'Football Update',
 +      title: 'Football Update WPA',
        template: path.resolve('public/index.html')
      }),
 +    new WorkboxPlugin.GenerateSW({
 +      // these options encourage the ServiceWorkers to get in there fast
 +      // and not allow any straggling "old" SWs to hang around
 +      clientsClaim: true,
 +      skipWaiting: true
 +    }),
      new CopyWebpackPlugin([
        { from: 'public/images', to: 'images' },
 +      { from: 'public/manifest', to: 'manifest' }
      ]),
      new webpack.HotModuleReplacementPlugin()
    ]
  };

With the above addition, you will generate the Service Worker, and also expose the manifest file folder so that it can be accessed by the web browser.

When you run: npm build or yarn build in your project terminal, the Service Worker files should be generated as shown in the image below:

Register Your Service Worker

Once Service Worker has been generated and you have your manifest.json file in the right place, open your index.js file which is the entry point into your app, and add the following codes to register the Service Worker.

  import React from 'react';
  import ReactDom from 'react-dom';

  import App from './App';
  import './assets/styles/index.css';

  ReactDom.render(<App />, document.getElementById('root'));

+ if ('serviceWorker' in navigator) {
+   window.addEventListener('load', () => {
+     navigator.serviceWorker.register('/service-worker.js')
+    .then(registration => {
+       console.log('SW registered: ', registration);
+     }).catch(registrationError => {
+       console.log('SW registration failed: ', registrationError);
+     });
+   });
+ }

At this point, you have successfully created and linked the manifest.json to the index.html for your PWA, and also generated and registered a Service Worker for the background activities on the browser. You can now run your app to see the beauty of a PWA.

Here is a link to the PWA I built in this process: https://footballscores.netlify.app/.
It is an app that keeps football lovers updated with football matches scores, and it's still a work in progress which I add new features to whenever am less busy.
See screenshot of the app on a mobile device below:

When you visit the link on your Android mobile device, it will prompt you to add the PWA icon to your home screen. Also, on your desktop browser (particularly Google Chrome version 70 and above), a plus (+) button appears at the right of the address bar when you visit the link. Click on it to add the icon of the WPA to your desktop like a native application.

Thanks for journeying with me through this article. Your feedback and comments will be highly appreciated. Kindly leave your comments in the comment section.

I Finally Got It Hosted!

Chukwunonso Orjiakor — Sat, 23 Mar 2019 16:27:48 +0000

Wow! I did it. After so much anticipation and some touch of uncertainty, I finally hosted MY FIRST REAL PROJECT for Astromatic Nig. Ltd. And not just that, I am also publishing my first ever personal post on Dev.to on my Birthday Day.

I am a 'Web Developer Convert' who had spent lot of time learning languages like java, and c++, done projects using visual basic 6 during my National Diploma(ND) programme, and have spent some more time doing computer repair, maintenance and upgrade while running my Higher National Diploma(HND) programme. I was hope to go straight to software development without touching web development at all. But all that changed with time, and right now web development is quite unavoidable as the internet and web browsers has taken over from desktop native app, and is still on the rise.

I have always wanted to experiment with something real after my HND project which in a way was the starting point in my career path and very pivotal in my becoming a full stack web developer. Then I started learning HTML/CSS, JavaScript, PHP and MySQL, and it took my about 3months to kick-start the project work. The project was a replicate of a cloud storage platform where users can upload, download and delete their files, and also manage their profiles. The test running and defense of the project I and my team members actually did by hosting the app locally using WAMP and a wireless router which enabled us to test run the app on other devices. Ever since, I have always wanted to continue with the project and have already started by hosting it on 000webhost.com and having the files uploaded on GitHub. You can check it out here: Cloud-Here.com.

After my HND programme, I started playing more with codes and increasing my programming skills and also applying for a junior developer role where I could learn more from experienced developers and understand better the act of software engineering. Sadly am still on the search. Though, along the line came this wonderful opportunity via a friend, and it was about building their company's website.

I was asked to meet with their then BDM who enquired if I had worked on any project before. I made it clear to him that I was a starter, and the only project I had to show was my online profile page. I showed it to him. It was my first and only project as at then that was hosted on a free hosting space courtesy my application for an internship programme at Bincom in which I was asked to develop a single page online profile with my CV content without using any framework. I wasn't called up for the programme, so I took time to work on the profile page to make it better, and I have been using it ever since as my profile page. You can check it out here.

When the BDM saw it, he was pleased and promised to convince the owner of the company. I was convinced within me that I could actually handle the project given how well I have practiced, and when the owner of the company agreed to my proposal I kicked off immediately even without them committing financially, to show them my willingness. I wasn't driven by the money I will make from it, I was majorly hungry for exposure and experience with a real project.

The initial stage of the project was quite stressful and challenging beyond what I had expected from the onset, because after numerous research on how a real project is being done, I was expecting a meeting where I will get to meet the relevant stakeholders to decide what the site should look like, what the contents should be, the design pattern they will prefer, and stuffs like that, but this never happened. I became content developer, front-end developer, back-end developer, SEO engineer, even graphics designer in just one project.
Awesome right?!!! Yeah, it was indeed a great experience and was fun, because it made me researched a lot more than expected. Though, it took me more time to get the project to a hostable state, but it was finally and surely accomplished. You can check the project out here.
Please kindly review it, as your feedbacks and criticisms will be highly welcomed and appreiated.

ABOUT THE PROJECT

The project which I call a web app given the dynamic nature of some part of its contents is a company website for Astromatic Nigeria Limited that tells about the company, what they sell and what they do. It also has a products section/page where their goods are showcased and it's backend for the staffs who will be uploading their products to the e-commerce platform.

I chose not to use any framework or library other than jQuery, and bootstrap (whose usage is very minimal) so as to increase my understanding of how things work together internally and to have a broader knowledge of the actual codes. Even the e-commerce section and it's backend, I had to hard-code in vanilla PHP to build my experience and understanding of the language, and it really paid off.

In the course of the project my HTML/CSS, JavaScript, PHP, MySQL and graphics design skills were brushed up and boosted, also I got to put my software development and project management theoretical knowledge into practice. Working with the Agile methodology, am still adding more features to the project as the need arises.

In all these, the experience gotten has been incredibly great, and I really can't wait to take on more projects. Though, I still wish and desire to work under more experienced developers/engineers who will mentor me and guide my growth, and also get to work more within a team to boost my collaboration skills.

I am highly open to working with any company that has a growth mindset not just for the company alone, but also for its workers. Though, right now I'm freelancing and ready to take on any web project.

Thanks to Dev.to for this wonderful platform to exercise my writing skills, and HAPPY BIRTHDAY TO ME \O/!!!.