How to create your own PWA! #pwasAreNotDead 💀
Published: 2024-06-01 10:00:00

> A Progressive Web App (PWA) is a form of mobile application that features fast load times, offline functionality, and an optimized user experience. And in this guide you will learn how to simply create your own PWA!



## Table of Contents 🛡️
* [What are Progressive Web Apps?](#what-are-progressive-web-apps)
* [Downsides of Progressive Web Apps](#downsides-of-progressive-web-apps)
* [How to build a Progressive Web App](#how-to-build-a-progressive-web-app)
  * [Configure manifest.json](#configure-manifest-json)
  * [Create Service Worker](#create-service-worker)
  * [Debug PWA](#debug-pwa)
* [Conclusion](#conclusion) 📝

In recent years, mobile Internet usage has overtaken desktop usage ([official statista figures](https://de.statista.com/statistik/daten/studie/217457/umfrage/anteil-mobiler-endgeraete-an-allen-seitenaufrufen-weltweit/)). Most people nowadays access the Internet via their mobile devices. As a result, the requirements for mobile app development have changed. Progressive Web Apps (PWA) are one of the solutions that have evolved in this area.

## WHAT ARE PROGRESSIVE WEB APPS? <a name="what-are-progressive-web-apps"></a> 
In short, Progressive Web Apps are a type of mobile application based on a website. But what does that actually mean? Quite simply, a PWA is a mobile app that you can access from the browser on your mobile device. Unlike native apps, you don’t have to download and install a separate app.

## DOWNSIDES OF PROGRESSIVE WEB APPS <a name="downsides-of-progressive-web-apps"></a> 
Progressive Web Apps (PWAs) have many advantages, but they also have some disadvantages. They have limited access to certain device features and hardware, such as the camera and contacts, making some functionality more difficult to implement than in native apps. Push notification support is limited in some browsers, potentially causing delays or failures in notification delivery. PWAs may not work on older browsers or devices because they rely on newer technologies and APIs. In addition, data storage is limited and less flexible compared to native apps, limiting features that require significant storage.

## HOW TO BUILD A PROGRESSIVE WEB APP <a name="how-to-build-a-progressive-web-app"></a> 

If you use WordPress, you’ll be ready in no time: install the [PWA plugin](https://wordpress.org/plugins/pwa/) and in a few minutes your normal website will be transformed into a great PWA.

> By the way, you can find my [selection of the best free WordPress plugins](https://webdeasy.de/en/best-wordpress-plugins/) here.

However, it’s not always that simple. There is a bit more to creating a PWA. A PWA consists of two basic parts: the `manifest.json` and the **service worker**.

### Configure manifest.json
To include the `manifest.json` on your website you have to include the following line in the `head`:
```html
<link rel="manifest" href="/manifest.json">
```
This file contains all the needed information about your website, here is an example:
```json
{
   "short_name":"webdeasy.de",
   "name":"webdeasy.de",
   "icons":[
      {
         "src":"/images/logo-512.svg",
         "type":"image/svg+xml",
         "sizes":"512x512"
      },
      {
         "src":"/images/logo-192.png",
         "type":"image/png",
         "sizes":"192x192"
      },
      {
         "src":"/images/logo-512.png",
         "type":"image/png",
         "sizes":"512x512"
      }
   ],
   "start_url":"/index.html",
   "background_color":"#3d50a7",
   "display":"standalone",
   "theme_color":"#3d50a7",
   "description":"Your IT-Blog"
}
```
What exactly the individual parameters mean and what else there is, you can read in the [manifest.json documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json). I just want to show you how easy it is to create a basic PWA.

### Create Service Worker
The complete logic of your PWA is in the Service Worker, which you should put in the root directory of your website. For example, it can deliver data from the cache even when the user is offline. The service worker also allows sending push notifications and updating the app in the background without the user having to reload the page.

The service worker as well as the `manifest.json` must be included in the HTML `head` of your website:
```js
// service-worker.js
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});
```

What you then do in the callback functions is of course dependent on your WebApp.

If you test the PWA locally, you will get this error:
![“Registration failed: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin (‘null’) is not supported.”](https://webdeasy.de/wp-content/uploads/2023/04/image.png)

This is because the HTML file is not called statically, but is delivered via a server. If you use Visual Studio you can start a live server via this [LiveServer extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).

If there are no errors in manifest.json this button should show up to install the PWA.
![Google Chrome Browser: Install PWA](https://webdeasy.de/wp-content/uploads/2023/04/pwa-browser-bar.png)

### Debug PWA
You can debug a PWA via the “Application” tab in your Dev Tools.
![Debug PWA](https://webdeasy.de/wp-content/uploads/2023/04/image-1.png)

The documentation for the Service Worker can be found in the [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API?retiredLocale=de).

## CONCLUSION
That's it! Easy, right? If you liked this guide I would be happy if you check out my other articles on [my blog](https://webdeasy.de/). 😻

<small>Some texts were created with the help of AI. All content has been thoroughly checked!</small>