+
+
+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.
+
+
+
+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.
+
+
+
+
+
+Visit [pwabuilder.com](https://www.pwabuilder.com) and enter a URL to check out the new App Capabilities card now!
\ No newline at end of file
diff --git a/apps/blog/src/posts/announcing-cli/announcing-cli.md b/apps/blog/src/posts/announcing-cli/announcing-cli.md
index 9f128511a..4c888ad9e 100644
--- a/apps/blog/src/posts/announcing-cli/announcing-cli.md
+++ b/apps/blog/src/posts/announcing-cli/announcing-cli.md
@@ -49,5 +49,4 @@ Your PWA will then open in the browser window!
-
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!
diff --git a/apps/pwabuilder-vscode/src/services/service-workers/service-worker.ts b/apps/pwabuilder-vscode/src/services/service-workers/service-worker.ts
index bf2b46f40..8be9d0704 100644
--- a/apps/pwabuilder-vscode/src/services/service-workers/service-worker.ts
+++ b/apps/pwabuilder-vscode/src/services/service-workers/service-worker.ts
@@ -41,6 +41,8 @@ export async function findWorker(): Promise this.handleHover(true)} @mouseleave=${() => this.handleHover(false)}>
- this.trackTooltipOpened()}
- @sl-hide=${() => this.handleHover(false)}>
-
- document.body.style.height = "100vh"}
@sl-hide=${(e: any) => this.hideDialog(e)}
@sl-request-close=${(e:any) => this.handleRequestClose(e)}
- noHeader>
+ noHeader
+ >
diff --git a/apps/pwabuilder/src/script/components/sw-info-card.ts b/apps/pwabuilder/src/script/components/sw-info-card.ts
new file mode 100644
index 000000000..bada231ba
--- /dev/null
+++ b/apps/pwabuilder/src/script/components/sw-info-card.ts
@@ -0,0 +1,221 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AnalyticsBehavior, recordPWABuilderProcessStep } from '../utils/analytics';
+import { service_worker_fields } from '@pwabuilder/manifest-information';
+import {
+ smallBreakPoint,
+} from '../utils/css/breakpoints';
+import { SlDropdown } from '@shoelace-style/shoelace';
+
+@customElement('sw-info-card')
+export class ServiceWorkerInfoCard extends LitElement {
+ @property({ type: String }) field: string = "";
+ @property({ type: String }) placement: "" |"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" = "";
+ @state() currentlyHovering: boolean = false;
+
+ static get styles() {
+ return [
+ css`
+
+ .mic-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .info-box {
+ background-color: var(--font-color);
+ width: 340px;
+ color: #ffffff;
+ padding: 10px;
+ border-radius: var(--card-border-radius);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .info-box p {
+ margin: 0;
+ font-size: 16px;
+ font-family: var(--font-family);
+ }
+
+ .right {
+ background-color: transparent;
+ border: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .right:hover {
+ cursor: pointer;
+ }
+
+ .image-section {
+ background: linear-gradient(93.16deg, #EAECF4 16%, #CED0EC 87.75%);
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .image-section img {
+ padding: 10px 20px;
+ width: 300px;
+ height: auto;
+ }
+
+ .mic-actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ gap: 15px;
+ margin: 5px 0;
+ }
+
+ .mic-actions > * {
+ color: #ffffff;
+ font-size: var(--card-body-font-size);
+ font-weight: bold;
+ font-family: var(--font-family);
+ }
+
+ .mic-actions a {
+ line-height: 17px;
+ }
+
+ .mic-actions a:visited, .mic-actions a:active, .mic-actions a:link {
+ color: #ffffff;
+ }
+
+ .mic-actions button {
+ background-color: transparent;
+ border: none;
+ color: #ffffff;
+ padding: 0;
+ text-decoration: underline;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ }
+
+ .mic-actions button:hover {
+ cursor: pointer;
+ }
+
+ /* < 480px */
+ ${smallBreakPoint(css`
+ .info-box{
+ width: 240px;
+ }
+
+ .image-section img {
+ width: 200px;
+ }
+ `)}
+
+ `
+ ];
+ }
+
+ constructor() {
+ super();
+ }
+
+ firstUpdated(){
+
+ }
+
+ trackLearnMoreAnalytics(){
+ // general counter
+ recordPWABuilderProcessStep(`sw_bubble_tooltip.learn_more_clicked`, AnalyticsBehavior.ProcessCheckpoint);
+
+ //specific field counter
+ recordPWABuilderProcessStep(`sw_bubble_tooltip.${this.field}_learn_more_clicked`, AnalyticsBehavior.ProcessCheckpoint);
+ }
+
+ trackTooltipOpened(){
+ // general counter
+ recordPWABuilderProcessStep(`sw_bubble_tooltip.tooltip_opened`, AnalyticsBehavior.ProcessCheckpoint);
+
+ //specific field counter
+ recordPWABuilderProcessStep(`sw_bubble_tooltip.${this.field}_tooltip_opened`, AnalyticsBehavior.ProcessCheckpoint);
+ }
+
+ // opens tooltip
+ handleHover(entering: boolean){
+ this.trackTooltipOpened();
+ this.currentlyHovering = entering;
+ let tooltip = (this.shadowRoot!.querySelector("sl-dropdown") as unknown as SlDropdown)
+ let myEvent = new CustomEvent('trigger-hover',
+ {
+ detail: {
+ tooltip: tooltip,
+ entering: entering
+ },
+ bubbles: true,
+ composed: true
+ });
+ if(!entering){
+ setTimeout(() => { this.closeTooltip(myEvent) }, 500)
+ } else {
+ this.dispatchEvent(myEvent);
+ }
+
+ }
+
+ closeTooltip(e: CustomEvent){
+ if(!this.currentlyHovering){
+ this.dispatchEvent(e);
+ }
+ }
+
+ render() {
+ return html`
+
- ${manifest_fields[this.field].description.map((line: String) => html` this.trackTooltipOpened()}
+ @sl-hide=${() => this.handleHover(false)}
+ >
+
+ `}
+
+
`;
}
diff --git a/apps/pwabuilder/src/script/components/publish-pane.ts b/apps/pwabuilder/src/script/components/publish-pane.ts
index a6ae35700..4156edc64 100644
--- a/apps/pwabuilder/src/script/components/publish-pane.ts
+++ b/apps/pwabuilder/src/script/components/publish-pane.ts
@@ -43,7 +43,6 @@ export class PublishPane extends LitElement {
@state() feedbackMessages: TemplateResult[] = [];
@property({type: Boolean}) preventClosing = false;
- @property({type: Boolean}) tokensCampaign = false;
@state() storeMap: any = {
"Windows":
@@ -162,8 +161,6 @@ export class PublishPane extends LitElement {
justify-content: space-between;
box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.05);
position: relative;
- /* temporary style change for token trial */
- /* padding: 1em; */
border-radius: var(--card-border-radius);
}
.packaged-tracker {
@@ -216,7 +213,6 @@ export class PublishPane extends LitElement {
justify-content: flex-start;
width: 100%;
row-gap: .45em;
- /* temporary styling for token trial */
padding: 1em;
}
.title-block h2 {
@@ -257,17 +253,20 @@ export class PublishPane extends LitElement {
all: unset;
width: 75%;
background-color: var(--font-color);
- color: white;
+ color: #ffffff;
+ border: 1px solid transparent;
font-size: 14px;
border-radius: 50px;
padding: .75em 1em;
- border: none;
text-align: center;
font-weight: bold;
}
- .package-button:hover {
- cursor: pointer;
+ .package-button:focus, .package-button:hover {
+ box-shadow: var(--button-box-shadow);
+ border: 1px solid #ffffff;
+ outline: 2px solid #000000;
background-color: rgba(0, 0, 0, 0.75);
+ cursor: pointer;
}
#apk-tabs {
display: flex;
@@ -608,63 +607,6 @@ export class PublishPane extends LitElement {
}
}
- #windows-package-token-banner {
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- align-items: center;
- width: 100%;
- height: 50px;
- background-color: #3078D7;
- border-radius: 0px 0px 10px 10px;
- padding: 10px;
- border: none;
- gap: 7px;
- }
-
- #windows-package-token-banner:hover {
- cursor: pointer;
- }
-
- #token-banner-windows-icon img {
- width: 31px;
- height: auto;
- }
-
- #token-banner-text p {
- margin: 0;
- font-size: 14px;
- line-height: 16px;
- color: #ffffff;
- text-align: left;
- font-family: "Hind";
- font-weight: 550;
- }
-
- #token-banner-text img {
- margin-left: 6px;
- }
-
- #windows-package-token-banner:hover #token-banner-arrow {
- animation: bounce 1s;
- }
-
- @keyframes bounce {
- 0%,
- 20%,
- 50%,
- 80%,
- 100% {
- transform: translateY(0);
- }
- 40% {
- transform: translateX(-5px);
- }
- 60% {
- transform: translateX(5px);
- }
- }
-
/* > 1920 */
${xxxLargeBreakPoint(css``)}
@@ -1008,19 +950,6 @@ export class PublishPane extends LitElement {
);
}
- goToTokenPage(){
- recordPWABuilderProcessStep("free_token_check_now_windows_card_clicked", AnalyticsBehavior.ProcessCheckpoint);
- let current = new URL(location.href);
- let url = current.searchParams.get('site');
-
- let a: HTMLAnchorElement = document.createElement("a");
- a.target = "_blank";
- a.href = `${window.location.protocol}//${window.location.host}/freeToken?site=${url}`;
- a.rel = "noopener";
-
- a.click();
- }
-
async hideDialog(e: any){
let dialog: any = this.shadowRoot!.querySelector(".dialog");
if(e.target === dialog){
@@ -1116,11 +1045,12 @@ export class PublishPane extends LitElement {
render() {
return html`
${line}
`)} - ${manifest_fields[this.field].image ? - - html` -
- 
-
- ` :
- html``
-
- }
-
- this.trackLearnMoreAnalytics()}>Learn More
- ${manifest_fields[this.field].location ? html`` : html``}
+ ${this.placement !== "" ?
+ html`
+ this.trackTooltipOpened()}
+ @sl-hide=${() => this.handleHover(false)}
+ >
+
-
+
+ ` :
+ html`
+
+ ${manifest_fields[this.field].description.map((line: String) => html`
- ${line}
`)} + ${manifest_fields[this.field].image ? + + html` +
+
+
+ ` :
+ html``
+
+ }
+
+ this.trackLearnMoreAnalytics()}>Learn More
+ ${manifest_fields[this.field].location ? html`` : html``}
+
+ ${manifest_fields[this.field].description.map((line: String) => html`
+ ${line}
`)} + ${manifest_fields[this.field].image ? + + html` +
+
+
+ ` :
+ html``
+
+ }
+
+ this.trackLearnMoreAnalytics()}>Learn More
+ ${manifest_fields[this.field].location ? html`` : html``}
+
+
${this.cardsOrForm ?
diff --git a/apps/pwabuilder/src/script/components/share-card.ts b/apps/pwabuilder/src/script/components/share-card.ts
index 258f23270..041baee23 100644
--- a/apps/pwabuilder/src/script/components/share-card.ts
+++ b/apps/pwabuilder/src/script/components/share-card.ts
@@ -11,7 +11,7 @@ export class ShareCard extends LitElement {
@property() preventClosing = false;
@property() manifestData = "";
@property() swData = "";
- @property() securityData = "";
+ @property() enhancementsData = "";
@property() siteName = "";
@state() dataURL = "";
@@ -91,7 +91,7 @@ export class ShareCard extends LitElement {
height: 322px;
margin: 20px 0;
}
-
+
#share-actions {
display: flex;
flex-direction: row;
@@ -160,14 +160,14 @@ export class ShareCard extends LitElement {
.standard-button {
margin-bottom: 8px;
}
-
+
`)}
`
}
-
+
async setup(){
this.canvas = (this.shareCanvas.value as HTMLCanvasElement);
- await draw(this.canvas, this.manifestData, this.swData, this.securityData, this.siteName);
+ await draw(this.canvas, this.manifestData, this.swData, this.enhancementsData, this.siteName);
this.dataURL = this.canvas.toDataURL('image/png', 1.0);
this.file = this.dataURLtoFile(this.dataURL, `${this.siteName}_pwabuilder_score.png`);
@@ -186,16 +186,16 @@ export class ShareCard extends LitElement {
} else if (shareOption === "share"){
recordPWABuilderProcessStep(`sharepwascorecard.share_clicked`, AnalyticsBehavior.ProcessCheckpoint);
this.shareFile(this.file, `${this.siteName} PWABuilder report card score`, "Check out my report card scores from #PWABuilder #BuildPackageShip")
- } else {
+ } else {
return;
}
-
+
}
downloadImage(filename: string) {
let link = document.createElement('a');
link.href = "data:image/png;base64" + this.dataURL;
- link.download = filename;
+ link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
@@ -272,10 +272,10 @@ export class ShareCard extends LitElement {
${this.canShare ? html`
-
+
- ` : ''}
+ ` : ''}
this.handleHover(true)} @mouseleave=${() => this.handleHover(false)}>
+ ${this.placement !== "" ?
+ html`
+ this.trackTooltipOpened()}
+ @sl-hide=${() => this.handleHover(false)}
+ >
+
+ ` :
+ html`
+ this.trackTooltipOpened()}
+ @sl-hide=${() => this.handleHover(false)}
+ >
+
+ `
+ }
+
+
+ `;
+ }
+}
diff --git a/apps/pwabuilder/src/script/components/sw-selector.ts b/apps/pwabuilder/src/script/components/sw-selector.ts
index c01998220..8d70f39c5 100644
--- a/apps/pwabuilder/src/script/components/sw-selector.ts
+++ b/apps/pwabuilder/src/script/components/sw-selector.ts
@@ -35,6 +35,10 @@ export class SWSelector extends LitElement {
sl-tab::part(base):hover {
color: #4F3FB6;
}
+ sl-tab::part(base):focus-visible{
+ color: #4F3FB6;
+ outline: 1px solid black;
+ }
sl-tab-panel::part(base){
overflow-y: auto;
overflow-x: hidden;
@@ -77,6 +81,9 @@ export class SWSelector extends LitElement {
right: 5px;
z-index: 1000;
}
+ .dialog::part(close-button__base):focus-visible{
+ outline: 1px solid black;
+ }
#frame-footer {
background-color: #F2F3FB;
@@ -234,7 +241,7 @@ export class SWSelector extends LitElement {
+ ${service_worker_fields[this.field].description.map((line: String) => html`
+ ${line}
`)} + + +
+ ${service_worker_fields[this.field].description.map((line: String) => html`
+ ${line}
`)} + + +
- ${red != 0 ? html`
` : html``}
- ${yellow != 0 ? html`
` : html``}
+ ${red != 0 ?
+ this.filterList.includes("required") ?
+ html`` :
+ html``
+ : null
+ }
+ ${yellow != 0 ?
+ this.filterList.includes("recommended") || this.filterList.includes("optional") ?
+ html`` :
+ html``
+ : null
+ }
+ ${purple != 0 ?
+ this.filterList.includes("enhancement") ?
+ html`` :
+ html``
+ : null
+ }
`
}
- return html``
+ return null;
+
+ }
+
+ // filter todos by severity
+ filterTodoItems(filter: string, e: Event){
+ e.stopPropagation();
+
+ recordPWABuilderProcessStep(`${filter}_indicator_clicked`, AnalyticsBehavior.ProcessCheckpoint);
+
+ this.pageNumber = 1;
+ /* let todoDetail: SlDetails = (this.shadowRoot!.getElementById('todo-detail')! as unknown as SlDetails);
+ todoDetail.show(); */
+
+ this.stopShowingNotificationTooltip = true;
+ // if its in the list, remove it, else add it
+ // yellow means optional and recommended
+ if(filter === "yellow"){
+ if(this.filterList.includes("optional")){
+ this.filterList = this.filterList.filter((x: string) => (x !== "optional") && (x !== "recommended"))
+ } else {
+ this.filterList.push("optional")
+ this.filterList.push("recommended")
+ }
+ } else if(this.filterList.includes(filter)){
+ this.filterList = this.filterList.filter((x: string) => x !== filter)
+ } else {
+ this.filterList.push(filter)
+ }
+ // if filter list is empty, show everything
+ if(this.filterList.length === 0 ){
+ this.filteredTodoItems = this.allTodoItems;
+ return;
+ }
+
+ this.filteredTodoItems = this.allTodoItems.filter((x: any) => this.filterList.includes(x.status));
}
//truncate app card discription
@@ -2527,7 +2873,7 @@ export class AppReport extends LitElement {
${this.proxyLoadingImage || this.appCard.iconURL.length === 0 ? html`` : html`${red}
${yellow}
-
@@ -2571,7 +2917,6 @@ export class AppReport extends LitElement {
${this.appCard.siteName}
+${this.appCard.siteName}
${this.appCard.siteUrl}
${this.truncateString(this.appCard.description)}
+ 
+
+ ` :
+ null
+ }
+
+
+
+ You do not have a secure HTTPS server
+PWABuilder has done a basic analysis of your HTTPS setup and has identified required actions before you can package. Check out the documentation linked below to learn more.
+ +
-
+
+ `
+ :
+ null}
Action Items
- ${this.todoItems.length > 0 ? this.renderIndicators() : html``} +Action Items
+ + ${this.allTodoItems.length > 0 ? + this.stopShowingNotificationTooltip ? + // if they interact with the inicators, we no longer need to show the tooltip + this.renderIndicators() : + + // showing tooltip until they click an indicator which will remove the tooltip + html` +
+ 
+
+ ${this.renderIndicators()}
+
+ Filter through notifications
as and when you need!
- ${this.todoItems.length > 0 ? this.paginate().map((todo: any) =>
+ ${this.filteredTodoItems.length > 0 ? this.paginate().map((todo: any) =>
html`
`
) : html``}
- ${(this.todoItems.length > this.pageSize) ?
+ ${(this.filteredTodoItems.length > this.pageSize) ?
html`
-
` : html``}
+
-
Manifest
+Manifest
${this.manifestDataLoading ? html`
@@ -2715,41 +3093,6 @@ export class AppReport extends LitElement {
`}
-
-
- ${this.manifestDataLoading ?
- html`
-
-
-
- ` :
- html``
- }
-
- recordPWABuilderProcessStep("manifest_documentation_clicked", AnalyticsBehavior.ProcessCheckpoint)}
- >
- 
-
- `}
-
-
-
- ` :
- html`
- ${this.createdManifest ?
- html`
- We did not find a manifest on your site before our tests timed out so we have created a manifest for you!
Click here to customize it!
Manifest Documentation
-
-
- `}
-
-
@@ -2759,9 +3102,43 @@ export class AppReport extends LitElement {
id="manifestProgressRing"
class=${classMap(this.decideColor("manifest"))}
value="${this.createdManifest ? 0 : (parseFloat(JSON.stringify(this.manifestValidCounter)) / this.manifestTotalScore) * 100}"
- >${this.createdManifest ? html`
` : html`` : html`
+ ` : html`${this.manifestValidCounter} / ${this.manifestTotalScore}
`}`
+ >${this.createdManifest ? html`` : html`${this.manifestValidCounter} / ${this.manifestTotalScore}
`}`
}
+ ${this.manifestDataLoading ?
+ html`
+
+
+
+ ` :
+ html``
+ }
+
+ recordPWABuilderProcessStep("manifest_documentation_clicked", AnalyticsBehavior.ProcessCheckpoint)}
+ >
+
+
+ `}
+
+
+
+ ` :
+ html`
+ ${this.createdManifest ?
+ html`
+ We did not find a manifest on your site before our tests timed out so we have created a manifest for you!
Click here to customize it!
Manifest Documentation
+
+
+ `}
+
+ ${result.displayString}
Recommended
@@ -2817,7 +3194,7 @@ export class AppReport extends LitElement {
@@ -2829,7 +3206,7 @@ export class AppReport extends LitElement {
`}
- ` : html``)}
+ ` : null)}
${result.displayString}
Optional
@@ -2845,7 +3222,7 @@ export class AppReport extends LitElement {${result.displayString}
- ` : html``)} + ` : null)} `} @@ -2870,7 +3247,7 @@ export class AppReport extends LitElement {
-
- Service Worker
+Service Worker
${this.swDataLoading ? html`
@@ -2888,13 +3265,30 @@ export class AppReport extends LitElement {
${this.swDataLoading ?
html`` :
html`${this.swValidCounter == 0 ? html`` : html`
+ id="swProgressRing"
+ class="counterRing"
+ value="${this.swValidCounter > 0 ? 100 : 0}"
+ >+${this.swValidCounter}
+
`
}
+ ` : html` ${this.swValidCounter} / ${this.swTotalScore}
`}
+ ${this.serviceWorkerResults.map((result: any) =>
+ html`
+
this.handleShowingTooltip(e)}>
+
+
+
+ `
+ )
+ }
+
+ 
+ ${result.result ? html`
` : null}
+
+ ${this.formatSWStrings(result.member)}
+
${this.swDataLoading ?
html`
@@ -2928,69 +3322,14 @@ export class AppReport extends LitElement {
View Details
-
`}
-
- ${this.serviceWorkerResults.map((result: TestResult) => result.category === "required" ?
- html`
-
- Required
-
- ${result.result ? html`` : html``}
-
- ` :
- html``)}
- ${result.infoString}
-
-
-
- Highly Recommended
- ${this.serviceWorkerResults.map((result: TestResult) => result.category === "highly recommended" ? - html` -
- ${result.result ? html`` : html``}
-
- ` :
- html``)}
- ${result.infoString}
-
-
- Optional
- ${this.serviceWorkerResults.map((result: TestResult) => result.category === "optional" ? - html` -
- ${result.result ? html`` : html``}
-
- ` :
- html``)}
- ${result.infoString}
-
-
${this.secValidCounter == 0 ? html`` : html`
+ html`+${this.enhancementTotalScore}
`
}
- Security
- ${this.secDataLoading ? +App Capabilities
+ ${this.manifestDataLoading ? html`- ${this.decideMessage(this.secValidCounter, this.secTotalScore, "sec")} + PWABuilder has analysesd your PWA and has identified some app capabilities that could enhance your PWA
` }` : html` ${this.secValidCounter} / ${this.secTotalScore}
`}
- ${this.secDataLoading ?
+
-
+ ${this.validationResults.map((result: Validation) => result.category === "enhancement" ?
html`
-
+ ${this.manifestDataLoading ?
+ html`Security Documentation
-
-
+ this.handleShowingTooltip(e)} @open-manifest-editor=${(e: CustomEvent) => this.openManifestEditorModal(e.detail.field, e.detail.tab)}>
+
+
+
`
+ : null )
}
+
+ ${result.valid ? html`` : null}
+
+ ${result.member}
+View Details
-
-
-
- Required
- ${this.securityResults.map((result: TestResult) => result.category === "required" ? - html` -
- ${result.result ? html`` : html``}
-
- ` :
- html``)}
- ${result.infoString}
-
-5. Sign in with a personal Microsoft account. You can create one for free [here.](https://account.microsoft.com/account)
+5. Sign in with a personal Microsoft account. You can create one for free here
6. You will need to accept the promotion terms before you can view your token.
diff --git a/docs/builder/windows.md b/docs/builder/windows.md
index 80ee2e7e5..cf50be6de 100644
--- a/docs/builder/windows.md
+++ b/docs/builder/windows.md
@@ -16,7 +16,7 @@ There are some boxes you'll need to check before your PWA is ready to be publish
- A valid PWA with a web manifest, published to the web and secured through HTTPS
-- A Windows Developer account with Partner Center (which are available for a one-time fee of $19). Create one [here.](https://partner.microsoft.com/en-us/dashboard/account/v3/enrollment/introduction/partnership)
+- A Windows Developer account with Partner Center (which are available for a one-time fee of $19). Create one here
!> If you want in-depth guidance on how to enroll as a Windows Developer, take a look at [this documentation.](https://learn.microsoft.com/en-us/windows/apps/publish/partner-center/open-a-developer-account)
diff --git a/docs/home/benefits-of-pwa.md b/docs/home/benefits-of-pwa.md
index 720f84f6a..7696ba8cf 100644
--- a/docs/home/benefits-of-pwa.md
+++ b/docs/home/benefits-of-pwa.md
@@ -50,7 +50,7 @@ Additionally, PWAs also give the user freedom of choice - to be able to install
In the past, one of the main advantages native app development technology has had over web apps is the ability to integrate with the native platform easily and quickly with built-in APIs. However, with the advent of modern web technology, many integrations that were previously inaccessible from the web are now implemented in most modern Web Browsers (especially those built on Chromium, like Edge or Chrome itself).
-Native features that can be implemented from the web include, but are not limited to:
+App Capabilities that can be implemented from the web include, but are not limited to:
- Push notifications
- Background sync
@@ -58,13 +58,14 @@ Native features that can be implemented from the web include, but are not limite
- Custom file and URL handling
- Integration with hardware devices, like touch screens, microphones, and other sensors
-You can learn about how to add native features to your PWA [here.](/home/native-features/)
+You can learn about how to add native features to your PWA here
### Reliable Offline Experience
Another huge edge that native apps used to have on web apps was offline reliability. Classically, web apps would be rendered nonfunctional without access to the internet. Now, with the development of modern web caching and service worker capabilities, progressive web apps can keep a functional and interactive UI even without connectivity.
-You can learn more about service workers, the force behind PWA offline functionality, [here.](/home/sw-intro/)
+You can learn more about service workers, the force behind PWA offline functionality, here
+
## Next Steps
@@ -77,7 +78,7 @@ Some articles you can check out:
* [Introduction to Service Workers](/home/sw-intro) - A surface level overview of one of the most important pieces to a PWA: the service worker.
-* [Integrating Native Features](/home/native-features/) - A guide to some of the native integrations you can add to your Progressive Web App.
+* [Adding App Capabilities](/home/native-features/) - A guide to some of the native integrations you can add to your Progressive Web App.
### Want to Build Your First PWA?
diff --git a/docs/home/native-features.md b/docs/home/native-features.md
index 7af505ad1..d506a7adb 100644
--- a/docs/home/native-features.md
+++ b/docs/home/native-features.md
@@ -1,8 +1,8 @@
?> **Note:** Stay tuned for new feature instructions as we update and expand this page.
-# Integrating Native Features
+# Adding App Capabilities
-One of the best ways to upgrade your progressive web app is to take advantage of web capabilities to integrate with the user's operating system. Modern web technology has enabled a whole host of ways to make your PWA behave more like a native application and interact seamlessly with the OS.
+One of the best ways to upgrade your progressive web app is to take advantage of web capabilities to integrate with the user's operating system. Modern web technology has enabled a whole host of ways to make your PWA behave more like a application and interact seamlessly with the OS.
This article will showcase how to enable various native functionality for your progressive web app.
@@ -168,7 +168,7 @@ async function shareFiles(filesArray, shareTitle, shareText) {
};
```
-The only primary change here is that we are making a call to `navigator.canShare()` to confirm that the file types we are trying to share are compatible with the Web Share API. You can find a list of supported file types [here.](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#shareable_file_types)
+The only primary change here is that we are making a call to `navigator.canShare()` to confirm that the file types we are trying to share are compatible with the Web Share API. You can find a list of supported file types here
### How to Share *To* Your PWA
@@ -299,7 +299,7 @@ A notification displayed on Windows would look something like this:
Notifications are often displayed in response to `push` event from the back end. A service worker can listen for this event and then display a notification when a push is received.
-?> **Note** For simplicity sake, this guidance will focus on handling `push` from the front end, but you can learn more about the Push API [here.](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07?id=how-to-start-1)
+?> **Note** For simplicity sake, this guidance will focus on handling `push` from the front end, but you can learn more about the Push API here
### Requesting Permission
@@ -332,7 +332,8 @@ self.addEventListener('push', (event) => {
In this snippet we are making a call to `showNotification` and passing in a `title` argument and an object containing further specifications for our notification. In this case, we are sending body text and a custom icon for our notification.
-?> **Note** You can view a list of data you can pass to your Notification [here.](https://developer.mozilla.org/en-US/docs/Web/API/notification)
+?> **Note** You can view a list of data you can pass to your Notification here
+
### Handling Notification Clicks
diff --git a/docs/home/pwa-intro.md b/docs/home/pwa-intro.md
index 009c44c49..124f15c9f 100644
--- a/docs/home/pwa-intro.md
+++ b/docs/home/pwa-intro.md
@@ -1,4 +1,4 @@
-?> **Note** This article assumes a baseline understanding of web development. If you're looking for resources to start your web dev journey, take a look [here.](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)
+?> **Note** This article assumes a baseline understanding of web development. If you're looking for resources to start your web dev journey, take a look here
# Beginner's Guide to Progressive Web Apps
@@ -21,9 +21,9 @@ From a technical perspective, a normal web app only needs a few extra pieces to
### Web App Manifests
A web app manifest (often shortened to web manifest, or even just *manifest*) is a `.json` file that tells the browser that your web app is a progressive web app, and is capable of being installed to the OS.
-The manifest also contains other information about your app, such as the title, theme colors, and description. Your manifest can even enable certain native integrations, such as shortcuts and display modes.
+The manifest also contains other information about your app, such as the title, theme colors, and description. Your manifest can even enable certain app capabilities, such as shortcuts and display modes.
-Learn more [here.](https://developer.mozilla.org/en-US/docs/Web/Manifest)
+Learn more here
### Service Workers
Service workers are a type of [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) that serve as a proxy to the network, intercepting any requests that your PWA may make.
@@ -147,4 +147,4 @@ If you're ready to dive in with building your first PWA, the PWA Starter is a gr
The PWA Starter is a template that comes with a service worker and manifest built in, and allows you to jump right in with your first PWA.
-Check out the Quick Start [here.](/starter/quick-start)
+Check out the Quick Start here
diff --git a/docs/home/pwa-workshop.md b/docs/home/pwa-workshop.md
index 01098e50e..0547273c2 100644
--- a/docs/home/pwa-workshop.md
+++ b/docs/home/pwa-workshop.md
@@ -460,7 +460,7 @@ Let's use Microsoft Store as an example and see how you can submit your app!
-2. You will now be redirected to a login page. Login with your Microsoft account (@hotmail, @outlook, etc.). If you don't have a Microsoft account, you can create one from [here](https://aka.ms/learn-pwa/workshop/outlook.live.com/owa).
+2. You will now be redirected to a login page. Login with your Microsoft account (@hotmail, @outlook, etc.). If you don't have a Microsoft account, you can create one from here
3. Once you are logged in, you should be redirected to Microsoft Partner Center site on Registration - Account Info page. Follow the setup steps to create your account. Select 'Individual' as account type if you plan to submit apps as yourself.
diff --git a/docs/home/resources.md b/docs/home/resources.md
index 1e5e03ca2..1321c8112 100644
--- a/docs/home/resources.md
+++ b/docs/home/resources.md
@@ -6,7 +6,7 @@ If you are looking for more information about building progressive web apps, her
*30 Days of PWA* is a blog series that teaches progressive web app concepts from the very basics to more advanced practices. It's a great place to start if you're looking for a more in depth explanation of PWA concepts.
-You can start from the very beginning [here](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/01), or you can jump into a specifically themed week of content:
+You can start from the very beginning here, or you can jump into a specifically themed week of content:
* [**Week 1 - Core Concepts**](https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/)
diff --git a/docs/home/sw-intro.md b/docs/home/sw-intro.md
index 199d7e567..b2c0d8c8a 100644
--- a/docs/home/sw-intro.md
+++ b/docs/home/sw-intro.md
@@ -52,7 +52,7 @@ Add this snippet to the body of your application's `index.html`:
Let's take a look at a basic service worker that we could add to our PWA.
-We'll step through it in pieces, but you can find the full source code [here.](https://github.com/pwa-builder/PWABuilder/tree/main/docs/assets/code-examples/example-sw.js)
+We'll step through it in pieces, but you can find the full source code here
### Pre-caching During the *Install* Event
@@ -133,7 +133,9 @@ For testing purposes, service workers will function without HTTPS when served fr
If you are unfamiliar with creating certificates to secure an endpoint, you can use an app hosting service that comes with HTTPS enabled by default.
-One option is to use the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/) to host your application with Azure. The PWA Starter template supports the CLI by default, and you can find documentation on publishing the starter with the CLI [here.](/starter/publish?id=azure-static-web-apps)
+One option is to use the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/) to host your application with Azure. The PWA Starter template supports the CLI by default, and you can find documentation on publishing the starter with the CLI
+here
+
## Next Steps
diff --git a/docs/index.html b/docs/index.html
index a26dcffc6..b6c1cd96c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,7 +18,8 @@
-
+
+
diff --git a/docs/release-notes/2022.md b/docs/release-notes/2022.md
index 8149ed44d..4c4c91535 100644
--- a/docs/release-notes/2022.md
+++ b/docs/release-notes/2022.md
@@ -43,7 +43,7 @@ Check here for news on new features and updates on our tooling.
***Meta Quest Release***
-Developers are now able to use PWABuilder to create packages to sideload for Meta Quest. Microsoft's PWABuilder team collaborated with Meta to make PWABuilder the ultimate tool for packaging PWAs for Mixed and Virtual Reality devices. Learn more about the partnership with Meta [here.](https://developer.oculus.com/documentation/web/pwa-building-with-pwabuilder/)
+Developers are now able to use PWABuilder to create packages to sideload for Meta Quest. Microsoft's PWABuilder team collaborated with Meta to make PWABuilder the ultimate tool for packaging PWAs for Mixed and Virtual Reality devices. Learn more about the partnership with Meta here
***Updated Publishing Page***
* Updated and polished styles and UI for publishing flow
@@ -61,7 +61,7 @@ Developers are now able to use PWABuilder to create packages to sideload for Met
* Registering your service worker in your index
* Added new usage analytics
-See full changelog [here.](https://github.com/pwa-builder/pwa-studio/blob/main/CHANGELOG.md)
+See full changelog here
#### Documentation
diff --git a/docs/release-notes/2023.md b/docs/release-notes/2023.md
index d9d1166f4..b8292d1c3 100644
--- a/docs/release-notes/2023.md
+++ b/docs/release-notes/2023.md
@@ -3,6 +3,19 @@
We'll be adding release notes to the PWABuilder suite documentation with every major update.
Check here for news on new features and updates on our tooling.
+## October 16th
+
+### PWABuilder
+
+* Added a new App Capabilities card to help users discover features that can help your PWA feel more native
+* Updated the Service Worker card to match the App Capabilities card
+* Actions items list is now filterable by the indicator pills:
+ * **Red:** required
+ * **Yellow:** optional/recommended
+ * **Purple:** app capability
+* Updated share card to reflect the new rings
+* Security error prompt shows only if there are security problems
+
## September 19th
### PWABuilder CLI
diff --git a/docs/src/menuData.ts b/docs/src/menuData.ts
index f4f3a18d0..a1ee22631 100644
--- a/docs/src/menuData.ts
+++ b/docs/src/menuData.ts
@@ -25,8 +25,8 @@ export const parentMenuData: ParentMenu = {
includeOnHomePage: true
},
{
- pageTitle: "Adding Native Features to Your PWA",
- menuTitle: "Adding Native Features",
+ pageTitle: "Adding App Capabilities to Your PWA",
+ menuTitle: "Adding App Capabilities",
path: "/home/native-features.md",
includeOnHomePage: true
},
diff --git a/docs/starter/publish.md b/docs/starter/publish.md
index a97cb79e0..9b845efc2 100644
--- a/docs/starter/publish.md
+++ b/docs/starter/publish.md
@@ -13,7 +13,7 @@ One option for deploying your PWA is Azure Static Web Apps, and can be set up in
The Azure Static Web Apps CLI is included in the PWA Starter's Node dependencies, and will be installed when you run `npm install`.
-You can check out the Azure SWA CLI website [here.](https://azure.github.io/static-web-apps-cli/)
+You can check out the Azure SWA CLI website here
### Prerequisites:
@@ -42,9 +42,9 @@ npm run deploy
### Next Steps
-To learn more about the SWA CLI, check out their documentation [here.](https://azure.github.io/static-web-apps-cli/)
+To learn more about the SWA CLI, check out their documentation here
-If you want some more general guidance on Azure Static Web Apps, more information can be found [here.](https://docs.microsoft.com/en-us/azure/static-web-apps/)
+If you want some more general guidance on Azure Static Web Apps, more information can be found here
## Github Pages
diff --git a/docs/starter/quick-start.md b/docs/starter/quick-start.md
index cac1e6aaa..1ce056686 100644
--- a/docs/starter/quick-start.md
+++ b/docs/starter/quick-start.md
@@ -56,12 +56,13 @@ Your progressive web app will then open in a new browser window.
## Next Steps
-To learn how to use the CLI in depth, go [here.](/starter/cli-usage)
+To learn how to use the CLI in depth, go here
+
+To learn more about adding content to your PWA, go here
-To learn more about adding content to your PWA, go [here.](/starter/adding-content)
+To learn more about the service worker in the starter, go here
-To learn more about the service worker in the starter, go [here.](/starter/service-worker)
+To learn how to deploy your PWA to the web, go here
-To learn how to deploy your PWA to the web, go [here.](/starter/publish)
+To learn about the technical structure of the starter, go here
-To learn about the technical structure of the starter, go [here.](/starter/tech-overview)
\ No newline at end of file
diff --git a/docs/starter/service-worker.md b/docs/starter/service-worker.md
index 56bf6481e..a32999c29 100644
--- a/docs/starter/service-worker.md
+++ b/docs/starter/service-worker.md
@@ -31,7 +31,7 @@ VitePWA and Workbox will inject our pre-caching information alongside our custom
In this instance, Workbox is injecting this manifest in the last line, where we see the `self.__WB_MANIFEST` placeholder.
It is important to note that your Service Worker file-name should always be `sw.js` so our registration
-code (shown below) can find it. If you change the name of your Service Worker file, be sure to also change the filepath [here](https://github.com/pwa-builder/pwa-starter/blob/main/index.html#L49).
+code (shown below) can find it. If you change the name of your Service Worker file, be sure to also change the filepath here
```html