How to create a React Progressive web app?

Several users prefer using mobile applications in this era. Mobile applications are becoming the great way to circulate content, mobile stores for devices set out their rules to improve visibility and ranking. However, browsers are getting advanced to the extent where web applications are accessing the APIs and performance enhancements, which further open up the door to a new generation of applications.

Overview – Progressive Web Apps

Progressive Web Apps are the ones that generally blur out the line between native and mobile applications. By benefitting from the Internet API, they can be accessed without any internet network.

Browsers are progressing into the application platforms from the last decade. It gives access to geolocation, push notifications, came and so on as per the ongoing discussion about the things that make the web application a progressive one.

Requirements for a PWA

To know the plan, it is best to have a look at the checklist as shared:

• HTTPS Connection: This thing should be served via an encrypted connection.
• Responsiveness: The application specifically focuses on showing the content as intended apart from the device’s specification.
• Self-updating: PWA refreshes both the application shell and the content without the need for the user to act further.
• Service Worker: A JavaScript file focused on updating in the background area generally acts as an asynchronous HTTP proxy. Service workers prefer working on the encrypted connections that bring out the final requirement.
• Web Manifest: With JSON file’s assistance, it specifies the author, version, app name, installation icon, and other things.

Setting up the things

At the initial phase, you have to run rpm install –save-dev SW-precache-webpack- plugin. This package uses SW-precache to create a service worker. If you think, you will lose out of control, no need to worry. You can easily use the import Scripts option to add whatever logic you want.

You can use the local forage to store out the information received from API calls. This small library specifically focuses on the Indexed DB file and WebSQL. Thus, once you install the sw-precache-webpack-plugin, the next is time to customize the Laravel project.

1. Updated Laravel Mix

You will need to copy the webpack config file and place it in the project directory’s root. You can find this in: node_modules/laravel-mix/setup/webpack.config.js.

After that, it is required to update the package.json to point to the new location. Else, no change will affect. So, it is up to you to decide which build step is needed to include. You will find that the design, display, and production scenarios are now set to a location:

--config=node_modules/laravel-mix/setup/webpack.config.js.
Change that to look like this:
--config=webpack.config.js.
Diving into webpack.config.js

At the top of the file, you will find all the packages to import. More sw-precache plugins here. It further looks like:

let path = require('path');
let glob = require('glob');
let webpack = require('webpack');
let Mix = require('laravel-mix').config;
let webpackPlugins = require('laravel-mix').plugins;
let dotenv = require('dotenv');
let SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

The sw-precache package is documented so well, which doesn’t let you have a depth look. Let us have a quick list of several options as shared above.

• staticFileGlobs: A file that you want to Cache.
• DynamicUrlToDependencies: Keep in mind to match the paths to the absolute paths of the files.
• Runtime caching: It let you catch the 3rd party libraries.
• Import Scripts: It comes with custom logic to the specific service worker.

This is it. During the compilation of assets, the file service-worker.js starts to show in the public folder.

2. The manifest file

This file also fits perfectly in the public folder via manifest.json. The file will further give complete control over the application’s behaviour. You can further read here. To get a quick overview below is the example.

 {
 "short_name": "Shots",
  "name": "Shots App",
  "background_color": "#2196F3",
  "orientation": "portrait",
  "icons": [
    {
      "src": "icons/icon-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "icons/icon-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icons/icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": "/?launcher=true",
  "display": "standalone"
}

• short_name: The name that is displayed on the mobile device Home Screen.
• Name: The name that is displayed in the install banner and popup settings.
• background_color: The colour that is displayed right before the launch of the application.
• Orientation: It fixes out the orientation that is used the orientation.
• start_url: the default page loads out during the launch of the application.  
• Display: both the ‘browser’ and the ‘standalone’ where the browser adds the address bar.
• Icons: These are the images for the icon of the app displayed on the home screen. It is suitable for several screen sizes.

These are some available options.

3. Check for PWA support.

Several things are followed when defining the layout. First, it covers several things like:

if ('serviceWorker' in navigator && 'PushManager' in window) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}

The snippet will further check out the push notifications and service worker. In case it is accurate, it will load out the service worker file.

Done

So, these steps are needed to get the Progressive Web Application behaviour. The rest is up to you to tweak and customize as needed. The documentation is needed that provides the important details as needed.

Conclusion

This is indeed the ideal way to start and analyse the PWA to function with Laravel. Thus, if you face any issue, you can directly get in touch or ask in the comment section.