CV uno Logo Text
<- Back To Blog

how to make resume site pwa installable?

Bruno
Bruno ·
Let’s Create a CV 🚀

Introduction

In today’s digital age, having a personal CV website is essential for job seekers. Not only does it showcase your professional skills and experiences, but it also provides a unique platform for potential employers to interact with your personal brand. However, to stand out even more, you can enhance your CV website by making it a Progressive Web App (PWA). This allows users to install your site on their devices, providing a seamless experience similar to native apps.

What is a Progressive Web App (PWA)?

A Progressive Web App combines the best of web and mobile applications. It is a web application that can be accessed via a browser but also offers features typically found in native applications, such as:

  • Offline capabilities
  • Push notifications
  • Home screen installation
  • Faster load times

By converting your CV website into a PWA, you improve the user experience, making it easier for recruiters to access your information anytime, anywhere.

Steps to Make Your CV Website a PWA

1. Create Your CV Website with cvuno

To start, you need to create your CV website. With cvuno, you can build a personalized CV website in about 10 seconds from your resume or a short role description, without relying on templates. Once you have your CV website ready, you can easily implement PWA features.

2. Add a Web App Manifest

A web app manifest is a JSON file that provides information about your app, such as its name, icons, and start URL. Here’s how you can create one:

  • Create a manifest.json file in the root of your website.
  • Include the following basic structure:
{
  "name": "My Professional CV",
  "short_name": "CV",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • Customize the name, short_name, and icons as per your CV branding.

To link the manifest file to your CV website, add the following line in the <head> section of your HTML:

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

4. Setup a Service Worker

A service worker is a script that runs in the background and enables features like offline access. Here’s how to set it up:

  • Create a service-worker.js file in the root of your website.

  • Add the following code to cache your CV website files:

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('cv-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        'icon-192x192.png',
        'icon-512x512.png'
      ]);
    })
  );
});
 
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});
  • This code caches your CV website files when the service worker is installed and serves them from the cache when the user is offline.

5. Register the Service Worker

To register the service worker, add this code to your main JavaScript file (or directly in your HTML):

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch((error) => {
      console.log('ServiceWorker registration failed: ', error);
    });
  });
}

6. Test Your PWA

Once you’ve implemented the above steps, it’s time to test your PWA:

  • Open your CV website in Google Chrome.
  • Open the Developer Tools (F12).
  • Go to the "Application" tab, and check if the manifest and service worker are successfully registered.
  • You should see an "Install" icon in the address bar. Click it to install your CV website on your device.

7. Make Improvements

  • Add Push Notifications: Engage your visitors by sending them notifications for updates or new projects.
  • Optimize Performance: Use tools like Lighthouse to analyze your PWA and identify areas for improvement.

Conclusion

Making your CV website a Progressive Web App can significantly enhance user engagement and accessibility. With cvuno, the process of creating and managing your CV website is quick and efficient. Once you have your site set up, following the steps above will ensure you’re providing a modern experience to recruiters and hiring managers.

For those interested in a unique and easily accessible CV, See an example CV to get inspired.

Call to Action

Ready to elevate your professional presence? Try cvuno today and create your own personal CV website in just seconds! Experience the power of a PWA and showcase your skills effectively.

Let’s Create a CV 🚀
how to make resume site pwa installable? | CV UNO