isabella232 / vscode-extension-4

PWA-Builder BETA

This extension allow you create the necesaries images for manifest file, package the project as Appx file and execute an appx package from a directory.

Table of Contents

• Prerequisites
• Installation
• Table of Commands
• How to use?
  • Appx Packaging
  • Execute Project
  • Image Generator
  • Snippets
    • Manifest
    • Service Worker

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)

Installation

• git clone <repository-url> this repository
• change into the new directory
• npm install

Table of Commands

Command	Description
Appx Package	This command generates the Appx package
Execute Package	Execute a app from manifest.xml file
Image Generator	Generates the images that you need for manifest.

How to use?

Appx Packaging

---

• Select manifest.json
• Select the output folder in which you want the package will be saved.
• Select the platform where the package will be installed

Result description:

• Site Folder: This folder contains all the files that was created by the PWA-Builder.
• Appx Manifest: This file is a XML file that has been created by the PWA-Builder package and it's needed for the packaging process.
• Site Package: If we double click it, this gonna open the site as Windows App.

Execute Project

---

Select the application file that you want execute (It must be the appxmanifest.xml file on Windows and APP on Mac).

Image Generator

---

• Open the Command Pallete
• Select the App Image Generator option.
• Select the image that you want for the app
• Select the platforms where the app will be used
• Set the image padding and image background (this could be transparent or a hexadecimal) values
• Set the assets folder path
• Set the manifest.json file path

Snippets

The snippets will help you saving time with the creation of the manifest and the service worker.

Manifest

This snippets run in JSON files only. There are two options:

• Simple Manifest
• Typical Manifest

Service Worker

This group contains:

• Offline page
• Offline copy of pages
• Offline copy with Backup offline page
• Cache-first network

Service worker code

Code for website

Built With

• VS Code
• Node.js