PWA relative links

files/en-us/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md

@@ -340,6 +340,6 @@ Before moving on, [comment](/en-US/docs/Learn_web_development/Core/Structuring_c
 
 Before adding the [JavaScript functionality](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) to convert this static content into a web app and then enhancing it into a progressive web app with a [manifest file](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) and [service worker](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), we'll [create a local development environment](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) to view our progress.
 
-Until then, you can view the [static CycleTracker shell](https://mdn.github.io/pwa-examples/cycletracker/html_and_css/) and download the [CycleTracker HTML and CSS source code](https://github.com/mdn/pwa-examples/tree/main/cycletracker/html_and_css) from GitHub.
+Until then, you can view the [static CycleTracker shell](https://mdn.github.io/pwa-examples/cycletracker/html_and_css/). You can also download the [CycleTracker HTML and CSS source code](https://github.com/mdn/pwa-examples/tree/main/cycletracker/html_and_css) in it's current, non-functional state from GitHub, before moving on to the next steps.
 
 {{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}}

files/en-us/web/progressive_web_apps/tutorials/cycletracker/manifest_file/index.md

@@ -17,7 +17,7 @@ A minimalist manifest file for our menstrual cycle tracking app could look like
 ```json
 {
   "short_name": "CT",
-  "start_url": "/",
+  "start_url": "./",
   "icons": [
     {
       "src": "icon-512.png",
@@ -83,7 +83,7 @@ Add presentation definitions to the manifest file you began creating in the prev
 
 ### Example solution
 
-As the example application is a single page, we can use `"/"` as the `start_url`, or omit the member altogether. For that same reason, we can display the app without the browser UI by setting the `display` to `standalone`.
+As the example application is a single page in a subdirectory, we can use `"./"` as the `start_url`, or omit the member altogether. For that same reason, we can display the app without the browser UI by setting the `display` to `standalone`.
 
 In [our CSS](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS#css_content), the `background-color: #eeffee;` is set on the `body` element selector. We use `#eeffee` to ensure a smooth transition from placeholder appearance to app load.
 
@@ -92,7 +92,7 @@ In [our CSS](/en-US/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_an
   "name": "...",
   "short_name": "...",
   "description": "...",
-  "start_url": "/",
+  "start_url": "./",
   "theme_color": "#eeffee",
   "background_color": "#eeffee",
   "display": "standalone"

files/en-us/web/progressive_web_apps/tutorials/cycletracker/service_workers/index.md

@@ -82,15 +82,17 @@ We include the static resources created in other sections of this tutorial that
 const VERSION = "v1";
 
 const APP_STATIC_RESOURCES = [
-  "/",
-  "/index.html",
-  "/style.css",
-  "/app.js",
-  "/cycletracker.json",
-  "/icons/wheel.svg",
+  "./",
+  "./index.html",
+  "./style.css",
+  "./app.js",
+  "./cycletracker.json",
+  "./icons/wheel.svg",
 ];
 ```
 
+As we are storing the PWA in a GitHub subdirectory, we prefix the paths with a `./` rather than linking to resources at the root with `/`.
+
 We included the `wheel.svg` icon, even though our current application doesn't use it, in case you are enhancing the PWA UI, such as displaying the logo when there is no period data.
 
 ### Application cache name
@@ -131,7 +133,7 @@ self.addEventListener("install", (e) => {
   e.waitUntil(
     (async () => {
       const cache = await caches.open("cacheName_identifier");
-      cache.addAll(["/", "/index.html", "/style.css", "/app.js"]);
+      cache.addAll(["./", "./index.html", "./style.css", "./app.js"]);
     })(),
   );
 });
@@ -204,7 +206,7 @@ self.addEventListener("fetch", (event) => {
   // when seeking an HTML page
   if (event.request.mode === "navigate") {
     // Return to the index.html page
-    event.respondWith(caches.match("/"));
+    event.respondWith(caches.match("./"));
     return;
   }
 
@@ -237,11 +239,11 @@ const CACHE_NAME = `period-tracker-${VERSION}`;
 
 // The static resources that the app needs to function.
 const APP_STATIC_RESOURCES = [
-  "/",
-  "/index.html",
-  "/app.js",
-  "/style.css",
-  "/icons/wheel.svg",
+  "./",
+  "./index.html",
+  "./app.js",
+  "./style.css",
+  "./icons/wheel.svg",
 ];
 
 // On install, cache the static resources
@@ -277,7 +279,7 @@ self.addEventListener("activate", (event) => {
 self.addEventListener("fetch", (event) => {
   // As a single page app, direct app to always go to cached home page.
   if (event.request.mode === "navigate") {
-    event.respondWith(caches.match("/"));
+    event.respondWith(caches.match("./"));
     return;
   }
 
@@ -297,6 +299,9 @@ self.addEventListener("fetch", (event) => {
 });
 ```
 
+> [!NOTE]
+> If your PWA's main page is at the root of your site, you can use `/` instead of `./` for the array of resources (`APP_STATIC_RESOURCES`) and the fetch response (`match("/"`).
+
 When updating a service worker, the VERSION constant doesn't need to be updated, as any change in the content of the service worker script itself will trigger the browser to install the new service worker. However, it is a good practice to update the version number as it makes it easier for devs, including yourself, to see which version of the service worker is currently running in the browser, by [checking the name of the Cache in the Application tool](#with_developer_tools) (or Sources tool).
 
 > [!NOTE]