9 ms·

Progressive web apps are coming to iOS 11.3: Cupertino, we have a problem

116 points by adrian_mrd 9y ago

karmajunkie 9y ago
TL;DR—Don't get too excited, Safari is still the new IE.
- andrewmcwatters 9y ago
  Yeah, everyone is the new IE.
- akmittal 9y ago
  Lots of people believe chrome is new IE
  - karmajunkie 9y ago
    Indeed, they may all be correct!
  - tootie 9y ago
    Edge is the new Seamonkey
- Spooky23 9y ago
  The only thing that isn’t the new IE is IE.
kyriakos 9y ago
Push notifications?
- kaycebasques 9y ago
  I'm wondering about this myself. Service worker support definitely paves the way for PNs (because the service worker handles receiving messages via the `push` event listener), but I haven't seen explicit mention of them in this announcement. https://developer.mozilla.org/en-US/docs/Web/API/PushEvent https://developer.mozilla.org/en-US/docs/Web/API/PushEvent
fictionfuture 9y ago
PWAs on iOS mean a huge shift in strategy for startups. In many cases(including mine) it now makes more sense to go PWA first instead of native.
- walterbell 9y ago
  In which cases are native still better than PWA?
  - atcole 9y ago
    In cases similar to desktops with electron vs. native (although with different requirements) where either you need access to significant native features that are not supported in the browser, or if your app is process intensive, i.e. graphics heavy games.
    - majewsky 9y ago
      The analogy to Electron makes me wonder if a possible mass migration to PWAs will make the experience on already-slow low-end phones even more atrocious.
      - nfRfqX5n 9y ago
        it would be the opposite actually, since you don't have to wrap the app in a heavy bundle. avg iOS app size is like 30mb. a web app shouldn't even come close.
        kaycebasques 9y ago
        Extreme example has been Twitter. Twitter PWA: 600KB Native Android Twitter: 23.5MB https://developers.google.com/web/showcase/2017/twitter#lowering_data_consumption https://developers.google.com/web/showcase/2017/twitter#lowe... This has been a huge differentiator in countries where users are sensitive to data consumption, which is why you see many case studies about countries in India, Africa, etc. getting great traction with PWAs. Disclaimer: I'm on Google Web DevRel team
dcdevito 9y ago
I took this article as iOS app dev paranoia.
colinbartlett 9y ago
PWA = Progressive Web Apps for anyone else confused.
- kaycebasques 9y ago
  Check out the Progressive Web App Checklist for the canonical definition. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check... Disclosure: I work on Google Web DevRel, the team that owns that site
TheAceOfHearts 9y ago
I don't understand why people make so much noise about PWAs. Am I the only one that doesn't mind opening his browser and then clicking on a bookmark?
- anderber 9y ago
  PWAs are more than just adding a icon/link to the homescreen. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check...
  - madeofpalk 9y ago
    Which is not what this article is about - the article focuses on PWA meaning 'home screen web app'. My impression is that Apple use case of Service Workers is for improved caching rather than trying to make "Save to home screen" sites better.
- DiThi 9y ago
  PWAs work without connection, or with a very lousy or limited data connection, without having to download a lot of stuff the moment you need it the most. In other words, the vast majority of advantages of native apps.
- kaycebasques 9y ago
  There's a lot of case studies on PWAs driving significant increases in conversion rates and engagement. https://developers.google.com/web/showcase/2017/ https://developers.google.com/web/showcase/2017/ Disclaimer: I work on Google Web DevRel, which owns developers.google.com/web
  - nailer 9y ago
    Is there a single platform where I can add a web app to the taskbar, dock or home screen and start in as a regular app? I don't use Android, but I've never seen this work using any browser on MacOS, Windows or iOS.
Asmod4n 9y ago
Its a good thing the Safari App and Apps from facebook et all don't share the same Cache etc. I don't want facebook to be able to know which sites i have visited before from other Apps or Safari.
- fabrice_d 9y ago
  Service Workers Caches are not shared across origins, and they are completely isolated from the browser’s HTTP cache [0]. [0] https://w3c.github.io/ServiceWorker/#cache-objects https://w3c.github.io/ServiceWorker/#cache-objects
- madeofpalk 9y ago
  Not for the reason you mentioned (because that itself is a nonissue), but I'm glad there exists the sandbox that native apps and the Safari app are completely isolated.
