Allow installation as progressive web application

amyjko commented 2 months ago

What are you trying to do that you can't?

The application is fundamentally a web app currently. This is in tension with many teacher use cases, which involve installing an application, using it offline, and storing projects locally on a device instead of in the cloud, and allowing it to appear as a native application on a device rather than requiring navigation to a website.

What is your idea?

Support Wordplay as a "Progressive Web App". There are a variety of tradeoffs to this model, but it is increasingly well supported. There's much to decide about Android, iOS, and macOS integration, so the design needed here is to evaluate all of the possible tweaks that we would make to support this use case and develop a design proposal that provides a concrete list of modifications and additions to make this possible. There's a good overview here of the iOS PWA limitations. Other tradeoff analyses likely exist.

jsorror commented 1 month ago

@amyjko can I be added to this issue? Thank you!

diana24p commented 1 month ago

@amyjko I would like to work on this issue can I please be assigned

vedashnii commented 1 month ago

@amyjko I'd like to work on this issue, could I be assigned to it? Thank you!

anushkamalpani commented 1 month ago

@amyjko Can I be added to the issue?

amyjko commented 1 month ago

Are all four of you willing to work together? If you're not sure, create a channel in Discord for this issue (per the onboarding guide) and discuss there, and post a decision here.

jsorror commented 1 month ago

splash_screens.zip

Dark mode splash screens + MetaData

vedashnii commented 1 month ago

splash_screens.zip Light Mode Splash Screens + Metadata

jsorror commented 1 month ago

The status bar on the IOS app currently does not have a transparent background. To fix this,

In metadata, add:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

jsorror commented 1 month ago

The IOS app still has text selection, highlighting, and callouts enabled. To disable these:

To disable selection, set the -webkit-user-select CSS property to none

body { -webkit-user-select: none; }

To disable highlighting, set the -webkit-tap-highlight-color to transparent

body { -webkit-tap-highlight-color: transparent; }

To disable callouts, set the -webkit-touch-callout to none

body { -webkit-touch-callout: none; }

Vraj1234 commented 1 week ago

Hi guys,

As per the discussion from the last meet-up, PFA the preliminary analysis for converting wordplay to a PWA. It mainly covers the different challenges that we may face and environment specific challeneges (MacOS/iOS/Android/Accesible readers)

https://docs.google.com/document/d/1PsQFthGQQ2h-puTtJMyQCpTmU_tTgQcisaahSKXQL0w/edit?usp=sharing

Feel free to suggest edits and have it aligned with the issue requirements

amyjko commented 1 week ago

(Process: reminder: avoid external links in GitHub jobs; Google Docs and other external sources have a way of disappearing or changing permissions, which means the project loses the knowledge. Always contribute as comments unless they don't support your needs).

Vraj1234 commented 1 week ago

Noted. Below is the Preliminary analysis:

Preliminary Analysis and Design Proposal for Converting Wordplay.dev to a PWA

Introduction Transforming wordplay.dev into a Progressive Web Application (PWA) will significantly enhance its accessibility, performance, and user engagement across various platforms. This document provides a preliminary analysis and design proposal, incorporating insights from multiple sources to ensure an inclusive PWA implementation.Progressive Web Apps (PWAs) combine the best features of web and native applications, offering users a seamless and engaging experience across devices. By leveraging modern web technologies, PWAs enable installation, offline functionality, and access to device-specific features without the need for separate codebases (Mozilla, n.d.; Microsoft, n.d.).

Benefits of Converting to a PWA Cross-Platform Compatibility: PWAs operate consistently across Android, iOS, macOS, and desktop browsers using a single codebase, reducing development and maintenance efforts (Mozilla, n.d.). Enhanced User Experience: PWAs provide native-like interactions, including home screen installation, push notifications, and offline access, fostering higher user engagement and retention (Microsoft, n.d.). Improved Performance: Through efficient caching strategies and optimized asset delivery, PWAs offer faster load times and smoother interactions, enhancing overall performance (MDN Web Docs, n.d.).

Technical Requirements

On a basic level, and as per my understanding of PWA and Wordplay, to successfully convert wordplay.devinto a PWA, the following technical components must be implemented:

Web App Manifest: Create a manifest.json file containing essential metadata such as name, short_name, start_url, display, and icons to facilitate installation and branding (MDN Web Docs, n.d.).
Service Workers: Develop service workers to handle caching, offline functionality, and background tasks, enabling the app to function without an active internet connection (Mozilla, n.d.).
Responsive Design: Design the user interface to be adaptable to various screen sizes and orientations, ensuring a consistent experience across devices (Microsoft, n.d.). [Which it is to a significant extent, to be compatible with screen readers]

Environment Integrations These are some platform specific benefits and challenges wordplay will face when implementing PWA. Let's look at four platforms closely: Android, iOS, MacOS, Accessible readers Android Integration Full PWA Support: Android browsers, particularly Chrome, offer comprehensive PWA support, including home screen installation and push notifications (Microsoft, n.d.). Push Notifications: Integrate Firebase Cloud Messaging (FCM) to enable real-time notifications, enhancing user engagement (Mozilla, n.d.). Home Screen Integration: Optimize the web app manifest for visibility and accessibility when added to the home screen, ensuring consistent branding and functionality (Microsoft, n.d.).

iOS Integration Limited Push Notifications: iOS currently restricts push notification support for PWAs. Alternative engagement strategies, such as in-app notifications and email alerts, should be considered (Cloudflight, n.d.). Service Worker Limitations: iOS imposes restrictions on service workers, limiting background sync and certain caching strategies. Optimize service workers to operate within these constraints (Mozilla, n.d.). Add to Home Screen: Enhance the user experience by providing clear prompts and instructions for manual PWA installation, considering Safari's specific behaviors (Cloudflight, n.d.).

MacOS Integration Standalone App Experience: Utilize macOS capabilities to allow the PWA to function similarly to native applications, including window management and keyboard shortcuts (PWABuilder, n.d.). Window Management: Ensure the PWA handles window resizing and multi-window support effectively, providing a seamless desktop experience (PWABuilder, n.d.). Keyboard Shortcuts: Implement keyboard shortcuts to mimic native app functionalities, enhancing usability for desktop users (PWABuilder, n.d.).

Accessibility and Digital Inclusion Promoting digital inclusion and accessibility is paramount for wordplay.dev. Implementing WCAG (Web Content Accessibility Guidelines) standards ensures that the PWA is usable by individuals with diverse abilities (Cloudflight, n.d.). Key considerations include:

Semantic HTML: Use appropriate HTML elements to improve screen reader compatibility and keyboard navigation.
Contrast and Readability: Ensure sufficient color contrast and readable typography to accommodate users with visual impairments.
Responsive Interactions: Design interactive elements to be easily navigable and operable across different devices and input methods.

Implementation Plan [With weekly estimates]

On a high level, this can be the implementation plan for converting wordplay.dev to a PWA:

Audit Current Website: Evaluate existing features and identify necessary adjustments for PWA compatibility, focusing on responsive design and performance bottlenecks. [2-3 weeks]
Develop Service Workers: Create and test service workers to manage caching, offline access, and background tasks, ensuring they operate within platform-specific limitations. [4-8 weeks]
Create Web App Manifest: Define and integrate the manifest.json with appropriate metadata, optimizing for each target platform's requirements. [2-3 weeks]
Optimize for iOS: Address iOS-specific limitations by refining service workers and enhancing installation prompts to guide users through manual installation. [2 weeks]
Enhance Android and macOS Features: Implement platform-specific integrations such as push notifications for Android and advanced window management for macOS. [2 weeks]
Accessibility Enhancements: Incorporate accessibility best practices to ensure the PWA is inclusive and compliant with WCAG standards. [3 weeks]
Testing and Refinement: Conduct extensive cross-platform testing to identify and resolve any issues, ensuring consistent functionality and performance. [3-4 weeks]
Deploy and Monitor: Launch the PWA version of wordplay.dev and continuously monitor user feedback and performance metrics for ongoing improvements. [2 weeks]

Ideally with these generous estimates, based on my current understanding of wordplay and the time contributors commit to this, the transition can take anywhere from 20 to 27 weeks.

Conclusion Converting wordplay.dev into a Progressive Web Application will broaden its reach and significantly enhance user engagement across Android, iOS, and macOS platforms. Although there are challenges—such as iOS limitations on push notifications and service worker caching, and potential performance optimization needs to manage battery consumption—the benefits of a PWA still outweigh these obstacles. Addressing platform-specific constraints with alternative solutions, optimizing for efficient offline performance, and prioritizing accessibility will result in a robust and inclusive platform. By overcoming these hurdles, wordplay.dev can deliver a high-quality, native-like experience that empowers users to interact with typography and language tools anytime, anywhere, solidifying its presence as a versatile web application.

References Cloudflight. (n.d.). Digital inclusion and accessibility in PWAs. Retrieved from https://www.cloudflight.io/en/blog/digital-inclusion-accessibility-pwa/ MDN Web Docs. (n.d.). Progressive web apps. Retrieved from https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps Microsoft. (n.d.). Overview of Progressive Web Apps (PWAs). Retrieved from https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/ PWABuilder. (n.d.). Web apps on macOS Sonoma: Proper install experience. Retrieved from https://blog.pwabuilder.com/posts/web-apps-on-macos-sonoma-got-a-proper-install-experience/ Wikipedia. (n.d.). Progressive web app. In Wikipedia. Retrieved from https://en.wikipedia.org/wiki/Progressive_web_app

Notes: Generative AI (ChatGPT & Perplexity AI) was used to correct grammar, spelling and better articulate my thoughts.

@anushkamalpani @vedashnii @jsorror . Please check if these align with the work currently being done and let me know any changes that may be appropriate.

wordplaydev / wordplay