How to Create and Install Progressive Web App on Computer?

Progressive Web Apps or Chrome Apps are lightweight applications installed and executed on Chrome-based operating systems and browsers. It supports most computer devices and is built primarily for Chrome OS machines. We can manually create the Progressive web apps and then install them on the computer as a stand-alone app within the Chrome OS or Chromium browsers.

The Progressive Web Apps, or more popularly known as the Chrome Apps, are small-sized web apps that are majorly built-in JavaScripts and are compatible across all the major browsers.

Although they are lightweight, they still manage to pack in most of the required feature sets. It only takes a couple of seconds for their installation, and the reason for PWA’s popularity is that it has everything one can think of.

These apps offer such a plethora of benefits that many publishers have started integrating PWA counterparts into their websites.

So if you are a publisher or developer who wants to jump into this bandwagon, then this guide is here to help you out.

Here are detailed instructions that shall help you create, test, submit, and subsequently install Progressive Web Apps on your computer.

Create PWA App

Create a blank folder on your desktop, giving the PWA app the same as the folder name.

After that, you need to code and create a manifest file within that folder. For that, use a text editor such as Notepad++ and create a new JSON or JavaScript Object Notation file.

Input the desired information within the manifest file for your PWA App. It should have the following values:

  • name — The name that will appear in the Chrome Web Store
  • version — The version of the metadata
  • icons — An array specifying the icons that your item uses
  • description — A string of 132 characters (maximum) describing your extension

For example, here’s a JSON file for a bookmark app that you could refer to:

Manifest Sample File information

Moving on, once the coding is complete, you need to verify that the codes are formatted correctly. For that, you may use a JSON validator tool such as JSONLint.

Validating the JSON code in JSONLint validator

If the validation is successful, save this file as manifest.json.

Next up, you will have to design a logo for your app. Make sure that the size is 128p by 128p. Once the logo is created, save it as 128.png inside the same folder where your JSON file is present.

Chrome App Manifest JSON file and Image

That’s it. You have successfully created the desired miniature version of a PWA App. Let’s now put it to the test.

Test PWA App

Launch the Chrome browser on your PC and then head to the location below: chrome://extensions/ to open the Chrome extensions page. Enable the Developer Mode toggle from the top right of the page, and click on the Load unpacked button.

Enable Extensions Developer Mode in Chrome Browser and Add Local Unpacked Extension folder

Now browse and select the PWA App folder in the explorer window, and hit the Select Folder button.

Select Chrome App PWA Folder for Testing in Chrome Browser

Once the app is loaded, open a new tab and click the Apps icon within the Chrome browser. Alternatively, you can also visit chrome://apps/ in the address bar.

Select your created PWA and check if it is working correctly or not. If you find any issues, then make the required changes to the manifest.json file and reload the package to Chrome via the Load Unpacked option, as mentioned above.

Now perform the check again and if you have ironed out all the bugs, publish it to the Chrome Web Store!

Publish your App to Chrome Web Store

Before you proceed ahead with publishing the app, you will first have to verify your target audiences. They are categorized under four segments:

  • Public: Your app will be available for everyone.
  • Unlisted: Available only to those to whom you share the direct link of your PWA. It wouldn’t appear in the Chrome Web Store.
  • Private: Available only to the testers and debuggers whose names you have listed in the developer dashboard.
  • Group Publishers: Available to the publishers who have paid a one-time developer fee.

Once you have made up your mind, let’s get started with the steps to publish your app. First, create a ZIP file of your app package that has the 128.png and the manifest.json file.

Compress the Chrome App folder to ZIP

Next up, you will have to register yourself as the Chrome Web Store Developer. Head over to this site and proceed with the on-screen instructions to register yourself as a Chrome Web Store developer.

Register as Chrome Web Store Developer

Once your account is created, go to the Chrome Developer Dashboard and sign in with your credentials. Click on Add New Item > Choose File and navigate to your app’s ZIP file; select and hit the Upload button.

Once the file is uploaded, you will have to fill in a few additional details. Fill in the details and click on the Submit for Review button situated at the top right.

Submit Chrome PWA app for review

After that, enable the checkbox if you want to make the PWA app public using Publish automatically after it has passed review, and click on Submit for Review in the confirmation dialog box.

Submit the Chrome Web App for Review with Development Team

Your app will undergo review and be published to the Chrome Web Store and if everything’s good (if you had set the target audience to Public).

You shall also receive the status of the review and publish it automatically if everything looks okay.

Install PWA App on Computer

Now that your app is published, let’s install it onto your PC.

Head over to the Chrome Web Store and open the App details page. Click on the Add to Chrome button (Sample below).

Add to Chrome Extension Chrome Web Launcher

Click on the Add Extension button in the confirmation dialog box that appears.

Add Chrome Web Store Launcher to Chrome Browser

That’s it; the app has been successfully installed onto your PC and is available under chrome://apps/.

In case if you have added your PWA app to the website, then the process will be slightly different.

Head over to your website and then click on the Install icon situated at the extreme right of the Omnibox (for reference, let’s take Google’s Image Compression website Squoosh)

Install icon in URL or Address Bar

Click Install in the confirmation box, and it shall then install the PWA.

Install Squoosh PWA app on Chrome browser

Bottom Line: Create and Install PWA

We round off the guide on how you could create a Chrome App. Likewise, the steps to publish and then subsequently install them onto your computer have also been listed.

Consider setting your demographic to the Public if you want your PWA to reach a wider audience. But if the app is currently in the testing phase, then it’s better to assign it the Private/Unlisted tag, comprehensively test it, and only make it Public.

Moreover, there’s no fixed time frame when your app will be verified. It usually depends on the type of app that you have submitted. And whatever will be the results, the team will notify you of the same via email.

With that said, we conclude this guide on how to create and install the PWA app. If you have any queries concerning the instructions mentioned above, do let us know.

Lastly, here are the recommended web browsers for your computer and mobile phone that you should give a try.

WindowsMacOSiOSAndroidLinux
Chrome WindowsChrome MacChrome iOSChrome AndroidFirefox Linux
Firefox WindowsSafari MacSafari iOSEdge AndroidChrome Linux
Edge WindowsFirefox MacEdge iOSSamsung InternetEdge Linux

If you've any thoughts on How to Create and Install Progressive Web App on Computer?, then feel free to drop in below comment box. If you find this article helpful, please consider sharing it with your network.

Also, please subscribe to our BrowserHow YouTube channel for helpful videos tutorials.

Disclosure: This page may contain affiliate links, which means we may receive compensation for your purchases using our links; of course at no extra cost to you (indeed, you may get special discounts). This will support our effort to create more useful content, and keep it open and free forever.
Share

Leave a Reply

Your email address will not be published. Required fields are marked *