DEV Community

Cover image for How and Why to Create a Progressive Web App
Simon Pfeiffer for Codesphere Inc.

Posted on

15 5

How and Why to Create a Progressive Web App

It’s no secret that the future of the web is mobile. As such, delivering a seamless user experience for mobile users has become a necessity for almost every software endeavor.

That being said, creating and maintaining separate mobile applications is not a feasible solution for every dev team. Progressive Web Apps(PWAs) aim to solve this issue by enabling modern web applications to provide an app-like responsive user experience directly through the browser. All these are facilitated without having to create a separate mobile application.

Progressive Web Apps can also offer offline experiences and can be installed as a desktop or mobile application in any supported operating system.


The Components of a PWA

Ultimately, a PWA is just a regular website with some additional enhancements. There are two specific components required to create a Progressive Web App as the following.

1. App Manifest

The app manifest is a simple JSON file that contains information about your web app and is queried by the browser. Manifest is used to inform the browser about things like how to display the app, the device orientation, icons to use, and links to the service worker to facilitate functionality like the installation option.

2. What is a Service Worker?

A service worker is a script that runs in the background separately from your web application. This service worker cannot change any DOM elements. Its sole purpose is to handle background tasks like handling network requests, managing the cache for offline functionality, and sending push notifications.


Creating our PWA

First, we need a website to act as the base for our PWA. The following code block creates a single-page website configuration required to facilitate a PWA.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Responsive Design -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple PWA Hello World</title>
<!-- Meta Tags for Progressive Web App -->
<meta name="apple-mobile-web-app-status-bar" content="#aa7700">
<meta name="theme-color" content="black">
<!-- Link to the Manifest File -->
<link rel="manifest" href="manifest.json">
<!-- Styling -->
<style>
h1 {text-align: center; color: rgb(9, 0, 128);}
p {text-align: center; font-family: sans-serif;}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>
This is a Progressive Web Application
</p>
<!-- Link to the Service Worker -->
<script src="app.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Next, we will create the app manifest file to inform the browser about the application.

{
"name":"Simple PWA Hello World",
"short_name":"PWAHello",
"start_url":"index.html",
"display":"standalone",
"background_color":"#5900b3",
"theme_color":"black",
"scope": ".",
"description":"PWA Basics",
"orientation": "portrait-primary",
"icons":[
{
"src":"images/h-icon.png",
"sizes":"256x256",
"type":"image/png"
}
]
}
view raw manifest.json hosted with ❤ by GitHub

After that, we can test if the manifest is properly identified by serving the files through a web server. Navigate to the Application section in the Developer Tools, where you will see the application details defined in the manifest file. Ignore the installability warning there as we have not created the worker yet.

Image description

Note that PWA only supports HTTPS websites or applications. Therefore, your server needs to be configured with a valid certificate before creating a PWA.
Now we’ll create a file to act as the service worker.

var staticCacheName = "hello-pwa";
self.addEventListener("install", function (e) {
e.waitUntil(
caches.open(staticCacheName).then(function (cache) {
return cache.addAll(["/"]);
})
);
});
self.addEventListener("fetch", function (event) {
console.log(event.request.url);
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
})
);
});

This file needs to be linked to your HTML file. Earlier, we created a link to a file called app.js. Create a file with the same name and add the following code to link the serviceworker.js with our website.

// Window Load Event
window.addEventListener('load', () => {
registerWorker();
});
// Register Worker Function
async function registerWorker() {
if ('serviceWorker' in navigator) {
try {
await navigator
.serviceWorker
.register('serviceworker.js');
}
catch (e) {
console.log('service worker not registered');
}
}
}
view raw app.js hosted with ❤ by GitHub

Next, verify if the service worker is correctly configured by visiting the website and again navigating to the Application section of the Developer Tools. This time there will be no warning indicating a missing service worker. Additionally, you will see an install icon for your application in the browser address bar.

Image description

If you click on the install icon, you will be prompted to install the application.

Image description

After installing the application, it will create a desktop icon and get added to your program's menu. You can directly access the application using this icon or programs menu without visiting the website.

Image description

There you have it! We’ve just built our own PWA that you can use on desktop, mobile, and the web.


Conclusion

Using progressive Web Apps is a simple way to provide a near-native mobile or desktop user experience. Since PWAs can be created from any type of application, developers can build universal web-based apps easily and even facilitate offline experiences without the need for platform-specific software.

Ready to deploy your website, but don’t want the bottlenecks? At Codesphere, we’re building the most intuitive cloud provider on the market! Give it a try and let us know what you think!

And as always, happy coding!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay