Research: web as PWA

[kulmann]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

As a desktop user I want to install web on my desktop so that I don't need to use a bookmark.

User Value

Experience web as its own desktop application instead of a web page in the browser.

Acceptance Criteria

• clear list of requirements of what needs to be done, so that browsers (Chrome, Safari, Firefox, Edge) offer to install our web ui as PWA
• further options (e.g. how to achieve offline data to some extent) are documented
• first ideas how we should handle views which require being online (e.g. app provider apps can never work offline)
• Timebox: 5pd

[michaelstingl]

PWA Implementation Research

We're excited about the possibility of making OpenCloud available as a Progressive Web App! Here's what we found in our research:

Current Status

OpenCloud already has some PWA foundations in place:

• Web App Manifest exists (packages/web-container/manifest.json)
• The manifest is linked in index.html
• SVG icon is available (packages/web-container/img/opencloud-icon-lilac.svg)

PWA Requirements & Options

Core Requirements for Installation:

• Complete Web App Manifest with proper icons, metadata and display settings
• Service Worker registration
• HTTPS (already in place)
• Various icon sizes (including PNG formats for wider compatibility)

Push Notification Options:

• The Web Push API could integrate with OpenCloud's existing notification system
• Would require service worker event handling for push events
• Server-side would need Web Push Protocol implementation
• Go libraries like webpush-go could facilitate implementation

Offline Capabilities (Optional):

• Service worker caching strategies could enable various levels of offline functionality
• From basic "app shell" approach to more complex data caching
• IndexedDB or Cache API could store user data and recently accessed files

Technical Resources

PWA Basics:

• MDN Progressive Web Apps Guide
• Google PWA Checklist

Web Push:

• Web Push API
• Service Worker API

Storage and Caching:

• Workbox - For service worker strategies
• IndexedDB

We're enthusiastic about this feature request as it would significantly enhance the user experience by allowing desktop installation without bookmarks. The PWA approach offers flexibility in implementation - from a simple installable app to more advanced features like push notifications and offline capabilities that could be added incrementally as needed.

[michaelstingl]

Browser Compatibility Matrix for PWA Technologies

To help with implementation planning, here's a compatibility overview of key PWA technologies across major browsers:

Feature	Chrome	Firefox	Safari	Edge	Can I Use Link
Service Workers	✅	✅	✅	✅	link
Web App Manifest	✅	✅	✅*	✅	link
Add to Home Screen	✅	✅	✅*	✅	link
Push API	✅	✅	❌	✅	link
Notifications API	✅	✅	✅	✅	link
Background Sync	✅	❌	❌	✅	link
Cache Storage API	✅	✅	✅	✅	link
IndexedDB	✅	✅	✅	✅	link

* Safari has some limitations in Web App Manifest support (e.g., certain manifest properties are ignored) and requires additional iOS-specific meta tags.

Notes on Browser Support:

• Chrome, Edge, Samsung Internet: Full PWA support, including installation and push notifications
• Firefox: Good overall PWA support, including installation and push notifications
• Safari:
  • Basic PWA support (installation, offline) is available since iOS 11.3+
  • Push notifications are NOT supported (as of March 2025)
  • Requires iOS-specific meta tags for full installation experience
  • Limited support for certain manifest properties

Business Impact:

Despite Safari limitations (particularly for push notifications), implementing PWA features would still provide significant value:

1. Desktop installation works across all major browsers
2. Offline capabilities would work across all browsers
3. Push notifications would work on Windows, Android, macOS (except Safari), and Linux

Even with Safari's push notification limitations, the PWA implementation would significantly enhance the desktop experience for most users and provide a foundation for when Safari eventually adds push notification support.

[RihanArfan]

Given the frontend is made with Vue.js, I'd recommend checking out Vite PWA. It works with workbox for background sync, push notifications, etc. https://vite-pwa-org.netlify.app/frameworks/vue.html

[JammingBen]

I provided additional research results in my PoC in #591. This concludes the research part here, so I'm closing this issue.

We will move forward with action items that I will eventually transform into separate issues:

• Make Web installable as PWA (without VitePWA and a service worker)
• Evaluate how we can use the Stale-while-revalidate network strategy using VitePWA and workbox in generateSW mode