How to create your own PWA! #pwasAreNotDead 💀

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?
• Downsides of Progressive Web Apps
• How to build a Progressive Web App
  • Configure manifest.json
  • Create Service Worker
  • Debug PWA
• Conclusion 📝

In recent years, mobile Internet usage has overtaken desktop usage (official statista figures). 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?

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

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

If you use WordPress, you’ll be ready in no time: install the PWA plugin 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 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:

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

This file contains all the needed information about your website, here is an example:

{
   "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. 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:

// 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:

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.

If there are no errors in manifest.json this button should show up to install the PWA.

Debug PWA

You can debug a PWA via the “Application” tab in your Dev Tools.

The documentation for the Service Worker can be found in the Service Worker API.

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. 😻

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