Main <-- Staging (#4456)

fixes/features (should be multiple, add to the list)
1. App Capabilities:
#4034
2. Accessibility issues: #4258, #4259, #4239, #4240

## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
1. App Capabilities are mixed in with manifest and SW fields and there
is no easy way to discover and learn about them
2. Accessibility Issues from most recent pass

## Describe the new behavior?
1. New designs to isolate app capabilities and give our users more
information about what they are and how to implement them.
2. Fixed those issues

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.

## Additional Information
1. Known issue: #4453
waiting on dependency
(shoelace-style/shoelace#1612).
2. No additional context

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Justin Willis <jgw9617@gmail.com>
Co-authored-by: Gleb Khmyznikov <gleb.khmyznikov@gmail.com>
Co-authored-by: Nikola Metulev <nmetulev@users.noreply.github.com>
Co-authored-by: Mara'ah Lee <maraahlee@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Adolf Daniel <10156724+adolfdaniel@users.noreply.github.com>
Co-authored-by: Justin Willis (HE / HIM) <juwillis@microsoft.com>
Co-authored-by: Zach Teutsch <88554871+zateutsch@users.noreply.github.com>
Co-authored-by: Beth Pan <xupa@microsoft.com>
Co-authored-by: vipul-bhojwani <67650372+vipul-bhojwani@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amrutha.srinivasan95@gmail.com>
Co-authored-by: Federico Navarrete <darklord.navarrete@gmail.com>
Co-authored-by: Toby Liu <ybot1122@gmail.com>
Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com>
Co-authored-by: Amrutha Srinivasan <amsrin@microsoft.com>
Co-authored-by: Jonas Thelemann <e-mail@jonas-thelemann.de>
Co-authored-by: Siraj Chokshi <19193347+SirajChokshi@users.noreply.github.com>

.github/workflows/pwabuilder-main.yml

@@ -67,6 +67,17 @@ jobs:
           skip_app_build: true # Skip building the app using the default build commands for the specified app framework - optional
           output_location: "" # Built app content directory - optional
 
+  generate_release:
+    runs-on: ubuntu-latest
+    name: Generate Release including changelog
+    steps:
+      - uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.CHANGELOG_TOKEN }}"
+          automatic_release_tag: "latest"
+          prerelease: false
+          title: "Production Build"
+
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

.github/workflows/pwabuilder-preview.yml

@@ -66,6 +66,17 @@ jobs:
           skip_app_build: true # Skip building the app using the default build commands for the specified app framework - optional
           output_location: "" # Built app content directory - optional
 
+  generate_release:
+    runs-on: ubuntu-latest
+    name: Generate Release including changelog
+    steps:
+      - uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.CHANGELOG_TOKEN }}"
+          automatic_release_tag: "latest"
+          prerelease: true
+          title: "Staging Build"
+
 
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'

apps/blog/src/posts/announcing-app-capabilities/announcing-app-capabilities.md

@@ -0,0 +1,40 @@
+---
+layout: post
+title: Announcing the App Capabilities card
+excerpt: Introducing the new App Capabilities section of the PWABuilder Report Card page
+description: Introducing the new App Capabilities section of the PWABuilder Report Card page
+date: 2023-10-16
+updatedDate: 2023-10-16
+trending: true
+featured: true
+image: posts/announcing-app-capabilities/ac-cards.png
+isPost: true
+backUrl: '/'
+author:
+  name: Jaylyn Barbee
+  twitter: https://twitter.com/jaylynsatwork
+  title: Software Engineer
+tags:
+  - post
+  - PWA
+  - Report Card
+  - pwabuilder.com
+---
+
+
+To increase discoverability and education surrounding the features that developers can take advantage of to make their apps feel more native, the PWABuilder team is introducing the brand new “App Capabilities” card. From customizing the physical appearance of the installed PWA with `display_override` to telling the PWA how to handle incoming files and links with `file_handlers` and `handle_links` respectively, implementing these capabilities can help a PWA embrace the “progressive” part of its name.
+
+<img src="/posts/announcing-app-capabilities/ac-cards.png" alt="PWABuilder CLI create command output after executing."></img>
+
+
+On hover, each of the bubbles will show a tooltip that has a brief description of the field, links to read more, and a link to edit the field directly in the Manifest Editor if PWABuilder currently supports the field. For the fields that are not supported, stay tuned for further updates in the months to come. 
+
+<img src="/posts/announcing-app-capabilities/ac-tooltip.png" alt="PWABuilder CLI create command output after executing."></img>
+
+This update also changed the way users can interact with their Action Items. The indicator pills that live above the list are now clickable and filter the list to match the selected filter. Red filters required fields that block packaging, yellow indicates recommended or optional fields, and the new purple lightning bolt tells the user how many app capabilities they have left to potentially add to their PWA. 
+
+<img src="/posts/announcing-app-capabilities/ac-items.png" alt="PWABuilder CLI create command output after executing."></img>
+
+
+
+Visit [pwabuilder.com](https://www.pwabuilder.com) and enter a URL to check out the new App Capabilities card now!

apps/blog/src/posts/announcing-cli/announcing-cli.md

@@ -49,5 +49,4 @@ Your PWA will then open in the browser window!
 
 <img src="/posts/announcing-cli/open-pwa.png" alt="PWA Starter open in a new browser window."></img>
 
-
 For more guidance on using the CLI, check out our documentation [here.](https://docs.pwabuilder.com/#/starter/quick-start) For feedback and issues, head over to our [Github repo](https://github.com/pwa-builder/PWABuilder). We’re always open ideas and direct contributions from the community!

apps/pwabuilder-vscode/src/services/service-workers/service-worker.ts

@@ -41,6 +41,8 @@ export async function findWorker(): Promise<any | undefined> {
             } else {
                 const worker = await vscode.workspace.findFiles("**/sw.js");
 
+                // to-do: Figure out cleaner way to do the below
+
                 if (worker.length > 0) {
                     existingWorker = worker[0];
                 } else {
@@ -57,6 +59,15 @@ export async function findWorker(): Promise<any | undefined> {
                         if (workerTryThree.length > 0) {
                             existingWorker = workerTryThree[0];
                         }
+                        else {
+                            // angular sw detection
+                            const workerTryFour = await vscode.workspace.findFiles(
+                                "**/ngsw-worker.js"
+                            );
+                            if (workerTryFour.length > 0) {
+                                existingWorker = workerTryFour[0];
+                            }
+                        }
                     }
                 }
             }