Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More descriptive "here" text across all docs #4386

Merged
merged 2 commits into from
Sep 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/builder/app-store.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ We'll go through each step in more detail, but the overall process is as follows
#### 1. Sign In To Your Apple Developer Account
To submit your app the iOS App Store, sign-in to your Apple Developer Account.

If you don’t have an Apple Developer account, enroll [here.](https://developer.apple.com/programs/enroll) Enrollment costs $99 USD/year, though non-profits can have this fee waived.
If you don’t have an Apple Developer account, enroll <a href="https://developer.apple.com/programs/enroll" aria-label="Click here to enroll">here</a> Enrollment costs $99 USD/year, though non-profits can have this fee waived.

#### 2. Create a Bundle ID

Expand Down
18 changes: 11 additions & 7 deletions docs/builder/manifest.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ Just like `short_name`, this data should usually align with any store listings.
"background_color": "green"
```

!> PWABuilder expects a HEX color value for this member. You can convert an RGB color value to HEX [here.](https://www.rgbtohex.net/)
!> PWABuilder expects a HEX color value for this member. You can convert an RGB color value to HEX
<a href="https://www.rgbtohex.net/" aria-label="Click here to convert color value">here</a>

### theme_color: `string`

Expand All @@ -79,7 +80,8 @@ Just like `short_name`, this data should usually align with any store listings.
"theme_color": "purple"
```

!> PWABuilder expects a HEX color value for this member. You can convert an RGB color value to HEX [here.](https://www.rgbtohex.net/)
!> PWABuilder expects a HEX color value for this member. You can convert an RGB color value to HEX
<a href="https://www.rgbtohex.net/" aria-label="Click here to convert color value">here</a>

## Settings

Expand Down Expand Up @@ -116,7 +118,8 @@ It has three values to choose from:
```

### lang: `string`
`lang` is an optional member that specifies the primary language of your app. The `Language` member expects a proper subtag for each language, and a list can be found [here.](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
`lang` is an optional member that specifies the primary language of your app. The `Language` member expects a proper subtag for each language, and a list can be found <a href="https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" aria-label="Click here to view list">here</a>


```json
"lang": "en"
Expand Down Expand Up @@ -178,7 +181,8 @@ In addition to the four display values above, `display_override` can also take t
`iarc_rating_id` is an optional member that allows you to specify a suitable age range for their application. A rating ID is obtained by answering a questionnaire about an application, and then providing the associated ID for that application.


You can read more about IARC [here.](https://www.globalratings.com/how-iarc-works.aspx)
You can read more about IARC <a href="https://www.globalratings.com/how-iarc-works.aspx" aria-label="Click here to read more">here</a>


```json
"iarc_rating_id": "e58c174a-81d2-5c3c-32cc-34b8de4a52e9"
Expand Down Expand Up @@ -257,16 +261,16 @@ The `shortcuts` member is an array of `shortcut` objects, which can contain the

### categories: `Array`

`categories` is an optional member that specifies an array of categories that the application belongs to. Though this array isn't limited to specific values, you can find a list of known categories [here.](https://github.com/w3c/manifest/wiki/Categories)
`categories` is an optional member that specifies an array of categories that the application belongs to. Though this array isn't limited to specific values, you can find a list of known categories
<a href="https://github.com/w3c/manifest/wiki/Categories" aria-label="Click here to read more">here</a>

```json
"categories": ["games", "finance", "navigation"]
```

### edge_side_panel: `Object`

`edge_side_panel` is an optional member that specifies whether or not your app supports the side panel view in Microsoft Edge. The side panel provides an alternative view that allows your app to display UI in a manner conducive to side-by-side browsing. You can learn more about side panel use cases [here.](https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar#enable-sidebar-support-in-your-pwa)

`edge_side_panel` is an optional member that specifies whether or not your app supports the side panel view in Microsoft Edge. The side panel provides an alternative view that allows your app to display UI in a manner conducive to side-by-side browsing. You can learn more about side panel use cases <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar#enable-sidebar-support-in-your-pwa" aria-label="Click here to learn more">here</a>
You can also specify the `preferred_width` member as part of your `edge_side_panel` specification.

```json
Expand Down
19 changes: 10 additions & 9 deletions docs/builder/meta.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
# Packaging PWAs for Meta Quest

PWABuilder’s support for Meta Quest utilizes the [CLI tool published by Meta](https://developer.oculus.com/documentation/web/pwa-packaging/) to generate an apk package that can be installed on a Meta Quest.
PWABuilder’s support for Meta Quest utilizes the <a href="https://developer.oculus.com/documentation/web/pwa-packaging/" aria-label="click here to view CLI tool">CLI tool published by Meta</a> to generate an apk package that can be installed on a Meta Quest.

## Prerequisites

We strongly recommend reading Meta's documentation on PWAs:
- [Overview of PWA support on Meta Quest](https://developer.oculus.com/pwa/)
- <a href="https://developer.oculus.com/pwa" aria-label="click here to read PWA support on Meta Quest">Overview of PWA support on Meta Quest</a>


You will need:
* A valid PWA with a web manifest, published to the web and secured through HTTPS
* A Meta Quest for sideloading and testing
* An Oculus Developer Account and Device Setup (follow instructions [here](https://developer.oculus.com/documentation/native/android/mobile-device-setup/))
* An Oculus Developer Account and Device Setup <a href="https://developer.oculus.com/documentation/native/android/mobile-device-setup/" aria-label="Click this link to follow instructions">here</a>

## Packaging

The first step is to generate your .apk package with PWABuilder.

1. Navigate to [pwabuilder.com](https://pwabuilder.com).
1. Navigate to <a href="https://pwabuilder.com" aria-label="Click this link to visit pwabuilder.com">pwabuilder.com</a>.

2. Enter the URL of your PWA on the homepage.

Expand Down Expand Up @@ -67,19 +68,19 @@ In order to test your PWA, you'll need:

- Verify your Quest software is up-to-date. Turn on your Quest device and open `Settings` -> `System` -> `Software Update`. Your software version should be 31 or greater.

- Make sure your device is setup and your developer account is enabled according to the documentation [here](https://developer.oculus.com/documentation/native/android/mobile-device-setup/).
- Make sure your device is setup and your developer account is enabled according to the documentation <a href="https://developer.oculus.com/documentation/native/android/mobile-device-setup/" aria-label="Click this link to follow instructions">here</a>.


Once you have checked off all the prerequisites, follow the instructions [here](https://developer.oculus.com/documentation/web/pwa-packaging/#sideload-your-pwa-to-test) to sideload and test your app on your Meta Quest!
Once you have checked off all the prerequisites, follow the instructions <a href="https://developer.oculus.com/documentation/web/pwa-packaging/#sideload-your-pwa-to-test)" aria-label="Click this link to follow instructions">here</a> to sideload and test your app on your Meta Quest!

## Next Steps

Progressive web apps are cross-platform and can be used anywhere!

After you've successfully packaged your app for Meta Quest, you can package and publish for other platforms:

- [How to Package for the App Store](/builder/app-store)
- <a href="/builder/app-store" aria-label="Click this link to learn how">How to Package for the App Store</a>

- [How to Package for Microsoft Store](/builder/windows)
- <a href="/builder/windows" aria-label="Click this link to learn how">How to Package for Microsoft Store</a>

- [How to Package for the Google Play Store](/builder/android)
- <a href="/builder/android" aria-label="Click this link to learn how">How to Package for the Google Play Store</a>
5 changes: 3 additions & 2 deletions docs/builder/store-promotion.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ For a limited time, PWABuilder is offering free Microsoft Store Developer accoun
To qualify for a free Microsoft Store developer account, you must:

* own a PWA that is installable, contains all required manifest fields, and implements at least two desktop enhancements. See our [Beginner's Guide to Progressive Web Apps](/home/pwa-intro) for more info.
* live in a country or region where the Windows program in Partner Center is offered. See [here](https://learn.microsoft.com/en-us/windows/apps/publish/partner-center/account-types-locations-and-fees#developer-account-and-app-submission-markets) for the full list of countries
* live in a country or region where the Windows program in Partner Center is offered. See
<a href="https://learn.microsoft.com/en-us/windows/apps/publish/partner-center/account-types-locations-and-fees#developer-account-and-app-submission-markets" aria-label="Click here for the full list of countries">here</a>
* have a valid Microsoft Account to use to sign up for the Microsoft Store on Windows developer account
* not have an existing Microsoft Store on Windows individual developer/publisher account
* use the Store Token to create a Microsoft Store on Windows developer account within 30 calendar days of Microsoft sending you the token, using the same Microsoft Account you used to sign in here
Expand All @@ -33,7 +34,7 @@ Before you can get started claiming a token, make sure you have a valid, public
<img src="/assets/builder/store-promotion/tests-passed.png" alt="The success screen on the PWABuilder token promotion page.">
</div>

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 <a href="https://account.microsoft.com/account" aria-label="Click here to follow instructions">here</a>

6. You will need to accept the promotion terms before you can view your token.

Expand Down
2 changes: 1 addition & 1 deletion docs/builder/windows.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://partner.microsoft.com/en-us/dashboard/account/v3/enrollment/introduction/partnership" aria-label="Click here to follow instructions">here</a>

!> 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)

Expand Down
5 changes: 3 additions & 2 deletions docs/home/benefits-of-pwa.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="/home/native-features/" aria-label="Click here to learn more">here</a>

### 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, <a href="/home/sw-intro/" aria-label="Click here to learn more">here</a>


## Next Steps

Expand Down
7 changes: 4 additions & 3 deletions docs/home/native-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#shareable_file_types" aria-label="Click here to learn more">here</a>

### How to Share *To* Your PWA

Expand Down Expand Up @@ -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 <a href="https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/advanced-capabilities/07?id=how-to-start-1" aria-label="Click here to learn more">here</a>

### Requesting Permission

Expand Down Expand Up @@ -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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/notification" aria-label="Click here to learn more">here</a>


### Handling Notification Clicks

Expand Down
6 changes: 3 additions & 3 deletions docs/home/pwa-intro.md
Original file line number Diff line number Diff line change
@@ -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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web" aria-label="Click here to learn more">here</a>

# Beginner's Guide to Progressive Web Apps

Expand All @@ -23,7 +23,7 @@ A web app manifest (often shortened to web manifest, or even just *manifest*) is

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.

Learn more [here.](https://developer.mozilla.org/en-US/docs/Web/Manifest)
Learn more <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" aria-label="Click here to learn more">here</a>

### 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.
Expand Down Expand Up @@ -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 <a href="/starter/quick-start" aria-label="Click here to follow instructions">here</a>
2 changes: 1 addition & 1 deletion docs/home/pwa-workshop.md
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ Let's use Microsoft Store as an example and see how you can submit your app!
<img src="assets/home/workshop/7-store-register.png" alt="Register as Windows developer">
</div>

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 <a href="https://aka.ms/learn-pwa/workshop/outlook.live.com/owa" aria-label="Click here to follow instructions">here</a>

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.

Expand Down
2 changes: 1 addition & 1 deletion docs/home/resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://microsoft.github.io/win-student-devs/#/30DaysOfPWA/core-concepts/01" aria-label="Click here to follow instructions">here</a>, 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/)

Expand Down
6 changes: 4 additions & 2 deletions docs/home/sw-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://github.com/pwa-builder/PWABuilder/tree/main/docs/assets/code-examples/example-sw.js" aria-label="Click here to learn more">here</a>

### Pre-caching During the *Install* Event

Expand Down Expand Up @@ -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
<a href="/starter/publish?id=azure-static-web-apps" aria-label="Click here to follow instructions">here</a>



## Next Steps
Expand Down
Loading