scottlu2 9y ago
I’m curious how Apple will balance PWA support with the business case for the App Store.
kitsunesoba 9y ago
So unless I’m mistaken, PWAs in their most “ideal” form (vs how Apple has implemented them) kinda hang around after I’ve visited them, can use some arbitrary amount of disk space, leave background processes running, and can send push notifications even after I’ve navigated elsewhere. It sounds like to some extent they effectively get to install themselves on my device without my permission, with visiting the site in question acting as consent. Am I incorrect? If all the above is true, I can’t say I’m too happy with the feature as a user and hope there’s a universal off switch buried in settings somewhere. If I choose to use a website over a native app it’s due to its ephemerality, so I have no interest in web apps that stay past their welcome. If on the other hand the behavior is 100% opt in, that’s fine as long as I’m not shown banners trying to sell me on the PWA all the time.
- mcintyre1994 9y ago
  My understanding is that this behaviour is all only if you save the web app to the home screen (from Safari).
- aeharding 9y ago
  Just like a native app, the process requires user approval ("add to homescreen" vs "install"). A large difference, however, is that native apps go through Apple's approval process.
  - madeofpalk 9y ago
    Does the Service Worker caching ability require approval?
    - anderber 9y ago
      I don't think so, just SSL is needed.
- nfRfqX5n 9y ago
  they will "hang around" after you visit in terms of caching. it'll cache whatever they've coded for.
LeanderK 9y ago
What about macOS? Are PWAs limited to mobile?
- madeofpalk 9y ago
  "PWA" isn't actually a real thing. This article focuses on Web App Manifest, and Service Workers (Caching). Safari on macOS definitely has Service Workers, but I'm not sure Web App Manifest support on desktop (nor am I clear on how that would make sense)
  - LeanderK 9y ago
    I was speaking about the concept. So essentially using ServiceWorkers, Web App Manifest etc. to produce something that resembles native apps. Why would it not make sense? I was just thinking about giving macOS the same functionality as iOS (so "installing" web-pages), having them in the dock and giving them a different UI. I have some electron apps installed on my mac that don't need much more functionality and could just be converted to a PWA if supported on macOS.
LeanderK 9y ago
Are there some quick, easy and usable UI-frameworks for buttons etc. and other common UI-Elements? I am a bit out of the loop in the web-ecosystem, but the PWA look very interesting.
- hilti 9y ago
  Check out Framework7.io - it's easy to use and mimics iOS and Android pretty well.
- WA 9y ago
  Ionic. I found it to have the most polished components. Better than Framework7. Also, you get a PWA with zero additional config when developing your SPA with Ionic. I’m happy with it.
