diff --git a/docs/builder/app-store.md b/docs/builder/app-store.md index c9568abb7..e19c147cf 100644 --- a/docs/builder/app-store.md +++ b/docs/builder/app-store.md @@ -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 here Enrollment costs $99 USD/year, though non-profits can have this fee waived. #### 2. Create a Bundle ID diff --git a/docs/builder/manifest.md b/docs/builder/manifest.md index 7bc374f7e..661f5eadb 100644 --- a/docs/builder/manifest.md +++ b/docs/builder/manifest.md @@ -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 +here ### theme_color: `string` @@ -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 +here ## Settings @@ -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 here + ```json "lang": "en" @@ -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 here + ```json "iarc_rating_id": "e58c174a-81d2-5c3c-32cc-34b8de4a52e9" @@ -257,7 +261,8 @@ 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 +here ```json "categories": ["games", "finance", "navigation"] @@ -265,8 +270,7 @@ The `shortcuts` member is an array of `shortcut` objects, which can contain the ### 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 here You can also specify the `preferred_width` member as part of your `edge_side_panel` specification. ```json diff --git a/docs/builder/meta.md b/docs/builder/meta.md index 8fccb8f68..bda141f94 100644 --- a/docs/builder/meta.md +++ b/docs/builder/meta.md @@ -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 CLI tool published by Meta 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/) +- Overview of PWA support on Meta Quest + 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 here ## Packaging The first step is to generate your .apk package with PWABuilder. -1. Navigate to [pwabuilder.com](https://pwabuilder.com). +1. Navigate to pwabuilder.com. 2. Enter the URL of your PWA on the homepage. @@ -67,10 +68,10 @@ 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 here. -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 here to sideload and test your app on your Meta Quest! ## Next Steps @@ -78,8 +79,8 @@ 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) +- How to Package for the App Store -- [How to Package for Microsoft Store](/builder/windows) +- How to Package for Microsoft Store -- [How to Package for the Google Play Store](/builder/android) \ No newline at end of file +- How to Package for the Google Play Store diff --git a/docs/builder/store-promotion.md b/docs/builder/store-promotion.md index 5232f4491..78c5ef420 100644 --- a/docs/builder/store-promotion.md +++ b/docs/builder/store-promotion.md @@ -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 + here * 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 @@ -33,7 +34,7 @@ Before you can get started claiming a token, make sure you have a valid, public The success screen on the PWABuilder token promotion page. -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..0bf00023c 100644 --- a/docs/home/benefits-of-pwa.md +++ b/docs/home/benefits-of-pwa.md @@ -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 diff --git a/docs/home/native-features.md b/docs/home/native-features.md index 7af505ad1..57973dd4b 100644 --- a/docs/home/native-features.md +++ b/docs/home/native-features.md @@ -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..4d0bf1b1b 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 @@ -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 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! Register as Windows developer -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/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/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..0c4ef291c 100644 --- a/docs/starter/quick-start.md +++ b/docs/starter/quick-start.md @@ -56,12 +56,12 @@ 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.](/starter/tech-overview) \ No newline at end of file +To learn about the technical structure of the starter, go here \ No newline at end of file diff --git a/docs/starter/service-worker.md b/docs/starter/service-worker.md index 3f9bbb3ef..f45ab0ef8 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#L38). +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