Photo by Greg Rakozy on Unsplash

A Progressive Web App, or PWA for short, is essentially a website that looks and feels like a mobile app.

PWAs are built with web technologies such as HTML, CSS, and JavaScript, but they offer features that were previously only available to native mobile apps, such as offline support, push notifications, and the ability to be added to a user’s home screen.

This means that PWAs can provide users with a more seamless and engaging experience, while also being easily accessible from any device with a web browser.

PWA’s come with benefits:

1. PWAs can be made using common web technologies like HTML, CSS, and JavaScript which most web developers are familiar with. This means it can cost less to develop and can be released quicker compared to native mobile apps, which require more specialized knowledge and tools.
2. PWAs can be used on any device that has a web browser, like computers, laptops, tablets, and phones. This means businesses can reach more people and give them the same experience no matter what device they’re using.
3. PWAs use new web technologies and methods to make them load faster and perform better than regular websites. This can make users less likely to leave the website quickly and more satisfied with their experience.
4. PWAs offer a fast and responsive experience like an app when accessed on any device with a web browser. They also have cool features like push notifications, offline support, and the ability to add them to the home screen of a device. This can make users more interested and likely to use the app again.

Pre-requisites for deployment and better UX:

1. A responsive website is a prerequisite for creating a PWA. Ensure that your website design is mobile-friendly and can adjust to different screen sizes.
2. A PWA must be served over HTTPS to ensure the security of the user’s data. If your website is not already using HTTPS, you will need to obtain an SSL certificate and set up HTTPS.

How to convert an existing application into a PWA

In this example, I will use an already-built responsive Vue.js application.
So, to convert a Vue.js website into a Progressive Web App (PWA), you can use the following steps:

Install the Vue CLI service worker plugin: The @vue/cli-plugin-pwa is a plugin for Vue CLI that provides PWA functionality to your Vue.js project. To install the plugin, run the following command in your terminal:

vue add @vue/cli-plugin-pwa

Configure the PWA options: After installing the plugin, you will be prompted to configure the PWA options, such as the name, description, icons, and colors for your app. You can also specify additional features such as caching strategies and background synchronisation.

A manifest file looks like this:

{
  "name": "My PWA",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196f3"
}

Generate the service worker: The PWA plugin generates a service worker file for your Vue.js project, which is responsible for caching assets and enabling offline support. To generate the service worker, run the following command in your terminal:

A service worker file looks like this:

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/images/icon-192x192.png',
  '/images/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

These files will be generated by the PWA CLI TOOL. I’ve provided examples just for reference and generated files may differ from the ones I’ve provided.

Finally,

npm run build

Test your PWA: After generating the service worker, you can test your PWA by serving the production build of your Vue.js project. You can use a tool like serve to serve the build files:

npm install -g serve
serve -s dist

Register your PWA: Once you have tested your PWA, you can register it with various app stores and platforms, such as the Google Play Store, Microsoft Store, and Apple App Store.

Overall, the Vue CLI PWA plugin makes the process much easier and provides a convenient way to add PWA functionality to your Vue.js project.

Conclusion

To sum up, Progressive Web Apps (PWAs) are becoming more popular because they provide users with a similar experience to using a mobile app, but on the web. They can be accessed from any device with a web browser and offer features such as push notifications and offline support.

PWAs can be built using familiar web technologies, which can make development faster and less expensive than building a native mobile app. They also provide faster loading times, which can help keep users engaged and satisfied.

For businesses, implementing a PWA can be a great way to reach more users and provide them with a fast and responsive experience on the web.