kaycebasques 9y ago
If you’re wondering what exactly makes something a PWA, check out the Progressive Web App Checklist for the canonical definition. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check... Check out the case studies for why businesses are (rightfully, IMO) interested in PWAs. https://developers.google.com/web/showcase/2017/ https://developers.google.com/web/showcase/2017/ Disclosure: I work on Google Web DevRel team
Klathmon 9y ago
This article doesn't mention what is in my opinion the worst part of iOS PWAs (or web development in general). The engine that runs a PWA (or web-view, or app added to the home screen) is completely different than the one in safari. The "WebView" engine, (specifically a UIWebView, WKWebView, or SFSafariViewController) don't have some features turned on, like WebRTC. And there are rendering differences between the 2 engines. I was really screwed by this recently. I saw iOS 11 was to get WebRTC and getUserMedia support, so I tested out a POC and found it worked in safari. So I started building it out in safari, mostly just turning on the feature if it was supported in safari, and when I went to go test a production version of the app added to the homescreen, it was failing. Turns out It's not only not supported on the WebView, but it still advertises that it's supported, and you just need to catch the failure when you go to use it to know that it's not supported... Now I either had to tell my users to REMOVE the bookmark on the homescreen if they were to use this new feature, and warn people to NEVER add the app to the homescreen as it would break the feature, or just forgo the feature entirely, which is what I ended up doing.
- makmanalp 9y ago
  Oh god, please not another substandard / badly maintained embedded engine. One Microsoft Outlook was enough for history. Getting emails to look right was a pain for so long.
  - oneweekwonder 9y ago
    > embedded engine. I might be wrong but iOS decided from the early days to separate safari and webview. What would be interesting to know is if it is two different libs/renders/codebases or just degradation of features as op pointed out with webview, etc.
    - Klathmon 9y ago
      From my research when I had this issue, (and i'm going from memory here, so forgive any inaccuracies) it looks like it's because Safari uses Safari's rendering engine, while WebView's use "WebKit" with a lot of modifications. As far as I heard from various sources, they are in many ways completely separate codebases, and the reasoning is that since WebKit is very tightly integrated with the OS, it takes them much more time to include new features into WebKit than it does in Safari.
Naomarik 9y ago
The worst thing about trying to make something work in the browser for mobile is getting the UI to utilize the full height. This is common when the UI needs to have both something stickied on the top and bottom of the page. Both Chrome Android and Safari will cut off content if that content is 100vh with their URL bar that comes and goes as you scroll. Then you have full screen mode which iOS does not support but Chrome does, except that on Chrome invoking the keyboard does not tell the page anything about the height that it's taking up. The only browser that gets everything correct is Samsung's default browser. This is pretty ridiculous and the hacks available with current APIs aren't very good compared to if these browsers worked properly with 100vh.
st3fan 9y ago
Just a reminder that if you want the WebKit team to be aware of bugs or things that do not properly work or features/standards that need to be better supported, file bugs at https://bugs.webkit.org https://bugs.webkit.org They also have a mailing list, and one of the things they asked before this SW work started was 'let us know how important this is to you and what your use cases are'. I bet they are still listening and that they would love feedback.
ninkendo 9y ago
So this means the experience of extracting any useful information from any website I click on from a google results page is going to keep getting worse. We already have popups to log in, popups to sign up for newsletters, popups to take surveys, popups to install the app instead of viewing the website, full-screen ads, popups to enable notifications, popups for a site to access my location, popups about enabling cookies, and popups telling me to stop blocking popups. Every site now thinks just because I'm clicking on it from a search result page means I want to engage in some semipermanent relationship with them, before I even get a chance to view the site. Now we just add one more thing to the pile of things every website under the sun will try to get me to do just because I clicked one link. Remember when web pages were just documents you could view? Honestly? Fuck the web.

116 points by adrian_mrd 9y ago

karmajunkie 9y ago

TL;DR—Don't get too excited, Safari is still the new IE.

andrewmcwatters 9y ago
Yeah, everyone is the new IE.
akmittal 9y ago
Lots of people believe chrome is new IE
- karmajunkie 9y ago
  Indeed, they may all be correct!
- tootie 9y ago
  Edge is the new Seamonkey
Spooky23 9y ago
The only thing that isn’t the new IE is IE.

kyriakos 9y ago

Push notifications?

kaycebasques 9y ago
I'm wondering about this myself. Service worker support definitely paves the way for PNs (because the service worker handles receiving messages via the `push` event listener), but I haven't seen explicit mention of them in this announcement. https://developer.mozilla.org/en-US/docs/Web/API/PushEvent https://developer.mozilla.org/en-US/docs/Web/API/PushEvent

fictionfuture 9y ago

PWAs on iOS mean a huge shift in strategy for startups. In many cases(including mine) it now makes more sense to go PWA first instead of native.

walterbell 9y ago
In which cases are native still better than PWA?
- atcole 9y ago
  In cases similar to desktops with electron vs. native (although with different requirements) where either you need access to significant native features that are not supported in the browser, or if your app is process intensive, i.e. graphics heavy games.
  - majewsky 9y ago
    The analogy to Electron makes me wonder if a possible mass migration to PWAs will make the experience on already-slow low-end phones even more atrocious.
    - nfRfqX5n 9y ago
      it would be the opposite actually, since you don't have to wrap the app in a heavy bundle. avg iOS app size is like 30mb. a web app shouldn't even come close.
      - kaycebasques 9y ago
        Extreme example has been Twitter. Twitter PWA: 600KB Native Android Twitter: 23.5MB https://developers.google.com/web/showcase/2017/twitter#lowering_data_consumption https://developers.google.com/web/showcase/2017/twitter#lowe... This has been a huge differentiator in countries where users are sensitive to data consumption, which is why you see many case studies about countries in India, Africa, etc. getting great traction with PWAs. Disclaimer: I'm on Google Web DevRel team

dcdevito 9y ago

I took this article as iOS app dev paranoia.

colinbartlett 9y ago

PWA = Progressive Web Apps for anyone else confused.

kaycebasques 9y ago
Check out the Progressive Web App Checklist for the canonical definition. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check... Disclosure: I work on Google Web DevRel, the team that owns that site

TheAceOfHearts 9y ago

I don't understand why people make so much noise about PWAs. Am I the only one that doesn't mind opening his browser and then clicking on a bookmark?

anderber 9y ago
PWAs are more than just adding a icon/link to the homescreen. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check...
- madeofpalk 9y ago
  Which is not what this article is about - the article focuses on PWA meaning 'home screen web app'. My impression is that Apple use case of Service Workers is for improved caching rather than trying to make "Save to home screen" sites better.
DiThi 9y ago
PWAs work without connection, or with a very lousy or limited data connection, without having to download a lot of stuff the moment you need it the most. In other words, the vast majority of advantages of native apps.
kaycebasques 9y ago
There's a lot of case studies on PWAs driving significant increases in conversion rates and engagement. https://developers.google.com/web/showcase/2017/ https://developers.google.com/web/showcase/2017/ Disclaimer: I work on Google Web DevRel, which owns developers.google.com/web
- nailer 9y ago
  Is there a single platform where I can add a web app to the taskbar, dock or home screen and start in as a regular app? I don't use Android, but I've never seen this work using any browser on MacOS, Windows or iOS.

Asmod4n 9y ago

Its a good thing the Safari App and Apps from facebook et all don't share the same Cache etc. I don't want facebook to be able to know which sites i have visited before from other Apps or Safari.

fabrice_d 9y ago
Service Workers Caches are not shared across origins, and they are completely isolated from the browser’s HTTP cache [0]. [0] https://w3c.github.io/ServiceWorker/#cache-objects https://w3c.github.io/ServiceWorker/#cache-objects
madeofpalk 9y ago
Not for the reason you mentioned (because that itself is a nonissue), but I'm glad there exists the sandbox that native apps and the Safari app are completely isolated.

scottlu2 9y ago

I’m curious how Apple will balance PWA support with the business case for the App Store.

kitsunesoba 9y ago

So unless I’m mistaken, PWAs in their most “ideal” form (vs how Apple has implemented them) kinda hang around after I’ve visited them, can use some arbitrary amount of disk space, leave background processes running, and can send push notifications even after I’ve navigated elsewhere. It sounds like to some extent they effectively get to install themselves on my device without my permission, with visiting the site in question acting as consent. Am I incorrect? If all the above is true, I can’t say I’m too happy with the feature as a user and hope there’s a universal off switch buried in settings somewhere. If I choose to use a website over a native app it’s due to its ephemerality, so I have no interest in web apps that stay past their welcome. If on the other hand the behavior is 100% opt in, that’s fine as long as I’m not shown banners trying to sell me on the PWA all the time.

mcintyre1994 9y ago
My understanding is that this behaviour is all only if you save the web app to the home screen (from Safari).
aeharding 9y ago
Just like a native app, the process requires user approval ("add to homescreen" vs "install"). A large difference, however, is that native apps go through Apple's approval process.
- madeofpalk 9y ago
  Does the Service Worker caching ability require approval?
  - anderber 9y ago
    I don't think so, just SSL is needed.
nfRfqX5n 9y ago
they will "hang around" after you visit in terms of caching. it'll cache whatever they've coded for.

LeanderK 9y ago

What about macOS? Are PWAs limited to mobile?

madeofpalk 9y ago
"PWA" isn't actually a real thing. This article focuses on Web App Manifest, and Service Workers (Caching). Safari on macOS definitely has Service Workers, but I'm not sure Web App Manifest support on desktop (nor am I clear on how that would make sense)
- LeanderK 9y ago
  I was speaking about the concept. So essentially using ServiceWorkers, Web App Manifest etc. to produce something that resembles native apps. Why would it not make sense? I was just thinking about giving macOS the same functionality as iOS (so "installing" web-pages), having them in the dock and giving them a different UI. I have some electron apps installed on my mac that don't need much more functionality and could just be converted to a PWA if supported on macOS.

LeanderK 9y ago

Are there some quick, easy and usable UI-frameworks for buttons etc. and other common UI-Elements? I am a bit out of the loop in the web-ecosystem, but the PWA look very interesting.

hilti 9y ago
Check out Framework7.io - it's easy to use and mimics iOS and Android pretty well.
WA 9y ago
Ionic. I found it to have the most polished components. Better than Framework7. Also, you get a PWA with zero additional config when developing your SPA with Ionic. I’m happy with it.

kaycebasques 9y ago

If you’re wondering what exactly makes something a PWA, check out the Progressive Web App Checklist for the canonical definition. https://developers.google.com/web/progressive-web-apps/checklist https://developers.google.com/web/progressive-web-apps/check... Check out the case studies for why businesses are (rightfully, IMO) interested in PWAs. https://developers.google.com/web/showcase/2017/ https://developers.google.com/web/showcase/2017/ Disclosure: I work on Google Web DevRel team

Klathmon 9y ago

This article doesn't mention what is in my opinion the worst part of iOS PWAs (or web development in general). The engine that runs a PWA (or web-view, or app added to the home screen) is completely different than the one in safari. The "WebView" engine, (specifically a UIWebView, WKWebView, or SFSafariViewController) don't have some features turned on, like WebRTC. And there are rendering differences between the 2 engines. I was really screwed by this recently. I saw iOS 11 was to get WebRTC and getUserMedia support, so I tested out a POC and found it worked in safari. So I started building it out in safari, mostly just turning on the feature if it was supported in safari, and when I went to go test a production version of the app added to the homescreen, it was failing. Turns out It's not only not supported on the WebView, but it still advertises that it's supported, and you just need to catch the failure when you go to use it to know that it's not supported... Now I either had to tell my users to REMOVE the bookmark on the homescreen if they were to use this new feature, and warn people to NEVER add the app to the homescreen as it would break the feature, or just forgo the feature entirely, which is what I ended up doing.

makmanalp 9y ago
Oh god, please not another substandard / badly maintained embedded engine. One Microsoft Outlook was enough for history. Getting emails to look right was a pain for so long.
- oneweekwonder 9y ago
  > embedded engine. I might be wrong but iOS decided from the early days to separate safari and webview. What would be interesting to know is if it is two different libs/renders/codebases or just degradation of features as op pointed out with webview, etc.
  - Klathmon 9y ago
    From my research when I had this issue, (and i'm going from memory here, so forgive any inaccuracies) it looks like it's because Safari uses Safari's rendering engine, while WebView's use "WebKit" with a lot of modifications. As far as I heard from various sources, they are in many ways completely separate codebases, and the reasoning is that since WebKit is very tightly integrated with the OS, it takes them much more time to include new features into WebKit than it does in Safari.

Naomarik 9y ago

The worst thing about trying to make something work in the browser for mobile is getting the UI to utilize the full height. This is common when the UI needs to have both something stickied on the top and bottom of the page. Both Chrome Android and Safari will cut off content if that content is 100vh with their URL bar that comes and goes as you scroll. Then you have full screen mode which iOS does not support but Chrome does, except that on Chrome invoking the keyboard does not tell the page anything about the height that it's taking up. The only browser that gets everything correct is Samsung's default browser. This is pretty ridiculous and the hacks available with current APIs aren't very good compared to if these browsers worked properly with 100vh.

st3fan 9y ago

Just a reminder that if you want the WebKit team to be aware of bugs or things that do not properly work or features/standards that need to be better supported, file bugs at https://bugs.webkit.org https://bugs.webkit.org They also have a mailing list, and one of the things they asked before this SW work started was 'let us know how important this is to you and what your use cases are'. I bet they are still listening and that they would love feedback.

ninkendo 9y ago

So this means the experience of extracting any useful information from any website I click on from a google results page is going to keep getting worse. We already have popups to log in, popups to sign up for newsletters, popups to take surveys, popups to install the app instead of viewing the website, full-screen ads, popups to enable notifications, popups for a site to access my location, popups about enabling cookies, and popups telling me to stop blocking popups. Every site now thinks just because I'm clicking on it from a search result page means I want to engage in some semipermanent relationship with them, before I even get a chance to view the site. Now we just add one more thing to the pile of things every website under the sun will try to get me to do just because I clicked one link. Remember when web pages were just documents you could view? Honestly? Fuck the web.