A Progressive Web App (PWA) is a more dynamic web application that can run as a standalone. It offers benefits such as:
\n\n\nYou can learn more about the differences between native apps and PWAs here.
\n
In this article, you're going to learn how to build a PWA using React. As React is a popular web framework, this article starts by going over the setup, development process, and spinning it up to see how it looks. For this example, you'll create a simple Counter Page that simply adds or subtracts a number based on button controls.
\nBefore you can begin coding, you need to set up your project. Let's start by ensuring you can use React (if you're already familiar with coding in React, you can probably skip this section!). You need to use Node.js with any development using web frameworks such as Angular, React, or Vue -- especially if you wish to use libraries and packages to assist in developing your project.
\nA popular utility in using such packages and libraries is the Node Package Manager, simply referred to as \"npm\". This utility allows you to install/uninstall packages, start your React application build using webpack, and many more other features. For your needs, you can take advantage of npm to create a React application with a PWA template, which allows you to code right away. Whenever you start building a React app, you can use templates offered by Facebook using the 'create-react-app' command with npm.
\nLet's build the PWA starter app by running the following command:
\nnpx create-react-app name-of-our-PWA-app --template cra-template-pwaThe above command can be broken down as follows:
\nHitting 'Enter' after this command should initiate the build of your starter PWA React application. You should see a stream of prompts in your command-line interface. It may take a few minutes, but if you can see this screen after the command, you have created the project.
\nHere, you can see the following folder structure of your application so far. There are a few files that you shall pay attention to when it comes to PWA's:
\nservice-worker.js: This is a script that runs in the background once your application starts running. The service worker makes sure that you can use your React application offline and handle multiple requests for the UI. (learn more here)manifest.json: This is basically a configuration file that lists different properties that you can customize specifically for progressive web applications. It can determine such things as icons, names, and colors to use when the application is displayed.serviceWorkerRegistration.js: This file does the job of telling whether or not your service worker was successfully registered. If you look into the file, you'll notice multiple console logs that will be displayed depending on the status of the service worker once you deploy your application.For your project, you'll build a simple Counter component, similar (if not exactly the same) to the example provided in the React docs: Hooks State
\nLet's start by creating a Counter component. Here, it is named as Counter.jsx and placed in a components folder.
To speed things up, you can copy and paste the following code in your specific files. Here, it is built out as a simple page and some generic stylings for the component.
\n//Counter.jsx\nimport React, { useState } from 'react';\nimport Button from '@mui/material/Button';\n\nfunction Counter(props) {\n let [count, setCount] = useState(0)\n\n function increment() {\n setCount(count + 1);\n }\n\n function decrement() {\n setCount(count - 1);\n }\n\n return(\n <div style={{textAlign: 'center'}}>\n <h3>Counter App</h3>\n <div>\n <Button variant="contained" onClick={increment}>+</Button>\n <span> {count} </span>\n <Button variant="contained" onClick={decrement}>-</Button>\n </div>\n </div>\n );\n};\n\nexport default Counter;Note: Here, Material UI's Button component is used. You don't need to and can substitute the Button component with:
\n<button onClick={increment}>+</button>To use Material UI, run the following npm commands:
\nnpm install @mui/material\nnpm install @emotion/react @emotion/styled //these are additional dependencies for me to get Material UI working with the Counter componentIn your command prompt, entering 'npm start' can spin up your application to a specific http://localhost url. You can start to see what work you've done so far.
With these simple components, let's try to spin this application up and ensure it is working.
\nEnter the command:
\nnpm startThis starts the application at a set http://localhost URL. Once the dev server is working and live on the command prompt, go to the URL to view the application. You should see something similar to this:
Now, it's all good and ready to have the app live and working, but more interested in the PWA aspect.
\nFocus back on the index.js file. Make the following change:
// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://cra.link/PWA\nserviceWorkerRegistration.register(); //change the service worker registration from 'unregistered' to 'registered'Essentially, changing the service worker from unregistered to registered will allow you to utilize the app even when it's offline, a key benefit when it comes to PWAs. Check Google's explanation on this topic for more information: Service Worker Registration
\nWith the PWA files setup, in order to view the difference, you can deploy your application to a static server using the serve package that will serve your application to localhost. In a nutshell, make sure you have the serve package by installing, building the application again, and using serve to deploy the application:
npm install serve\nnpm run build\nserve -s build //if you encounter an error with this command, try 'npx serve -s build'Once you use the serve command, you should see the following message, having your application deployed to http://localhost:5000. It automatically adds the URL to your clipboard as well for quick pasting in your browser.
After registering your service worker from In the section above, you can see If you hit the '+' symbol on the right side of the URL ba,r you can install your PWA, just as done here. Use Workbox Lighthouse for testing the capabilities of your PWA: Lighthouse You've learned about what PWAs are and how to build a PWA with React. If you want to quickly add user registration and authentication to your React PWA, you can use LoginRadius. It eliminates the burden of building and maintaining user authentication from scratch and helps you focus entirely on building your app's core features. At the dawn of \"smartphones\" in late 2007, when Apple released the iPhone, there were native apps. Apple's app framework included a native app SDK that allows developers to take advantage of all the physical device features and topped it off with an app store that allows for distribution and monetization of the finished applications. When Google released Android in competition, they also embraced this approach with their app store and SDK, which also leveraged the entire Google platform and its services. Developers could tap into Google's search and maps services, as well as email, etc. Native applications served their purpose superbly and became the primo factor that propelled Android and iOS as the big two phone operating systems at the time, until the present day. Native smartphone applications were so common that Apple coined the tagline \"There is an app for that\" and copyrighted it in 2009. However, come the 2010s. Web technologies saw increasingly rapid growth. Server-side rendered web pages allow for the creation of full-fledged web applications that could offer business values beyond static information. The responsive design movement also enhances accessibility for these web apps across all platforms. It was also during this time that mobile applications became stagnant. Your phone started to have too many applications, and not all of them were equally useful. Some are thin clients to web services, which you could access using your mobile web browser instead. Recognizing this, Progressive Web Applications, or PWA, came in to bridge the gap between native and web applications. First and foremost, PWAs are web applications. They run in web browsers, but also usually in webviews on smartphones. Compared to traditional websites that you would visit with a conventional web browser, progressive apps tend to be a little more low key. You may see one through a direct URL, but more commonly through a desktop/home screen icon on your phone, which takes you to a webview hosting the application. By extension, PWAs are now also distributed through app stores, standing alongside native apps. The webview itself may also be without or with minimal menu bars to provide an impression close to navigating a native application. Furthermore, progressive applications usually come with some offline viewing capabilities, allowing you to interact with the app even when you are offline or in limited network availability. This is implemented using service workers that stand in between network requests and the user and handle caching as well as push notifications, providing a user experience similar to native app caching. With that in mind, the idea behind PWA is to create applications that would be most accessible, through the web, that also offers an experience as close to native applications as possible. Suppose you are a new company looking to create a mobile application for your product. If you would like to distribute your app on all major mobile platforms - namely both iOS and Android - you would then have to go through the development and distribution process for both. First off, you will need to learn the language to develop Android applications (Java, Kotlin) and then iOS (Objective-C, Swift), have the correct hardware to test and develop. This process will have you relearn everything about one platform on the other. Once you finish the initial product, you will have to maintain both codebases moving forward to complete this. With a progressive app, the process becomes a lot simpler. Your application lives within a browser, and hence only needs to be supported by the browser standards. As of now, support for PWAs is available across major browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Firefox (for Android). Your language is the language of the web: JavaScript. The choice is also yours to leverage the JavaScript platform you are most familiar with, be it React, Angular, or something completely different. The JavaScript codebase will then become the only codebase you need to maintain for the app. Alongside this, you also gain the advantage in the availability of the application. With PWA, your app will be available on the web, accessible by users across many platforms, including all mobile devices that have browser support. PWAs live on the web; this means you do not need to download and store many executables and assets on your device, saving you precious storage space if you are using the app on your phone. This is especially useful when the native version of the application is simply a portal to a web service, which serves to make API calls and present data based on the user data on the server only, without performing any device-specific actions. The functionality of these applications is not inhibited by the browser's sandbox and thus make for perfect PWA candidates. PWAs are designed to be responsive. Even though this depends largely on the individual developer of the application, a well designed and developed PWA should, in theory, provide a consistent experience across devices. With native apps, a lot of effort will be required to ensure that the user experience is uniform across multiple platforms. And even then, certain platforms will impose their own set of requirements on the UI look-and-feel, as well as the functionality of the app. Progressive apps are a creative solution to smooth out the differences between a native app and the web, but not necessarily replace native apps. While it inherits all the advantages and features of the web, there are still certain disadvantages that need to be considered when deciding between a progressive app or a traditional native app. For one thing, progressive apps are designed to be uniform across devices. This means it is not the technology's focus to make use of specialized features that are available only on select devices. Its feature set will be the lowest common denominator of the range of devices that it supports. With how diverse the feature sets are on modern devices like smartphones and tablets, with high-resolution cameras or fingerprint sensors, to name a few, it would be amiss for applications not to take advantage of these features. It follows that progressive apps are not ideal for specialized workflows, while their strength is in general purpose applications. Compatibility is another big-ticket item. At a baseline level, PWA should be supported by all major browsers. However, platform differences still exist, where specific features are supported by one browser but not another, which will cause inconsistencies in behavior when the user switches from one device/platform to another. A prominent example of this being push notification support on iOS, which requires jumping through some hoops to make it work, as Apple does not support this directly. With that in mind, the subtle differences between browser support become a limitation similar to the difference between native app platforms itself. For applications to reach the hands of the users, it needs a distribution platform. For native applications, the answer to this is straightforward: Apps are distributed through the native app store, be it Google Play Store or iOS App Store. However, for PWAs, it is more complicated. Distribution can be as simplistic as passing around the application's URL, and anyone who knows the link can access the app. This method has the added advantage due to Google and other search engines/web crawlers naturally picking up the app URL and returning it as a search result. However, this method is passive and requires the user to know the application beforehand. Developers might prefer the more traditional way of having the app listed in an app store, which is possible but requires them to jump through the same hoops as native applications, following all of the distributor guidelines, which removes its advantage compared to traditional apps. So with everything considered, should you go the route of the progressive app? We do not aim to give a concrete answer, but instead a suggestion: If your application can be made a PWA, it is a good idea to do so. At the current moment, progressive apps are an evolution of web apps. Compared to the feature set that users are already familiar with in native apps, progressive apps still trail behind. This means that if the scope of the application is complex enough, PWA may not provide you with enough tools to do the job. With that said, if your application can be fully implemented with the set of tools that PWA provides, then going this route may net you added benefits that are unique to progressive apps. Are progressive apps the future? It definitely has the potential, but a large part of that answer depends on whether we can leverage its platform to build productive solutions with it today. Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic steps first on how Progressive Web App works with vanilla js. Also, we’ll cover the concept of PWAS without using any of the frameworks, it's just a plain A Progressive Web app is an application which is built on top of HTML, JS and CSS with some extra features like Various big companies are moving towards the progressive web app instead of native apps, as it gives some much flexibility to end-users. In some websites you can find the + icon at the right side of the address bar, those are progressive web apps. We will be using Once you fill up those details your final output of the After that, we need to install the So finally our application is ready to serve in localhost. Now let's add some Create a directory for the app and add js, css, and images subdirectories. It should look like this when you’re finished: You will understand the use of When writing the code for Progressive Web Application we need to keep in mind two requirements For this app, to handle the first requirement we will add the static text in the Html page and for the second requirement, we will use the viewport. So let's add this code inside the Next, we need to create a file Once you add the code save all the files and run the script As we can see our application is running in the browser, let test it using the LightHouse Extension in Google Chrome browser. For the best result, I recommend testing in an incognito tab of google chrome. As you can see we have green signals for both of our above requirement: But still, there is lots of work to do, so let's start with the first feature of PWA's. Let's create a new file called Now update the We should also declare the theme colour which should match with your manifest.json file as Once you run the lighthouse test again you can see we got green signals in some points like So let's add the And the index.html will head can will look like You can also verify the After running the test again, we can see all the The next requirement of our app will be the service worker. The service worker is a script that runs in the background without any user interaction. The task of service worker will be to download and cache our content and then serve it when the user is offline. To understand more on service workers you can check this doc from mozilla. To integrate service workers we need to create a file called Note: Service worker will only have the access to the files of the current and sub-directories hence we need to place it in the root of our project The first 2 variables Note: Here I have used the Finally, we will load our service worker, for that create And add this script in the So the final version of our Now our application is made as fully PWA supported, you can verify it by running the lighthouse test. We are done with the code, now the last thing remaining in to host it in any of the You can get the full source code of this example in this Github repo I hope you enjoyed the progressive web apps using vanilla js tutorial and found it useful. Please let me know what you think in the comments below.index.js, you should be able to see it running in the Application tab. Inside that tab, on the left side you should see a Service Workers section. From here, you can see for http://localhost:5000. You have a Service Worker from your service-worker.js file and is activated/running.Manifest -- opening that should show you the relevant details you listed from your manifest.json files.Conclusion
\nWhat are Progressive Web Apps (PWAs)?
\nWhy Progressive App?
\nEase of development and distribution
\nPortability
\nUser Experience
\nSo, why not Progressive App?
\nLeveraging device-specific features
\nBrowser compatibility
\nDistribution
\nTo PWA, or not to PWA
\nvanillaJS.What are Progressive Web Apps?
\nservice worker and manifest.json file. These extra features will give the ability to run the web application offline.Setup your base app for PWA
\nnpm to start our project, so firstly create a root folder using this command mkdir first-pwa-app or another name of your choice then go to that directory by using this command cd first-pwa-app. Run npm init
\nnpm init\n\npackage name: (first-pwa-app)\nversion: (1.0.0)\ndescription: This is the first PWA example\nentry point: (index.js): index.html\ntest command:\ngit repository:\nkeywords:\nauthor: Mohammed Modi\nlicense: (ISC)package.json file will be below
\n{\n "name": "first-pwa-app",\n "version": "1.0.0",\n "description": "This is the first PWA example",\n "main": "index.html",\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1"\n },\n "author": "Mohammed Modi",\n "license": "ISC"\n}serve dependency to serve the application in localhost so install it using npm npm i serve --save. And then add a script in the package.json file.
\n{\n ...\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "serve": "serve ."\n },\n ...\n}html and cssSetting up the Javascript
\n
\n/first-pwa-app # Project Folder\n /css # Stylesheets\n /js # Javascript\n /images # Image files.\n package.json\n package-lock.json\n index.html\n manifest.json\n sw.jsmanifest.json and sw.js files once we move ahead in this tutorial.Add Some code for app interface
\n\n
\nindex.html file.
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>My First PWA</title>\n <link rel="stylesheet" href="css/style.css" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">My First PWA!</h1>\n </div>\n </body>\n</html>css/style.css and paste this code inside this
\nbody {\n font-family: sans-serif;\n}\n\n/* Make content area fill the entire browser window */\n/* Make content area fill the entire browser window */\nhtml,\n.fullscreen {\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n/* Center the content in the browser window */\n.container {\n margin: auto;\n}\n\n.title {\n font-size: 3rem;\n}npm run serve which will start your application in http://localhost:5000/Testing the App
\n\n
\nAdding a Web App Manifest
\nmanifest.json in the root of our application. To understand more about the manifest file check out [this doc]
\n{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}index.html head tag by adding the manifest.json file as a link
\n<head>\n ...\n <link rel="manifest" href="/manifest.json" />\n ...\n</head>meta tag.
\n<head>\n ...\n <meta name="theme-color" content="white" />\n ...\n</head>\n
\npwa-icon-256.png and pwa-icon-256.png for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.png in the root of the project.icons attribute after the short-name
\n{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "icons": [\n {\n "src": ".images/pwa-icon-256.png",\n "sizes": "256x256",\n "type": "image/png"\n },\n {\n "src": ".images/pwa-icon-512.png",\n "sizes": "512x512",\n "type": "image/png"\n }\n ],\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}
\n<head>\n ...\n <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n ...\n</head>manifest.json file by opening Chrome DevTools, in the Application Tab, the first tab in the sidebar manifestmanifest.json related issues are solved, The remaining issues can be resolved by adding the service worker.Adding Service Worker
\nsw.js in the root of our project.\n
\n
\nlet cacheName = "my-first-pwa";\nlet filesToCache = ["/", "/index.html", "/css/style.css", "/js/main.js"];\n\n/* Start the service worker and cache all of the app's content */\nself.addEventListener("install", (e) => {\n e.waitUntil(\n caches.open(cacheName).then(function (cache) {\n return cache.addAll(filesToCache);\n })\n );\n});\n\n/* Serve cached content when offline */\nself.addEventListener("fetch", (e) => {\n e.respondWith(\n caches.match(e.request).then((response) => {\n return response || fetch(e.request);\n })\n );\n});cacheName and filesToCache are used to create an offline cache in the browser. cacheName is used to create a cache of specific name and filesToCache will be the list of files that we need to cache, / will store the root files that is index.html even if the user does not specify the file name in the URL and then all other files specified in the array.\n
\nfilesToCache array as a list of static files just to demonstrate the purpose of PWA, it will stop working in production if even one file fails to load.js/main.js file and copy the below code.
\nwindow.onload = () => {\n "use strict";\n\n if ("serviceWorker" in navigator) {\n navigator.serviceWorker.register("./sw.js");\n }\n};index.html file.
\n...\n<script src="js/main.js"></script>index.html file will look like:
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>Hello World</title>\n <link rel="apple-touch-icon" href="images/pwa-icon-256.png" />\n <link rel="stylesheet" href="css/style.css" />\n <link rel="manifest" href="/manifest.json" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <meta name="theme-color" content="white" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">Hello World!</h1>\n </div>\n <script src="js/main.js"></script>\n </body>\n</html>Finishing Up
\nhttps domain. As the PWA will be required to run in the secure domain.