Hi Everyone,
I have two questions regarding PWA in mobile devices (iOS/Android):
1. Push Notifications What is the recommended approach to send push notifications to a PWA running on iOS and Android? Are there any specific configurations or limitations for PWA push notifications on these platforms?
2. Input Field / Screen Zoom Issue The PWA is working correctly on mobile, but when I tap on an input field and start typing, the screen size suddenly increases/zooms in. I then need to manually zoom out to restore the normal view.
Has anyone experienced this issue? What would be the recommended CSS or viewport configuration to prevent the screen from zooming when focusing on an input field?
Hi,
These are two separate behaviors:
1. Push Notifications
For a PWA, you should use a Web Push solution rather than a native/Cordova push plugin, since Cordova plugins are not available when the application is running as a PWA.
On Android, Web Push is supported by the main browsers.
On iOS, Web Push is supported from iOS 16.4, but the application must be added to the Home Screen and notification permission must be requested from a user interaction.
You can check this discussion for an OutSystems implementation: https://www.outsystems.com/forums/discussion/86961/outsystems-pwa-web-push-onesignal-and-ios-16-4/
2. Input zoom
If this happens mainly on iOS, first check the input's font-size.
iOS automatically zooms when focusing an input with a font size smaller than 16px.
You can test it with:
input, textarea, select { font-size: 16px; }
I would recommend fixing the font size instead of disabling zoom through the viewport, since restricting zoom can also create accessibility issues.
The same behavior was discussed here: https://www.outsystems.com/forums/discussion/58378/app-zooms-when-keyboard-displayed-but-does-not-zoom-back/
Hope this helps.
Thanks @Raul Gustavo Lopes de Sá ,The screen zoom issue has been fixed with font size 16px.Is there any demo of OneSignle which i can refer ?
Hi @Atal Sharma ,
Glad the 16px change fixed the zoom issue.
For OneSignal, you can check this Forge component for PWA/Web Push notifications:
https://www.outsystems.com/forge/component-overview/14232/onesignal-pwa-web-push-notifications
Since you are using a PWA, make sure you use the Web Push version of OneSignal instead of the Cordova/native plugin.
For iOS, the PWA needs to be added to the Home Screen, and the device should be running iOS 16.4 or later.
This discussion might also help, as it covers OneSignal with OutSystems PWA and iOS:
https://www.outsystems.com/forums/discussion/86961/outsystems-pwa-web-push-onesignal-and-ios-16-4/
Manish Jawla