PWA & iOS
Why this sucks and what can we do about it
👨💻
- Krystian Kościelniak
- Front-end Developer @ Brainhub
- Remotee @ Kraków
📅
- A shameful confession
- An justification
- An shallow dive to PWA on iOS
- The research summary
😳
I'm not a fan of the idea tbh
- I like native
- I like React Native
- PWA still has some early-age problems IMO
- The promise of engagement is not delivered. Yet.
On the other hand
- It's easy to hate for no reason
- I've decided to give it a shot
- I've spent few weeks to explore the idea
Disclaimer. Today I am:
- Not treating PWA as an elastic tech stack
- Answering some questions about PWAs current state
- Presenting the point of view of an iOS user who considers using PWA app instead of native one.
invented PWA
- Well... almost
- Web 2.0 + AJAX
- But then... the App Store
has some reasons
(the reasonable ones)
🤑
- Apple "services" are currently 2nd most important revenue source
- It may become the 1st one (They invest in services a lot)
- App Store is the most lucrative service atm
🤑
- 70/30 payment model for both Apps and In-App purchases
- Pay or make the UX bad
🚔
- Lack of control
- PWA apps don't have to follow Apple Guidelines
- Hard to keep native UX as it differs between platforms
- Porn.
Apple does not like porn
Does give a fuck about PWA?
📲
- Basic Service Workers support was introduced in iOS 11.3 (March 2018)
- iOS 12 (September 2018) does not bring any improvement to PWA support at all
- iOS 12.1.3 (January 2019) - nothing changed
- iOS 12.2 (March 2019) - something happens
🤔
What can we do?
(quite a lot, actually)
We can...
- Make a call, send SMS
- Take photos
- Geolocate the user
- Pay with Pay
- Create Share Extensions (iOS 12.2)
- Keep state in multitasking (iOS 12.2, buggy)
- Open out-of-scope pages like OAuth (iOS 12.2)
We kinda can...
- Synth speech (only if an external headset is used)
- Store data offline (only 50Mb)
- Use gyroscope and accelerometer (if the user allows it explicitly)
- Play audio in the background
(but no player controls are available in the background) - Use some experimental Web* APIs
(WebRTC, WebGL)
We can't...
- Install our PWA app on the Home screen
- Use app icon from manifest.json
- Create splash screen easily
- Access native features (TouchID/FaceID, Siri,
Bluetooth, 3D Touch etc.) - Access private data (contacts, logs etc.)
- Create apps that work in Split View on the iPad
- Execute code in the background
- Create push notifications
We need to remember about...
- Adjusting the navigation in the app (back button)
- We can use gesture controls (iOS 12.2)
- Any third-party browser on iOS doesn't support Service Workers
🧠
What can we do about it?
(quite a lot, actually)
So we have an app...
- This one is created by "a friend of mine"
- Allows to record our medicine usage
App Icon
- It's an app screenshot by default
- It's not the same as defined in the manifest.json file
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- [...] -->
<link rel="apple-touch-icon" href="app-icon@120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="app-icon@152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="app-icon@180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="app-icon@167x167.png">
App Icon
- We need to add an icon in exact size for each device separately
Splash screen
- It's just plain white
- The plain white box is visible in multi tasking menu
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- ... -->
<link
href="%PUBLIC_URL%/ss-iPhone6-4.7.png"
sizes="750x1334"
rel="apple-touch-startup-image"
media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
Splash screen
- We need to do it for each device separately
- Images need to be of exact device resolution and use media queries
Splash screen
- BONUS: Splash screen is visible as an app miniature in the multitasking window
Add to home screen banner
- Not available on iOS by default
- Needs to be handled on our own
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test(userAgent);
}
const isInBrowser = () =>
!(('standalone' in window.navigator) && (window.navigator.standalone));
if (isIos() && isInBrowser()) {
this.setState({ showInstallMessage: true });
}
$ yarn add react-add-to-homescreen
Add to home screen
- Banner is visible if the user opens a web app on iOS Safari
- Provides a brief instruction on how to install the app
- User still needs to take the steps to install the app
What else...?
- Disable text selection
- Disable external hyperlinks
We still don't have...
- Integration with Apple Health
- Push notificatons (reminders)
- Any other native functionality
Is it worth the hassle?
Yes.
AliExpress increased its iOS conversions by 82%, despite iOS not supporting the full feature set of Progressive Web Apps
And they don't even have icon for iOS homescreen
Uber’s PWA core app is only 50k gzipped and takes less than 3s to load on 2G networks.
And it's fully usable in Poland.
We won't develop a fully-featured app in PWA
But we still can build something close enough
In no-time
You may also check:
- PWACompat (@GoogleChromeLabs)
Thanks
- All of you for listening
- @lukasz-pluszczewski for the Pills app
- Teej for Pikachu in the background
Others
PWA: Why iOS sucks and what can we do about it
By kkoscielniak
PWA: Why iOS sucks and what can we do about it
- 1,743