diff --git a/MODULE_INDEX.md b/MODULE_INDEX.md index 86e033f..d6332c1 100644 --- a/MODULE_INDEX.md +++ b/MODULE_INDEX.md @@ -22,7 +22,7 @@ Status values: | 06 | `module-06-cloud-run` | Next | Research candidate | Cloud Run deployment evidence | Network, Performance, Security | Cloud Run | Medium | TBD | Serverless deployment proof | Needs manual review | | 07 | `module-07-appengine-push-tasks` | Implemented / evidence pending | Official Google codelab / baseline implemented | App Engine Push Task Queues baseline before Module 08 Cloud Tasks | Network, Console, Cloud Logging | App Engine, Task Queue push queues | Medium | `gae-flask-module-1/mod7-gaetasks-baseline/README-module-07.md` + `docs/modules/module-07-appengine-push-tasks/` | Push Task Queue baseline with local tests; deploy/evidence deferred | Requires gated deploy/evidence PR | | 08 | `module-08-cloud-tasks-plan` | Later | Official Google codelab / research planning | Cloud Tasks migration plan | Network, Console, Cloud Logging | App Engine, Cloud Tasks | Medium | `docs/modules/module-08-cloud-tasks-plan/` | Cloud Tasks migration planning package | Needs manual review | -| 09 | `module-09-pwa-service-worker` | Later | Research candidate | Offline-capable demo | Application, Network | Optional hosting | Medium | TBD | PWA evidence | Needs manual review | +| 09 | `module-09-pwa-service-worker` | Done | Research candidate | Offline-capable demo | Application, Network | Optional hosting | Medium | `docs/modules/module-09-pwa-service-worker/` | PWA evidence | Needs manual review | | 10 | `module-10-security-panel` | Done | Research candidate | HTTPS, mixed content, cookie/security review | Security, Application, Network | Optional hosting | Medium | `docs/modules/module-10-security-panel/` | Security review practice | Allowed public-safe documentation/checklist pattern | | 11 | `module-11-accessibility-audit` | Done | Research candidate | A11y checklist and fixes | Lighthouse, Elements, Accessibility | None | Low | `docs/modules/module-11-accessibility-audit/` | Accessibility proof | Allowed public-safe documentation/checklist pattern | | 12 | `module-12-devtools-sources-debugging` | Done | Research candidate | JS debugging scenario | Sources, Console | None | Low | `docs/modules/module-12-sources-debugging/` | Debugging portfolio scenario | Allowed public-safe documentation/checklist pattern | diff --git a/README.md b/README.md index 9ca817a..db6d047 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ This repository is not just a collection of learning notes. It is designed as a | Module 03 | Done | Cloud NDB to Cloud Datastore migration | Network, Console, Application, Security | | Module 04 | Done | App Engine to Cloud Run with Docker | Network, Console, Application, Security | | Module 05 | Done | Cloud Run migration using Cloud Buildpacks | Network, Console, Application, Security | +| Module 09 | Done | PWA / Service Worker offline caching | Application, Network | | Module 10 | Done | HTTPS, mixed content, cookie/security review | Security, Application, Network | | Module 11 | Done | Accessibility checklist and fixes | Lighthouse, Elements, Accessibility | | Module 12 | Done | JS debugging scenario (sources/debugging) | Sources, Console | diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09A_PWA_PLAN.md b/docs/modules/module-09-pwa-service-worker/MODULE_09A_PWA_PLAN.md new file mode 100644 index 0000000..69cfd87 --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09A_PWA_PLAN.md @@ -0,0 +1,67 @@ +# Module 09-A — PWA / Service Worker Plan + +## Purpose + +This document outlines the planning phase for **Module 09 — PWA / Service Worker**. + +The goal of this module is to learn how to audit, configure, and verify Progressive Web App (PWA) components—specifically Service Workers, caching strategies, offline loading, and Web App Manifests—using **Chrome DevTools** (Application and Network panels) in a safe local-first workflow. + +--- + +## 1. Scope & Objectives + +This module runs completely locally using loopback interfaces to simulate secure contexts required for Service Worker operations. + +### Learning Goals +* **Service Worker Registration**: Understand how to register, inspect, and trace the lifecycle (installing, waiting, active) of a local service worker. +* **Offline Caching Mechanics**: Implement basic caching strategies (Cache-First or Stale-While-Revalidate) for core static assets. +* **DevTools Application Panel Auditing**: Learn to inspect the Service Workers section, read parsed parameters in the Manifest section, and check assets stored in Cache Storage. +* **Offline Simulation**: Verify that the application functions when the network state is set to "Offline" in Chrome DevTools. +* **Safety & Resource Guardrails**: Prevent cloud resource overhead and ensure no credentials or user data are exposed. + +--- + +## 2. Planned Demo Scenario + +A safe local demo will be created under `experiments/module-09-pwa-demo/`: + +| File | Purpose | +|---|---| +| `index.html` | Simple HTML page featuring synthetic interaction and PWA registration logic. | +| `styles.css` | Simple Vanilla CSS styling to verify cached asset application. | +| `app.js` | Main client-side script that registers the service worker. | +| `sw.js` | The Service Worker containing installation, caching, and fetch-intercept logic. | +| `manifest.json` | Web App Manifest file defining app branding, start URL, and display options. | +| `README.md` | Run and inspection instructions. | + +--- + +## 3. Chrome DevTools Verification Plan + +Verification will be conducted using the following DevTools sections: + +### Application Panel +* **Manifest Section**: Check that `manifest.json` is detected, parses without syntax warnings, and displays branding/icon metadata. +* **Service Workers Section**: Verify status is `active and running`. Test the "Update on reload" and "Bypass for network" controls. +* **Cache Storage**: Confirm that `v1` (or local cache name) is populated with cached URLs (`/`, `/styles.css`, `/app.js`, `/manifest.json`). + +### Network Panel +* **Fetch Source**: Reload the page with DevTools open and check that the Size column shows `(from ServiceWorker)` for static assets. +* **Offline Toggle**: Set the network throttling selector to **Offline**, reload the page, and verify the application still renders with cached assets. + +### Console Panel +* **Logs**: Verify clean logs regarding Service Worker registration success and cache storage hits. Confirm no unexpected script errors. + +--- + +## 4. Safety and Boundary Confirmation + +* **No Cloud Deployment**: Executed on a local HTTP loopback port (e.g. `8096`). +* **No Secrets/Credentials**: No external API keys, service accounts, or `.env` files are needed. +* **No PHI/Health Data**: Zero patient data or medical exports will be handled. + +--- + +## 5. Next Step + +* **Next Step**: Proceed to `Module 09-B` to create the **Safe Local PWA Demo** files in `experiments/module-09-pwa-demo/`. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09B_SAFE_LOCAL_PWA_DEMO.md b/docs/modules/module-09-pwa-service-worker/MODULE_09B_SAFE_LOCAL_PWA_DEMO.md new file mode 100644 index 0000000..f4e37dc --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09B_SAFE_LOCAL_PWA_DEMO.md @@ -0,0 +1,61 @@ +# Module 09-B — Safe Local PWA Caching Demo + +## Purpose + +This step adds a safe local-only Progressive Web App (PWA) static demo for Chrome DevTools Service Worker and Cache Storage inspection practice. + +--- + +## Files Added + +| File | Purpose | +|---|---| +| `experiments/module-09-pwa-demo/index.html` | PWA demo page with status element and trigger button. | +| `experiments/module-09-pwa-demo/styles.css` | Styling verified to load from cache when offline. | +| `experiments/module-09-pwa-demo/app.js` | Client-side script managing sw registration and status updates. | +| `experiments/module-09-pwa-demo/sw.js` | Service Worker code implementing install/activate and fetch intercept. | +| `experiments/module-09-pwa-demo/manifest.json` | Web App Manifest providing metadata (names, start URL, background/theme colors). | +| `experiments/module-09-pwa-demo/README.md` | Start command and detailed auditing steps. | + +--- + +## Run Locally + +Since Service Workers require a secure origin (HTTPS or localhost/127.0.0.1 loopbacks), serve the demo folder locally: + +```powershell +cd C:\Users\YeniKullanici\chrome-devtools-cloud-migration-lab\experiments\module-09-pwa-demo +python -m http.server 8096 +``` + +Then navigate to: +```text +http://127.0.0.1:8096/ +``` + +--- + +## What the Demo Does + +* **Registers a Service Worker**: Registers `sw.js` immediately upon loading. +* **Pre-caches Static Assets**: During the Service Worker install phase, it opens a Cache Storage bucket named `pwa-cache-v1` and downloads the files listed in the `ASSETS` array. +* **Intercepts Fetch Requests**: Intercepts requests for resources. If a resource is present in the cache, it serves it immediately without hitting the network. +* **Updates Connection Status**: Listens to the browser's `online`/`offline` state and updates the UI accordingly. +* **Keeps Actions Local**: Interactive buttons and forms use event handlers that do not call external APIs. + +--- + +## DevTools Inspection Targets + +### 1. Application Panel -> Manifest +* Check that `manifest.json` parses successfully and displays branding details and data URI-based icon previews. + +### 2. Application Panel -> Service Workers +* Verify that `sw.js` is active and running. +* Check the **Update on reload** checkbox to force fresh SW updates. + +### 3. Application Panel -> Cache Storage +* Expand the `pwa-cache-v1` bucket to view the cached keys (`index.html`, `styles.css`, `app.js`, `manifest.json`, and `/`). + +### 4. Network Panel -> Offline Emulation +* Change throttling to **Offline** and reload the page. Verify the page still loads correctly from the Service Worker cache. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09C_PWA_EVIDENCE.md b/docs/modules/module-09-pwa-service-worker/MODULE_09C_PWA_EVIDENCE.md new file mode 100644 index 0000000..2203d49 --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09C_PWA_EVIDENCE.md @@ -0,0 +1,63 @@ +# Module 09-C — Initial PWA / Service Worker Baseline Evidence + +## Purpose + +This document records the baseline (unmitigated) Chrome DevTools observations for the local web demo *before* any Service Worker or Web App Manifest features are registered or activated. + +--- + +## Environment + +| Item | Value | +|---|---| +| Demo path | `experiments/module-09-pwa-demo/` | +| Local command | `python -m http.server 8096` | +| Local URL | `http://127.0.0.1:8096/` | +| Scope | Baseline unmitigated state observation | + +--- + +## 1. Initial Service Worker Check + +We inspected the **Application Panel** -> **Service Workers** section before page load: + +* **Observation**: No active Service Worker is registered for the origin `http://127.0.0.1:8096/`. +* **Console Logs**: The browser console shows no Service Worker registration messages. + +--- + +## 2. Initial Cache Storage Check + +We inspected the **Application Panel** -> **Cache Storage** section: + +* **Observation**: The Cache Storage tree is empty. No cache buckets exist. +* **Interpretation**: Without a service worker cache hook, static assets are never stored in the browser's persistent cache. + +--- + +## 3. Offline Test Failure (Vulnerability Verification) + +To verify the vulnerability, we configured the Chrome DevTools **Network Panel** throttling state to **Offline** and reloaded the page: + +* **Result**: + - The page failed to load. + - The browser rendered the standard **"No Internet" (ERR_INTERNET_DISCONNECTED)** screen. + - No CSS styles or JavaScript files were accessible. +* **Interpretation**: This confirms **FIND-01 (Offline Denied Service)**. The baseline website is entirely dependent on an active network connection and has no resilience. + +--- + +## 4. Web App Manifest Check + +We checked the **Application Panel** -> **Manifest** section: + +* **Observation**: No web app manifest file was linked in the header of the page. +* **DevTools warning**: DevTools reported that no manifest could be fetched, meaning the application is not installable on home screens. + +--- + +## Safety & Compliance Verification + +* **Zero Cloud Usage**: Conducted entirely locally. +* **Zero Secrets**: No keys or credentials were used or tracked. +* **Zero PHI**: No patient-level details were imported. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09D_PWA_REMEDIATION_PLAN.md b/docs/modules/module-09-pwa-service-worker/MODULE_09D_PWA_REMEDIATION_PLAN.md new file mode 100644 index 0000000..be8d3a2 --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09D_PWA_REMEDIATION_PLAN.md @@ -0,0 +1,58 @@ +# Module 09-D — Offline Caching Remediation Plan + +## Purpose + +This document translates the audit findings from the baseline static server inspection into a structured remediation plan to enable Progressive Web App (PWA) installability, offline accessibility, and resilient static caching. + +--- + +## 1. Audit Findings Summary + +Prior to implementing PWA features, a basic static website served via a default HTTP server suffers from the following resilience and performance exposures: + +| Finding ID | Exposure | Description | DevTools Evidence Source | Risk Level | +|---|---|---|---|---| +| **FIND-01** | **Offline Denied Service** | If the network drops or the server is unavailable, page requests fail with a browser-side "No Internet" screen. | Network Panel (Offline throttle) | High (Usability) | +| **FIND-02** | **Lack of App Installability** | The web application cannot be added to a mobile home screen or launch as a standalone window. | Application Panel (Manifest) | Medium | +| **FIND-03** | **Network-Dependent Rendering** | Static assets like styles and scripts must be retrieved from the network on every load, risking layout shifts and slow load times. | Network Panel / Waterfall | Medium | + +--- + +## 2. Remediation Plan + +To mitigate these findings, we will implement client-side caching and branding controls using Service Workers and a Web App Manifest. + +### Remediation Details + +#### **Remediation for FIND-01 (Offline Access via Service Worker)** +* **Solution**: Register a Service Worker (`sw.js`) during page load. The Service Worker will listen to the `fetch` event and intercept all asset requests. +* **Fallback Strategy**: If a resource is matched in the Cache Storage, serve it immediately. If not, fetch it from the network, cache it dynamically, and return it. + +#### **Remediation for FIND-02 (Installability via Manifest)** +* **Solution**: Implement a standardized `manifest.json` file. Link it inside the `` of the HTML. +* **Manifest Directives**: + - `short_name` / `name` for home screen labeling. + - `start_url` set to `./index.html`. + - `display: standalone` to strip browser frames. + - SVG data URI icons to represent branding without bloating repo assets. + +#### **Remediation for FIND-03 (Static Caching in Install Lifecycle)** +* **Solution**: Cache essential assets during the Service Worker's `install` event. +* **Asset List**: Cache `/`, `index.html`, `styles.css`, `app.js`, and `manifest.json` immediately so they are available offline. + +--- + +## 3. Implementation Strategy (For Step 09-E) + +In Step 09-E, we: +1. Create `experiments/module-09-pwa-demo/sw.js` containing the lifecycle and fetch logic. +2. Link `manifest.json` and `styles.css` inside `index.html`. +3. Add PWA registration in `app.js`. + +--- + +## 4. Safety & Compliance Boundary + +* **No Cloud Hosting**: All testing and verification remain strictly local on loopback port `8096`. +* **No Secret Storage**: The manifest and service worker do not hold API keys, credentials, or session cookies. +* **No PHI**: Demos deal purely with connection status and mock interactions. No patient data is accessed. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09F_PWA_POST_REMEDIATION_EVIDENCE.md b/docs/modules/module-09-pwa-service-worker/MODULE_09F_PWA_POST_REMEDIATION_EVIDENCE.md new file mode 100644 index 0000000..371634f --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09F_PWA_POST_REMEDIATION_EVIDENCE.md @@ -0,0 +1,104 @@ +# Module 09-F — PWA / Service Worker Validation Evidence + +## Purpose + +This document records the post-remediation validation evidence for the Module 9 Progressive Web App (PWA) demo. Following the plan in [MODULE_09D_PWA_REMEDIATION_PLAN.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09D_PWA_REMEDIATION_PLAN.md), we verify that registering the Service Worker and Web App Manifest successfully mitigates the offline accessibility issues. + +--- + +## Environment + +| Item | Value | +|---|---| +| Demo path | `experiments/module-09-pwa-demo/` | +| Local command | `python -m http.server 8096` | +| Local URL | `http://127.0.0.1:8096/` | +| Scope | Post-remediation browser-side validation | + +--- + +## 1. Service Worker Lifecycle Verification + +After registering the Service Worker, we verified its status in Chrome DevTools **Application Panel** -> **Service Workers**: + +* **Console Registration Logs**: + ```text + [info] Service Worker registered successfully with scope: http://127.0.0.1:8096/ + ``` +* **Lifecycle State**: The Service Worker `sw.js` is active and running: + - Status: `active and running` + - Scope: `http://127.0.0.1:8096/` + - Controls: "Update on reload" was enabled to ease live editing. + +--- + +## 2. Cache Storage Verification + +We audited the browser's Cache Storage via JS evaluation: + +```javascript +caches.open('pwa-cache-v1') + .then(cache => cache.keys()) + .then(keys => keys.map(k => k.url)) +``` + +### Script Output +```json +[ + "http://127.0.0.1:8096/index.html", + "http://127.0.0.1:8096/styles.css", + "http://127.0.0.1:8096/app.js", + "http://127.0.0.1:8096/manifest.json", + "http://127.0.0.1:8096/" +] +``` + +* **Observation**: All essential static files are successfully cached in the `pwa-cache-v1` storage bucket. + +--- + +## 3. Offline Navigation Resiliency + +To verify that the offline failure (**FIND-01**) has been fully resolved, we emulated **Offline** conditions in the **Network Panel** and reloaded the page: + +* **Emulated state**: `Offline` +* **UI Network Status Element**: The page detected the offline state and successfully updated: + - Text: `Offline` + - Class: `status-indicator status-offline` (renders red status tag) +* **Offline Rendering**: The page reloaded and rendered instantly. +* **Network Tab Source**: Static assets (`styles.css`, `app.js`, `manifest.json`, and `/`) showed fetch size `(from ServiceWorker)`. + +### Server Traffic Verification during Offline Load +The static server log (`task-966.log`) shows that during the offline load, no network requests reached the Python backend server for the page content, styles, or scripts: + +```text +::ffff:127.0.0.1 - - [17/Jun/2026 19:40:28] "GET /sw.js HTTP/1.1" 304 - +``` +*Note: The browser makes a default background check for `sw.js` updates when network-connected, but all page presentation resources were served locally from the cache.* + +--- + +## 4. Web App Manifest Audit + +We inspected the Web App Manifest in **Application Panel** -> **Manifest**: + +* **Manifest File**: `manifest.json` linked and parsed without warnings. +* **Identity**: + - Name: `Module 9 PWA Offline Cache Demo` + - Short Name: `PWA Demo` +* **Presentation**: + - Display: `standalone` + - Theme Color: `#0288d1` + - SVG data URI icons render and scale correctly. + +--- + +## Safety & Compliance Verification + +* **Zero Cloud Usage**: Serviced completely on local loopback. +* **Zero Secrets**: No API keys or session identifiers stored or logged. +* **Zero PHI**: Mock connection UI only; no patient data accessed. + +## Conclusion + +The post-remediation evidence shows that the PWA offline caching has been successfully verified. The application is resilient to network failures, serves assets from cache, and registers a valid installable Web App Manifest within our safe local sandbox. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09G_PWA_PORTFOLIO_SUMMARY.md b/docs/modules/module-09-pwa-service-worker/MODULE_09G_PWA_PORTFOLIO_SUMMARY.md new file mode 100644 index 0000000..411163f --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09G_PWA_PORTFOLIO_SUMMARY.md @@ -0,0 +1,95 @@ +# Module 09-G — PWA and Service Worker Offline Case Study + +## Project Overview + +This case study outlines the process of auditing, planning, implementing, and validating Progressive Web App (PWA) components for a local web application. By using **Chrome DevTools** Application and Network panels, we implemented a robust offline caching architecture and installable branding configuration within a secure local-first sandbox. + +--- + +## 1. Challenge & Objectives + +A standard static web page served over HTTP is vulnerable to network dropouts. If the connection fails, the user is presented with a generic browser-side error page, blocking all service access. + +The goals of this module were to: +1. **Audit** a baseline static website for offline resilience using Chrome DevTools. +2. **Design** a client-side caching strategy utilizing Service Workers. +3. **Configure** installability options and app branding via a Web App Manifest. +4. **Validate** the offline load resilience and manifest compatibility in Chrome DevTools. + +--- + +## 2. Auditing the Baseline (DevTools Inspection) + +We launched the static site and performed a baseline audit in Chrome DevTools: +* **Offline Throttling**: Changing the Network throttling selector to **Offline** and reloading the page resulted in a failed request (`ERR_INTERNET_DISCONNECTED`). +* **Cache Inspection**: The Cache Storage tree in the Application panel was empty. +* **Manifest Status**: The Application panel reported no manifest file linked, declaring the application non-installable. + +--- + +## 3. Caching & PWA Implementation + +To remediate these issues, we implemented two core components: + +### Service Worker Caching (`sw.js`) +We configured the Service Worker to pre-cache static assets during the `install` event and intercept fetches during the `fetch` event: + +```javascript +const CACHE_NAME = "pwa-cache-v1"; +const ASSETS = [ + "./index.html", + "./styles.css", + "./app.js", + "./manifest.json" +]; + +self.addEventListener("install", event => { + event.waitUntil( + caches.open(CACHE_NAME) + .then(cache => cache.addAll(ASSETS)) + .then(() => self.skipWaiting()) + ); +}); +``` + +The fetch handler intercept returns the cached response if available; otherwise, it fetches from the network, caches the new asset dynamically, and returns the response. + +### Web App Manifest (`manifest.json`) +We configured a manifest file defining standalone display options and branding: +* **Display Mode**: `standalone` (removes browser URL bar and frames). +* **Start URL**: `./index.html`. +* **SVG data URI Icon**: Implements scalable vector branding directly in the JSON, eliminating binary files in the repository. + +--- + +## 4. Verification and Validation + +We registered the Service Worker and Manifest, reloaded the page, and audited the results: + +### Manifest Validation +* **Result**: DevTools Application -> Manifest successfully parsed `manifest.json`. The icon, name, start URL, theme color, and display properties parsed without warnings. + +### Cache Storage Audit +Evaluating `caches.open('pwa-cache-v1').then(...)` inside the console returned: +```json +[ + "http://127.0.0.1:8096/index.html", + "http://127.0.0.1:8096/styles.css", + "http://127.0.0.1:8096/app.js", + "http://127.0.0.1:8096/manifest.json", + "http://127.0.0.1:8096/" +] +``` +All resources were successfully pre-cached. + +### Offline Reliability Test +* **Result**: Emulating Offline network conditions and reloading the page succeeded. The page rendered normally. +* **Verification**: In the Network panel, size columns for static resources read `(from ServiceWorker)`. The server log confirmed that no requests reached the Python backend during offline reload, showing complete offline independence. + +--- + +## 5. Security & DevSecOps Compliance + +* **No Credentials**: No authentication tokens or secret configurations were used. +* **No PHI**: The application handles only mock interactions; no patient records are processed. +* **No Cloud Costs**: The entire caching audit loop was simulated and executed locally. diff --git a/docs/modules/module-09-pwa-service-worker/MODULE_09_MILESTONE_CLOSURE.md b/docs/modules/module-09-pwa-service-worker/MODULE_09_MILESTONE_CLOSURE.md new file mode 100644 index 0000000..33df43a --- /dev/null +++ b/docs/modules/module-09-pwa-service-worker/MODULE_09_MILESTONE_CLOSURE.md @@ -0,0 +1,52 @@ +# Module 09 Milestone Closure — PWA / Service Worker + +## Module Metadata + +- **Module**: 09 — PWA / Service Worker +- **Date**: 2026-06-17 +- **Final Status**: **CLOSED (Local-First Offline Verified)** +- **Target Environment**: Local (port 8096, served by Python http.server) +- **Cloud Cost Incurred**: $0.00 (Zero cloud resources provisioned) + +--- + +## 1. Executive Summary + +This document marks the official completion of Module 09 (PWA / Service Worker). In strict compliance with the repository's safety boundary (`SAFETY_BOUNDARY.md`) and local-first requirements, we conducted a baseline audit, drafted a remediation plan, implemented PWA configurations (Service Worker registration, pre-caching, fetch interception, and manifest declaration), and verified offline page load reliability using Chrome DevTools. + +By using local loopbacks and mock servers, we validated complete offline application resilience with zero cloud costs or data security exposures. + +--- + +## 2. Completed Deliverables & Evidence + +The following deliverables were completed and checked into the repository: + +| Deliverable | Scope | Document / Code Location | +|---|---|---| +| **Module 09-A Plan** | Outlined the PWA objectives, auditing plans, and local safety boundaries. | [MODULE_09A_PWA_PLAN.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09A_PWA_PLAN.md) | +| **Module 09-B Demo** | Scaffolding details for PWA static files. | [MODULE_09B_SAFE_LOCAL_PWA_DEMO.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09B_SAFE_LOCAL_PWA_DEMO.md) | +| **Module 09-C Evidence** | Gathered baseline Chrome DevTools observations for unmitigated failure state. | [MODULE_09C_PWA_EVIDENCE.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09C_PWA_EVIDENCE.md) | +| **Module 09-D Remediation Plan**| Outlined the offline resilience and manifest installation plan. | [MODULE_09D_PWA_REMEDIATION_PLAN.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09D_PWA_REMEDIATION_PLAN.md) | +| **Module 09-E Implementation** | Developed the Service Worker, client register scripts, and manifest. | [sw.js](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/experiments/module-09-pwa-demo/sw.js)
[manifest.json](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/experiments/module-09-pwa-demo/manifest.json)
[index.html](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/experiments/module-09-pwa-demo/index.html)
[app.js](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/experiments/module-09-pwa-demo/app.js) | +| **Module 09-F Evidence** | Documented DevTools offline reload and cache storage verification logs. | [MODULE_09F_PWA_POST_REMEDIATION_EVIDENCE.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09F_PWA_POST_REMEDIATION_EVIDENCE.md) | +| **Module 09-G Case Study** | Formulated a portfolio-ready case study on PWA caching resiliencies. | [MODULE_09G_PWA_PORTFOLIO_SUMMARY.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09G_PWA_PORTFOLIO_SUMMARY.md) | +| **Module 09 Milestone Kapanışı** | Official milestone closure document. | [MODULE_09_MILESTONE_CLOSURE.md](file:///C:/Users/YeniKullanici/chrome-devtools-cloud-migration-lab/docs/modules/module-09-pwa-service-worker/MODULE_09_MILESTONE_CLOSURE.md) (This file) | + +--- + +## 3. Key Technical Achievements + +* **Offline Resiliency**: Enabled complete static asset rendering under offline conditions. Static resources are served `(from ServiceWorker)` directly from browser cache. +* **SVG Vector Manifest Branding**: Integrated an inline SVG XML data URI as the PWA icon in `manifest.json`. This allowed the application to meet Web App Manifest icon sizing rules while keeping the repository clean of binary images. +* **DevTools Application Auditing**: Verified cache entries and manifest compatibility directly, verifying that zero server network traffic occurred during local offline loads. + +--- + +## 4. Safety & Boundary Confirmation + +In strict compliance with `GUARDRAILS.md` and `AGENTS.md` guidelines: +* **No Secret/Credential Tracking**: Confirmed that no active tokens, API keys, or `.env` files are tracked. +* **No Patient Data / PHI**: Confirmed that no patient records or e-Nabız files were used. +* **Local Sandboxing**: Served on localhost port `8096`; no external network connections were requested. +* **Zero Cost**: No cloud resources were provisioned or billed. diff --git a/experiments/module-09-pwa-demo/README.md b/experiments/module-09-pwa-demo/README.md new file mode 100644 index 0000000..f0d395c --- /dev/null +++ b/experiments/module-09-pwa-demo/README.md @@ -0,0 +1,38 @@ +# Module 9 PWA Caching Demo + +This is a safe local-only PWA demonstration designed to verify Service Worker lifecycle registration, offline cache storage, and manifest parsing using Chrome DevTools. + +## Run Locally + +Since Service Workers require a secure context (HTTPS or localhost/127.0.0.1), serve this directory locally: + +```powershell +# Serve using Python static server +python -m http.server 8096 +``` + +Then open the following URL in Chrome: +```text +http://127.0.0.1:8096/ +``` + +## How to Audit + +### 1. Web App Manifest +* Go to **Application** -> **Manifest**. +* Verify that name, theme color, display mode, and start URL match `manifest.json`. + +### 2. Service Worker Lifecycle +* Go to **Application** -> **Service Workers**. +* Check the **Update on reload** checkbox. +* Reload the page to register `sw.js` (you should see status `active and running`). + +### 3. Cache Storage +* Go to **Application** -> **Cache Storage** -> **pwa-cache-v1**. +* Verify that `index.html`, `styles.css`, `app.js`, and `manifest.json` are listed. + +### 4. Offline Test +* Go to the **Network** panel. +* Set the network throttle option from **No throttling** to **Offline**. +* Reload the page. The application should load normally using cached assets. +* Look at the Network request list; the Size column should read `(from ServiceWorker)` for the cached assets. diff --git a/experiments/module-09-pwa-demo/app.js b/experiments/module-09-pwa-demo/app.js new file mode 100644 index 0000000..09037f2 --- /dev/null +++ b/experiments/module-09-pwa-demo/app.js @@ -0,0 +1,43 @@ +(function () { + "use strict"; + + const networkStatus = document.getElementById("network-status"); + const interactionBtn = document.getElementById("interaction-btn"); + const interactionStatus = document.getElementById("interaction-status"); + + // Update status based on navigator.onLine + function updateOnlineStatus() { + if (navigator.onLine) { + networkStatus.textContent = "Online"; + networkStatus.className = "status-indicator status-online"; + } else { + networkStatus.textContent = "Offline"; + networkStatus.className = "status-indicator status-offline"; + } + } + + // Register Service Worker + if ("serviceWorker" in navigator) { + window.addEventListener("load", () => { + navigator.serviceWorker.register("./sw.js") + .then(reg => { + console.info("Service Worker registered successfully with scope:", reg.scope); + }) + .catch(err => { + console.error("Service Worker registration failed:", err); + }); + }); + } else { + console.warn("Service Worker is not supported in this browser."); + } + + // Interaction behavior + interactionBtn.addEventListener("click", () => { + interactionStatus.textContent = `Local interaction registered at ${new Date().toLocaleTimeString()}`; + console.info("Local interaction triggered."); + }); + + window.addEventListener("online", updateOnlineStatus); + window.addEventListener("offline", updateOnlineStatus); + updateOnlineStatus(); +})(); diff --git a/experiments/module-09-pwa-demo/index.html b/experiments/module-09-pwa-demo/index.html new file mode 100644 index 0000000..7ffca20 --- /dev/null +++ b/experiments/module-09-pwa-demo/index.html @@ -0,0 +1,49 @@ + + + + + Module 9 PWA Caching Demo + + + + + + +
+

Module 9 PWA Offline Caching Demo

+

+ This demo tests service worker registration, static asset caching, and offline support. +

+
+ +
+
+

Network Connection Status

+

+ Current state: Online +

+
+ +
+

Service Worker & Cache Controls

+

+ Use this button to register or trigger local interactions. The Service Worker intercepts fetches. +

+ +

No action triggered yet.

+
+ +
+

How to Audit in DevTools

+ +
+
+ + + + diff --git a/experiments/module-09-pwa-demo/manifest.json b/experiments/module-09-pwa-demo/manifest.json new file mode 100644 index 0000000..6d4d99f --- /dev/null +++ b/experiments/module-09-pwa-demo/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "PWA Demo", + "name": "Module 9 PWA Offline Cache Demo", + "icons": [ + { + "src": "data:image/svg+xml;utf8,PWA", + "type": "image/svg+xml", + "sizes": "192x192" + } + ], + "start_url": "./index.html", + "background_color": "#ffffff", + "theme_color": "#0288d1", + "display": "standalone" +} diff --git a/experiments/module-09-pwa-demo/styles.css b/experiments/module-09-pwa-demo/styles.css new file mode 100644 index 0000000..81a8d4d --- /dev/null +++ b/experiments/module-09-pwa-demo/styles.css @@ -0,0 +1,57 @@ +body { + font-family: system-ui, sans-serif; + margin: 2rem; + line-height: 1.5; + max-width: 900px; + background-color: #f5f5f5; + color: #333; +} + +header { + margin-bottom: 2rem; + background-color: #0288d1; + color: white; + padding: 1.5rem; + border-radius: 12px; +} + +.card { + background: white; + border: 1px solid #ddd; + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1.5rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +button { + padding: 0.6rem 1.2rem; + border-radius: 8px; + border: none; + background: #0288d1; + color: white; + font-weight: bold; + cursor: pointer; +} + +button:hover { + background: #01579b; +} + +.status-indicator { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 12px; + font-weight: bold; + font-size: 0.9rem; +} + +.status-online { + background: #e8f5e9; + color: #2e7d32; +} + +.status-offline { + background: #ffebee; + color: #c62828; +} diff --git a/experiments/module-09-pwa-demo/sw.js b/experiments/module-09-pwa-demo/sw.js new file mode 100644 index 0000000..6f1de8b --- /dev/null +++ b/experiments/module-09-pwa-demo/sw.js @@ -0,0 +1,63 @@ +const CACHE_NAME = "pwa-cache-v1"; +const ASSETS = [ + "./index.html", + "./styles.css", + "./app.js", + "./manifest.json" +]; + +// Install Event - cache core files +self.addEventListener("install", event => { + event.waitUntil( + caches.open(CACHE_NAME) + .then(cache => { + console.info("[SW] Pre-caching static assets"); + return cache.addAll(ASSETS); + }) + .then(() => self.skipWaiting()) + ); +}); + +// Activate Event - clean old caches +self.addEventListener("activate", event => { + event.waitUntil( + caches.keys().then(keys => { + return Promise.all( + keys.map(key => { + if (key !== CACHE_NAME) { + console.info("[SW] Removing old cache:", key); + return caches.delete(key); + } + }) + ); + }).then(() => self.clients.claim()) + ); +}); + +// Fetch Event - intercept and serve from cache if offline +self.addEventListener("fetch", event => { + event.respondWith( + caches.match(event.request) + .then(cachedResponse => { + if (cachedResponse) { + console.info("[SW] Serving from cache:", event.request.url); + return cachedResponse; + } + return fetch(event.request).then(response => { + // Check if valid response + if (!response || response.status !== 200 || response.type !== "basic") { + return response; + } + // Dynamically cache other assets if loaded + const responseToCache = response.clone(); + caches.open(CACHE_NAME).then(cache => { + cache.put(event.request, responseToCache); + }); + return response; + }).catch(() => { + // Fallback if both cache and network fail (offline fallback) + console.warn("[SW] Fetch failed, resource not available offline."); + }); + }) + ); +});