The Progressive Web Apps, 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 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 so many benefits that many publishers have started integrating PWA counterparts into their websites.
So if you are a publisher or developer who wants to jump on this bandwagon, this guide is here to help you.
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 must 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:
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.
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.
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 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 button.
Now browse and select the PWA App folder in the explorer window, and hit the button.
Once the app is loaded, open a new tab and click the Apps icon within the Chrome browser. Alternatively, you can 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, 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.
Next up, you will have to register yourself as a 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.
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 button.
Once the file is uploaded, you must fill in additional details. Fill in the details and click the button at the top right.
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 in the confirmation dialog box.
Your app will be reviewed and published to the Chrome Web Store 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 button (Sample below).
Click on the button in the confirmation dialog box that appears.
That’s it; the app has been installed on your PC and is available under chrome://apps/.
If you have added your PWA app to the website, 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)
Click in the confirmation box, and it shall then install the PWA.
Bottom Line
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, 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 for 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.
If you no longer want to have the PWA app on the browser, then you uninstall it from the extensions page.
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, let us know.
Lastly, if you've any thoughts or feedback on How to Create and Install Progressive Web App on Computer, then feel free to drop in below comment box. You can also report the outdated information.
