Add documentation for PWA(#8123)

Author: itsjanajana

_docs/developer/development_instructions/pwa.md

@@ -0,0 +1,133 @@
+---
+title: Progressive Web App (PWA)
+category: Developer > Development Instructions
+permalink: /developer/development_instructions/pwa
+redirect_from:
+  - /developer/pwa
+---
+
+Submitty includes support for **Progressive Web App (PWA)** features, enabling an installable, app-like experience across desktop and mobile platforms.
+
+This page provides an overview of how PWA functionality is structured in Submitty and how developers can extend or maintain it.
+
+For general PWA concepts, see: [PWA overview (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
+
+ 
+
+## Overview
+
+A Progressive Web App (PWA) is a web application that can:
+
+* Be installed on a device (desktop or mobile)
+* Run in a standalone window
+* Provide an app-like user experience
+
+In Submitty, PWA support focuses on:
+
+* Installability via browser prompts
+* Standalone display mode
+* Cross-platform compatibility
+
+ 
+
+## Core Components
+
+### Web App Manifest
+
+Submitty includes a **web app manifest** that defines how the application appears when installed.
+
+Typical responsibilities include:
+
+* App name and short name
+* Icons for different device sizes
+* Start URL
+* Display mode (`standalone`)
+
+For more details, see: [Web App Manifest reference (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest)
+
+<!-- TODO: Add link to manifest location in Submitty codebase -->
+
+&nbsp;
+
+### Display Mode
+
+Submitty uses a **standalone display mode** so that the app opens without standard browser UI (tabs, address bar).
+
+This creates a more focused, app-like experience for users.
+
+For more details, see: [Display modes (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/display)
+
+&nbsp;
+
+### Installability
+
+Modern browsers automatically detect when Submitty meets PWA requirements and may prompt users to install it.
+
+Basic requirements include:
+
+* Valid manifest file
+* Served over HTTPS (or localhost for development)
+
+For more details, see: [PWA installability guide (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)
+
+<!-- TODO: Add link to installation trigger logic if implemented -->
+
+&nbsp;
+
+## Current Scope in Submitty
+
+At present, Submitty’s PWA support is intentionally minimal and focuses on:
+
+* Installable interface
+* Consistent experience across devices
+
+The following are **not fully implemented** (or are planned improvements):
+
+* Offline functionality
+* Background sync
+* Push notifications
+
+&nbsp;
+
+## Development Considerations
+
+When working on PWA-related features in Submitty:
+
+* Ensure compatibility across major browsers (Chrome, Edge, Safari)
+* Avoid breaking standard browser usage (Submitty must still function normally without installation)
+* Keep performance and responsiveness in mind
+* Test both installed and non-installed experiences
+
+&nbsp;
+
+## Possible Extensions
+
+Future improvements to PWA support may include:
+
+* Offline access to selected pages using service workers  
+* Push notifications for deadlines and announcements  
+* Improved caching strategies for faster load times  
+
+For background concepts, see: [Offline and caching (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Offline_and_background_operation)
+
+&nbsp;
+
+## Testing
+
+To test PWA behavior:
+
+1. Run Submitty in a secure environment (HTTPS or localhost).
+2. Open the application in a supported browser.
+3. Check for install prompts or manually install the app.
+4. Verify:
+   * App launches in standalone mode
+   * Icons and branding appear correctly
+   * Navigation works as expected
+
+&nbsp;
+
+## Additional Resources
+
+* [PWA overview (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
+* [Making PWAs installable (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable)
+* [Web App Manifest (MDN)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest)

_docs/index/features.md

@@ -182,3 +182,35 @@ _Note: Click on the <u>links</u> and <i class="fas fa-info-circle" style="font-s
   * significant recent improvements
   * W3C html validation
   * mobile-friendly (phone and tablet compatibility)
+
+&nbsp;
+
+
+* **Progressive Web App (PWA)**  
+  Installable version of Submitty that works on mobile and desktop devices, supported on modern browsers across Android, iOS, and desktop platforms.  
+  {% include feature_text.html
+     text="Provides an app-like interface that can be launched directly from a device home screen or desktop. Ideal for quick access to assignments, grades, and course content." %}
+
+  * **What is a PWA?**  
+    A Progressive Web App (PWA) is a web application built using standard web technologies that delivers an experience similar to a platform-specific app. PWAs combine the best of websites and native apps: they are cross-platform, accessible via the web, installable, work offline, and can send push notifications.  
+
+  * **Installation & Setup:**  
+    * Click the "Install Submitty" button on your profile page.  
+    * Follow your browser prompts to add Submitty to your home screen or desktop.  
+    * Launch Submitty like a normal app, without opening your browser.  
+
+  * **Current Features:**  
+    * Quick access to courses, assignments, grades, and announcements.  
+    * Mobile-friendly interface optimized for smaller screens.  
+    * Installed PWAs get a dedicated app icon and can run in full-screen mode.  
+
+  * **Planned Enhancements:**  
+    * Offline access to selected pages.  
+    * Push notifications for announcements, assignment deadlines, and updates.  
+
+  * **Learn More / Developer Resources:**  
+    * [Submitty Developer Documentation – PWA](/developer/development_instructions/pwa)  
+    * [Progressive Web Apps – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)  
+    * Reference implementation and ideas from our GSoC contributors:  
+      * [Mukul Kumar Jha – PWA & Mobile Enhancements](https://submitty.org/developer/google_summer_of_code/2020_Mukul_Kumar_Jha)  
+      * [Madhur Jain – PWA & Push Notifications](https://submitty.org/developer/google_summer_of_code/2022_Madhur_Jain)  

navtreedata.js

@@ -215,6 +215,7 @@ var NAVTREE =
             ] ],
             [ "Development Instructions", "/developer/development_instructions/index", [
                 [ "Overview", "/developer/development_instructions/index", null ],
+                [ "Progressive Web App (PWA)", "/developer/development_instructions/pwa", null ],
                 [ "Sample Courses Data", "/developer/development_instructions/sample_data", null ],
                 [ "Migrations", "/developer/development_instructions/migrations", [
                     [ "Trigger Functions", "/developer/development_instructions/trigger_functions", null ]