added id to the manifest editor and added back to pwabuilder link to …

…next steps
pwa-builder · Aug 7, 2023 · be2f8e9 · be2f8e9
1 parent 43f5a1a
commit be2f8e9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 13 deletions.
diff --git a/apps/pwabuilder/src/script/pages/qualification/token-congratulations.ts b/apps/pwabuilder/src/script/pages/qualification/token-congratulations.ts
@@ -114,6 +114,7 @@ export class TokenCongratulations extends LitElement implements BeforeEnterObser
              <!-- Need link to publishing instructions -->
             <div id="publishing-instructions">
               <arrow-link .text=${`Detailed Publishing Instructions`} .link=${`https://docs.pwabuilder.com/#/builder/windows`}></arrow-link>
+              <arrow-link .text=${`PWABuilder`} .link=${`https://pwabuilder.com`}></arrow-link>
             </div>
           </div>
         </div>

diff --git a/components/manifest-editor/src/components/manifest-info-form.ts b/components/manifest-editor/src/components/manifest-info-form.ts
@@ -557,6 +557,22 @@ export class ManifestInfoForm extends LitElement {
             <sl-input placeholder="PWA Short Name" value=${this.manifest.short_name! || ""} data-field="short_name" @sl-change=${this.handleInputChange}></sl-input>
           </div>
         </div>
+
+        <div class="form-row long">
+          <div class="form-field">
+            <div class="field-header">
+              <h3 class=${classMap(this.decideFocus("id"))}>Id</h3>
+              <manifest-field-tooltip .field=${"id"}></manifest-field-tooltip>
+            </div>
+            <p class="field-desc">Unique identifier for your PWA that is seperate from fields that could change over time (like name or short name)</p>
+            <sl-input 
+              placeholder="id" 
+              value=${this.manifest.id ?? ""} 
+              data-field="id" 
+              @sl-change=${this.handleInputChange}></sl-input>
+          </div>
+        </div>
+        
         <div class="form-row long">
           <div class="form-field">
             <div class="field-header">
@@ -568,7 +584,6 @@ export class ManifestInfoForm extends LitElement {
             <p class="field-desc">Used in app storefronts and install dialogs</p>
             <sl-textarea placeholder="PWA Description" value=${this.manifest.description! || ""} data-field="description" @sl-change=${this.handleInputChange} resize="none"></sl-textarea>
           </div>
-          
         </div>
         <div class="form-row color-row">
           <div class="form-field color_field">

diff --git a/components/manifest-editor/src/components/manifest-platform-form.ts b/components/manifest-editor/src/components/manifest-platform-form.ts
@@ -1040,21 +1040,21 @@ dispatchUpdateEvent(field: string, change: any, removal: boolean = false){
               </div>
           </div>
           <div class="form-row">
-          <div class="form-field">
-            <div class="field-header">
-              <h3 class=${classMap(this.decideFocus("edge_side_panel"))}>Edge Side Panel</h3>
-              <manifest-field-tooltip .field=${"edge_side_panel"}></manifest-field-tooltip>
+            <div class="form-field">
+              <div class="field-header">
+                <h3 class=${classMap(this.decideFocus("edge_side_panel"))}>Edge Side Panel</h3>
+                <manifest-field-tooltip .field=${"edge_side_panel"}></manifest-field-tooltip>
+              </div>
+              <p>Indicates whether your PWA supports the side panel in Microsoft Edge</p>
+              <sl-input 
+                type="number"
+                placeholder="Preferred Width" 
+                value=${this.manifest.edge_side_panel?.preferred_width ?? ""} 
+                data-field="edge_side_panel" 
+                @sl-change=${this.handleInputChange}></sl-input>
             </div>
-            <p>Indicates whether your PWA supports the side panel in Microsoft Edge</p>
-            <sl-input 
-              type="number"
-              placeholder="Preferred Width" 
-              value=${this.manifest.edge_side_panel?.preferred_width ?? ""} 
-              data-field="edge_side_panel" 
-              @sl-change=${this.handleInputChange}></sl-input>
           </div>
         </div>
-        </div>
       </div>
     `;
   }

diff --git a/libraries/manifest-information/src/index.ts b/libraries/manifest-information/src/index.ts
@@ -419,6 +419,18 @@ export const manifest_fields: { [field: string]: infoPanel } = {
     docs_link:
       "https://docs.pwabuilder.com/#/builder/manifest?id=edge_side_panel-object",
   },
+  id: {
+    description: [
+      `id is an recommended member that functions as a unique identifier for your Progressive Web App that is separate from members that may change over time (such as name or start_url).`,
+    ],
+    purpose: null,
+    example: null,
+    code: `id: "/?homescreen=1"`,
+    location: "info",
+    required: false,
+    docs_link:
+      "https://docs.pwabuilder.com/#/builder/manifest?id=id-string",
+  },
   widgets: {
     description: [`In Windows 11, PWAs can define widgets, update them, and handle user interactions within them.`],
     purpose:`Various operating systems have widgets dashboards that let users read content and perform tasks.`,