Create a manfiest editor component

[nmetulev]

Tell us about your feature idea

The manifest editor on PWABuilder.com should be a standalone component used by our tools, including PWAStudio. To enable this, we should create a new manifest editor web component for use across all projects.

The manifest editor web components should handle manifest generation and editing of existing manifests. It should guide and help developers to build a solid manifest by validating fields and providing resources and documentations for various fields.

The manifest editor should:

• Contain validation enabled strongly typed fields for all properties and sub-properties [reference]
• Indicate when a property has been changed and is different from an initial manifest (for scenarios such as editing a hosted manifest vs editing a local manifest).
• Document each property at a glance (ex: on hover) while providing links to deeper documentation. Quick glance documentation could also include supported browsers and w3c standards stage for each propoerty)
• Enable generation and downloading of icons and screenshots, while allowing for extensibility
• leverage interfaces, classes, and validation tools from #2816

Do you have an implementation or a solution in mind?

Basic Usage

<pwa-manifest-editor></pwa-manifest-editor>

let editor = document.querySelector('pwa-manifest-editor');

editor.initialManifest = myManifest; //load an initial manifest

let editedManifest = editor.manifest; // get edited or generated manifest
let icons = editor.getIcons(); // get blobs of all icons
let screenshots = editor.getScreenshots(); // get blobs of all screenshots

// events
manifesteditor.addEventListener('manifestUpdated', (e) => { });
manifesteditor.addEventListener('iconsUpdated', (e) => { });
manifesteditor.addEventListener('screnshootsUpdated', (e) => { });

Have you considered any alternatives?

No response

Backlog:

• [x] #2902
  • [x] categories -- implemented but reset not working
  • [x] display_override
  • [x] iarc_rating_id
  • [x] prefer_related_applications
  • [x] protocol_handlers
  • [x] related_applications
  • [x] shortcuts
• [x] #2903
• [x] #2904

[ghost]

Thanks for submitting a new feature request! I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future.