smov
smov copied to clipboard
iOS PWA improvments
This aims to solve most of the problems with the iOS PWA.
Apple has restricted the use of many features for PWAs such as, not supporting Picture in Picture (PiP), breaking the functionality of the "standalone" display property, and always showing the home indicator on iPhone X and beyond.
Preview: https://pwa-improvements.envyflix.pages.dev/
Changes:
Disable PiP and Fullscreen for iOS PWA
- Disabled PiP and Fullscreen on iOS PWA only to mitigate Apple breaking the functionality, thus making the buttons useless.
Add info button for iOS PWA
- Added a button in place of the Fullscreen button that shows an alert explaining why the PiP and Fullscreen buttons were removed.
Add Widescreen button
- Due to the Fullscreen feature being disabled, the user can no longer fill their screen (remove letterboxing), so I reimplemented the feature back into the player.
https://github.com/user-attachments/assets/4fbffa82-22b2-4cca-9292-8b6a50e1b7d2
- I also made this a secret feature for desktop, only shown when holding the "SHIFT" key.
https://github.com/user-attachments/assets/e2ee6cf0-6bac-4cde-ba2b-d2ed0d3473f8
Fix top padding and safe areas for iOS PWA
- The iOS PWA has an oversight that ignores the notch area, so I added safe areas for top elements.
BEFORE
AFTER
- [x] I have read and agreed to the code of conduct.
- [x] I have read and complied with the contributing guidelines.
- [x] I have tested all of my changes.
- Enter discord user:
.pasithea
(we require this for the contributor role)