Transforming Your Website into a PWA

Progressive Web Apps (PWAs) are special websites that work a lot like mobile apps. They use new web technology to give you features, like using the applications even when you're offline and getting notifications. You can add them to your phone's home screen, just like regular apps, without needing to download them from an app store. They're really fast and work well on any device or internet speed. Converting your website into a PWA can enhance its usability and make it more engaging for users.

Follow these simple steps to convert your website to a PWA:

1. Create Application Icons and Other Assets

To create PWA icons, you'll need various sizes of app icons for different platforms. However, you can generate them quickly using the PWA Builder website. Upload your image file and click "generate". It will process the image and provide you with a zip folder containing all the app icons for various platforms and a JSON file.

Additionally, take 5 screenshots of your website sized at 472 x 1024 pixels in PNG file format.

2. Create a Manifest File

Create a file named pwa-manifest.json in your public directory. If you are a WordPress developer, you can add it to the theme folder.

Here's a template for the manifest file. Link the icons and screenshots in the manifest file:

 {
   "name": "App Name", // Name of the app
   "short_name": "App Short Name", // Short name of the app 20 max charaters
   "theme_color": "#ffffff", // Theme color of the app
   "background_color": "#ffffff", // Background color of the app
   "scope": "/", // Scope of the app
   "start_url": "/", // Start URL of the app
   "description": "App Description", // Description of the app
   "orientation": "portrait" , // Orientation of the app [ portrait | landscape ]
   "display": "standalone", // Display of the app [ fullscreen | standalone | minimal-ui | browser ]
   "dir": "ltr", // Direction of the app [ ltr | rtl ]
   "shortcuts": [
      {
         "name": "Shortcut Name",
         "url": "/",
         "description": "Shortcut Description",
         "icons": [
            {
               "src": "Icon Path", // Icon path of the shortcut
               "sizes": "192x192"
            }
         ]
      }
   ],
   "launch_handler": { "client_mode": "auto" }, // Launch handler of the app
   "handle_links": "preferred" , // Handle links of the app [ preferred | required | disabled ]
   "icons": [
      // Icons of the app genarated by PWA Builder
   ],
   "screenshots": [
      {
         "src": "Screenshot path", // Screenshot path of the app
         "type": "image/webp",
         "sizes": "472x1024",
         "form_factor": "wide"
      },
   // you can add upto 5 screenshots
   ],
} 

Replace the icons section in the manifest.json file with the downloaded json data before. If you store the image and the manifest file in separate locations, make sure to fix the icon paths.

3. Link the Manifest File to the Website

Now, you can link the manifest file to your website's header using the following code:

<link rel="manifest" href="path-to-manifest/manifest.json">
<link rel="prefetch" href="path-to-manifest/manifest.json">

If you are a WordPress developer, you can use this code in your functions.php file:

function pwa_json_link() {
	$json_file_url = get_template_directory_uri() . '/path-to-manifest/manifest.json';
	echo '<link rel="manifest" href="' . esc_url($json_file_url) . '">' . "\n";
	echo '<link rel="prefetch" href="' . esc_url($json_file_url) . '">' . "\n";
}
add_action('wp_head', 'pwa_json_link');

By following these steps, you can successfully convert your website into a PWA application. Enjoy the benefits of improved user engagement and performance!

Codimite PWA Builder (coming soon)

Our tool simplifies the process of transforming your web application into a Progressive Web Application. With our solution, creating PWAs is accessible to everyone.

Want to know more about Progressive Web Applications. Click here.