[HN Gopher] Publish your PWA to the iOS App Store
___________________________________________________________________
Publish your PWA to the iOS App Store
Author : judah
Score : 177 points
Date : 2021-10-29 16:55 UTC (6 hours ago)
(HTM) web link (blog.pwabuilder.com)
(TXT) w3m dump (blog.pwabuilder.com)
| allan_s wrote:
| At rosaly.com we've built our "app" with something similar
|
| we didn't go the PWA way (because of app store), but something
| quite similar to the article
|
| 1. we have a symfony website with simple web pages but with a
| "app look" (yes no react , no api, like it's the 2000s all over
| again)
|
| 2. we have a think react native wrapper (at first 17 lines, no
| it's 90s as we support push notification, hardware back button
| etc.) that embed a react-native webview
|
| so we have nearly no javascript, just modern css and we pay
| really attention to performance and it's a dream
|
| 1. no javascript removes a lot of hassle
|
| 2. no api removes a lot of hassle too
|
| 3. html+css and we support all platforms, so a good design and
| backend engineers is all you need
|
| we're live for a year, have raised money and have customers.
| We've been through several store update (to keep react native up
| to date and put some changelog).
|
| I call it "retrogressive-app"
| simonbarker87 wrote:
| Sounds great, shame I only speak English so can't have a proper
| play with it but this approach sounds delightful.
|
| I've recently started a project with just html/css and vanilla
| JS on the front end - no react etc and it's very nice
| geoka9 wrote:
| Thank you for your post!
|
| I'd love to read more about your stack, so of you do a blog
| post, please let us know :)
|
| Would love to see a video of your app in action, too!
| nathancahill wrote:
| Is that small react-native wrapper viewable somewhere? I'd love
| to do something similar.
| dorianmariefr wrote:
| I can share you mine https://gist.github.com/dorianmariefr/e8
| 422538a4eefcc99aa92d...
| bestinterest wrote:
| Sounds like the conclusion Basecamp came to for their apps.
| https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-archite...
|
| Also see
| https://twitter.com/dhh/status/1254870450464686080?lang=en
| achairapart wrote:
| Looking at the app reviews looks like it's also a dream for the
| user (only 5-star ratings!). Kudos to you!
|
| Please consider a blog post with more details or even open
| source some of your stack (especially the react-native bits).
| Like others users here, I'm also very interested in your
| "retrogressive" approach!
| andai wrote:
| 2021: Year of PHP in the pocket
| judge2020 wrote:
| " we pay really attention to performance and it's a dream"
|
| Does this include in low-connectivity environments? The biggest
| advantage of api-driven PWAs is that it supports no-
| connectivity and low-connectivity nicely, assuming you put
| effort into enabling it (having an offline cache of data) and
| having loading indicators visible to the user. With a regular
| page-load-driven application, if i'm on 1 bar of 4G I might get
| the TTFB for a page load and then be waiting as page assets
| slowly load in, staring at a white or half-blank screen the
| entire time.
| allan_s wrote:
| we certainly can sure improve on that side but currently most
| of our pages are at most 2 https call
|
| 1. html of that page, they never go over 30kb non gzipped,
| most svg assets are inline, so once you got it, you got it.
|
| 2. the tailwind.css file, that is cached after the first
| page.
|
| so even if you feel fancy and you use graphql, you can't do
| less 1 http call right ?
| new_stranger wrote:
| Ironically though, phones usually struggle more with single-
| page apps / Javascript heavy sites which have all the client-
| side application logic, 3rd party libraries, and DOM re-
| renders based on state changes.
| allan_s wrote:
| exactly ! most browser will wait for the next to load
| before unloading the current one so with a little css trick
| you can do a nice transition between pages
|
| While most SPA will put you on a weird state (of course you
| can handle it nicely too, but it requires effort for
| something you had for free in the first)
| dfabulich wrote:
| Apple has a rule forbidding this exact thing.
|
| If you get lucky and get a lenient app reviewer, you _might_ be
| able to sneak a PWA onto the App Store this way, but even if you
| do get approved, you 're just as likely to get rejected when
| submitting a bug fix or compatibility update. (This has happened
| to me a number of times before.)
|
| > _4.2 Minimum Functionality_
|
| > _Your app should include features, content, and UI that elevate
| it beyond a repackaged website. If your app is not particularly
| useful, unique, or "app-like," it doesn't belong on the App
| Store. If your App doesn't provide some sort of lasting
| entertainment value or adequate utility, it may not be accepted.
| Apps that are simply a song or movie should be submitted to the
| iTunes Store. Apps that are simply a book or game guide should be
| submitted to the Apple Books Store._
|
| > _4.2.2 Other than catalogs, apps shouldn't primarily be
| marketing materials, advertisements, web clippings, content
| aggregators, or a collection of links._
|
| A "web clipping" is Apple's way of referring to a web site zipped
| up in a WebView, and that's what rule 4.2.2 explicitly forbids.
|
| Apple has rejected a bunch of PWAs wrapped up in WebViews like
| this over the years, and when they do, they're normally rejected
| under 4.2.2. Apple doesn't always notice, but they notice just
| often enough to make this an unacceptable risk for any app you
| actually care about.
|
| IMO the big mistake PWA Builder is making here is that (per OP
| blog post) they do not offer any "iOS-specific integrations."
|
| > Our template doesn't include support for iOS-specific
| functionality like Apple Pay, Sign In with Apple, HealthKit, etc.
|
| Those iOS-specific integrations are the only thing that would
| make these PWAs allowable under rule 4.2. I have gotten PWA games
| approved by pointing out that they support Game Center, for
| example.
|
| Overall, I think PWA Builder is off to a good start, but they
| need a lot more work to be viable.
| yesimahuman wrote:
| This is one reason I really hope they end up adopting Capacitor
| for the iOS and Android output. Capacitor has all those iOS-
| specific integrations that enable an app to be accepted into
| the stores, and they'd get all of that for free but could still
| keep the core PWA-to-native experience the way they want.
| nathancahill wrote:
| I mean, that's on the developer to actually build the PWA that
| does those things right? If you build an "app" as a PWA,
| there's no reason it shouldn't be approved? If you simply wrap
| a website these rules would apply. There's nothing here that
| bans PWAs as I read it.
| remus wrote:
| PWAs are websites, just ones with a lot of functionality, so
| by the letter of apples rules they are not allowed.
|
| From an outside perspective it seems a fairly hard rule to
| enforce though. If you packaged gmails web interface up in to
| an app Id say that has a lot more utility than a flashlight
| app.
| dfabulich wrote:
| Yeah, well, tell that to the App Store reviewers who rejected
| my games.
|
| Their argument basically went like this: Your app is clearly
| a web clipping. It's just your web site wrapped up as an app.
| We can see your web site, it works fine, and this app adds no
| additional value to the web site. You need to add features to
| your app--iOS-specific features--to make it worthy of being
| in the App Store.
|
| I think it's fair to say that you can interpret rule 4.2 (and
| especially 4.2.2, which doesn't define a "web clipping" in
| the guidelines) in a few different ways, and that the
| "strict" App Store reviewers I faced were being perfectly
| reasonable in their interpretation of rule 4.2.
|
| (To be clear, I think rule 4.2 is not a good rule, but I
| think the individual reviewers I spoke with were making a
| reasonable attempt to _interpret_ rule 4.2.)
|
| The "strict" interpretation is reasonable, but your
| interpretation (which I would call a "lax" interpretation) is
| also reasonable. You could say "well, if the web site is app-
| like--if the app has good, useful features--then it has more
| than minimal functionality and is worthy of being in the
| store." Both interpretations make sense.
|
| The problem occurs when you stake your deployment strategy on
| the hope that you don't get a hardline App Store reviewer,
| and now, all of a sudden, you can't push bug fixes or
| compatibility updates to your iOS app, and your users are
| pissed.
| philistine wrote:
| What is said is that if you build something using web tech
| that is not available online it's fine, what you clearly
| did is duplicate what is already available on the web.
|
| Still an incredibly dumb rule.
| reificator wrote:
| This seems easy to solve given Apple's rejection of PWA support
| in Safari, just add a feature that doesn't matter much, like an
| _(opt-in!)_ notification on updates. Safari (and therefore all
| browsers) on iOS don 't support notifications, so you're doing
| something you couldn't do from the website.
|
| https://caniuse.com/?search=notifications
| aaaaaaaaaaab wrote:
| Ummm... yeah, no.
|
| The AppStore review operates on a spirit-of-the-law basis,
| instead of the letter-of-the-law.
| brundolf wrote:
| The above sounds like it's trying to prevent you from wrapping
| up purely informational websites, like that for a specific
| wedding, or a brochure or something (analogous to "simply a
| song or a movie" vs a general music or movies app). Of course
| I'm sure individual reviewers will interpret it differently.
| But I don't think the "intent of the law" is at odds with this
| kind of packaging.
| danr4 wrote:
| Got excited at first but it's missing push notifications which is
| 90% of the reason I even want an app
| sergiotapia wrote:
| And PWAs will never get that support because it's in Google and
| Apples best interest to block it. Some sad shit
| heavyset_go wrote:
| Google implemented PWA support years ago into both Android
| and Chrome, including web push notifications. Apple is the
| only one that purposely doesn't implement necessary features
| for PWAs like web push notifications.
|
| Google and Mozilla have supported the web push API for going
| on 6 to 7+ years now.
| judah wrote:
| PWABuilder already has a "publish to Google Play" feature:
| https://blog.pwabuilder.com/posts/microsoft-and-google-
| team-...
|
| We work with Google -- and even sync with them monthly -- on
| this platform. They are very cooperative and helpful.
|
| And, PWAs published to Google Play can do push notifications
| and anything else PWAs normally do, using just standards-
| based code.
| Someone1234 wrote:
| I'm confused, what are Google blocking? iOS famously lacks
| push notification browser support, but Android's browser and
| third party browsers on the platform all support it on
| Android (and have since forever).
| handrous wrote:
| In my interest, too. Pay attention to non-geeks using this
| "feature" and it's clear that web push is the 3rd party
| toolbar[0] of the modern web. Crap they enable by accident,
| then don't know how to get rid of.
|
| [0] Ask someone who worked with computers in the late 90s and
| 2000s if you don't get the reference.
| simonbarker87 wrote:
| I've released a PWA with Capacitor in both app stores with
| push notifications.
| Drew_ wrote:
| Google already supports Web Push in Chrome. Mozilla in
| Firefox as well. Web Push is only blocked in Safari.
| judah wrote:
| Thanks for the feedback. We're looking to add that in a follow-
| up release.
|
| In the meantime, if you really need it, have a look at this
| project: https://github.com/khmyznikov/ios-pwa-wrap
|
| It's a iOS PWA template that uses push notifications via
| Firebase.
| yesimahuman wrote:
| I would recommend checking out Capacitor which can bring your
| web app/PWA to mobile and has full push support for iOS and
| Android: https://capacitorjs.com/docs/guides/push-
| notifications-fireb...
| danr4 wrote:
| ooh I didn't know they do that. How easy is it to wrap and
| existing PWA?
| ghaff wrote:
| Curious. What are all these things you want to get notified
| about? I pretty much have all notifications turned off besides
| messaging, phone, and alarm.
| danr4 wrote:
| I'm a developer of a web app where users interact with each
| other. Notifying users on in-app activity is the absolute
| most important thing for them and for us.
| marvindanig wrote:
| Try Red Goose? https://goose.red
|
| We provide push notifications along with a few more important
| things that you'd need to wrap your web-app with.
|
| Full disclosure: I'm its founder and you can reach me on
| marvin@goose.red.
| r_singh wrote:
| Reviews anybody?
| Gys wrote:
| > PWA Builder was founded by Microsoft as a community guided,
| open source project to help move PWA adoption forward.
| pjmlp wrote:
| Also because they adopted PWAs as replacement for WinJS.
| TranquilMarmot wrote:
| This sounds great; I've made a few PWAs and wanted to publish
| them on app stores but couldn't quite figure it out so I gave up.
| Might give this a shot.
| nathancahill wrote:
| How's the camera integration? Can you programmatically open the
| camera to capture a picture for uploading? Or does it still need
| the "file picker" menu interface?
| l72 wrote:
| I have used this for some of my web apps, and it has been really
| great to have them in the store. However, Apple has given me a
| hard time on some of my apps since it is against their rules if
| your app doesn't provide additional utility over a website.
| ngokevin wrote:
| What sorts of apps were given a hard time? Like where's the
| line between a full webapp and website. Does the webapp need to
| hook into device-specific APIs to not be a website?
| l72 wrote:
| It is hard to say with Apple, it seems highly dependent upon
| the reviewer. In one case, I just resubmitted the same app
| with a different build number and it then passed through
| review just fine. /shrug
| samwillis wrote:
| Whats the advantage of this over Capacitor
| (https://capacitorjs.com) from the Ionic team?
|
| Capacitor supports notifications and would be more extendable
| going forward I think. Although maybe more work upfront?
| judah wrote:
| I'm no expert in Capacitor, but from what I understand,
| different goals.
|
| Capacitor aims to give expose native functionality via runtimes
| and plugins. A kind of mixed web/native hybrid.
|
| PWABuilder's aim is more limited in scope: to make PWAs great
| on iOS. We are not so much concerned about exposing native
| functionality, and more concerned about making PWA
| functionality work everywhere.
|
| We address some of this in our iOS FAQs:
| https://blog.pwabuilder.com/docs/ios-faq
| samwillis wrote:
| Just had a quick look and it seems you can achieve the same
| thing with Capacitor:
| https://capacitorjs.com/docs/web/progressive-web-apps
| judah wrote:
| Still different goals there. You add Capacitor's JS runtime
| to your PWA then use plugins and other Capacitor-based
| capabilities.
|
| PWABuilder's goal is more limited in scope: take your
| existing PWA, no changes, and publish to app stores.
|
| For some folks, Capacitor will be the right answer. But we
| think there's value in making PWAs as-is run well on iOS.
| candiddevmike wrote:
| I did just that when using capacitor (pointed it to my
| dist folder, good to go). What other steps do you think
| capacitor requires that PWA builder doesn't?
| yesimahuman wrote:
| Capacitor creator here: agreed that Capacitor absolutely
| could be used by the PWA Builder team to power this and
| still keep their goals/values in mind (we also have a
| connection through Justin at PWA Builder who was an old
| Ionic team member!)
|
| I am going to chat w/ Judah about this, already have a
| convo on github
| gavinray wrote:
| It has been really cool to watch the evolution from
| Apache PhoneGap -> Cordova -> Ionic -> Capacitor (where
| now Ionic is the UI component library)
|
| I had strong negative experiences/opinions, all the way
| up until Capacitor. It's good tech and an undervalued
| option when compared to React Native.
|
| _Source: Have built mobile apps with PhoneGap, React
| Native, NativeScript, and Android._
|
| I'm not a fan of React Native -- though my last
| experiences with it were many years ago so I'm sure much
| has changed.
|
| Also I don't think most "native apps" need to be native
| apps. They want a place on the homescreen usually, not
| use of underlying hardware API's like accelerometers.
|
| Most "native apps" should really be installable PWA's or
| using something like Capacitor IMO.
| yesimahuman wrote:
| Appreciate the kind words! Capacitor is younger than
| anything on that list so it still has a ways to go in
| terms of market awareness, but the general reaction we
| see when devs try it out is very positive. When we
| explain to people that you can build a native
| iOS/Android/Web/Desktop app with your favorite web stack
| and existing web code in many cases, that's turning out
| to be pretty compelling. And, for people that tried
| Cordova in the past, Capacitor's DX is pretty
| dramatically different and improved.
| SmileyJames wrote:
| Capacitor is great! At the BBC, we significantly reduced the
| cost of producing apps for children by adopting Capacitor. We
| write one React PWA and ship it to the Play Store, iOS App
| Store, Amazon App store and Amazon Kids+ store. It's native
| integration helps with push notifications and also reliable
| persistent storage on device.
| riantogo wrote:
| Can you accept in-app payments with Capacitor? Asking because I
| did not see it listed as an official plugin.
|
| My goal is to create a simple kids app that can be monetized
| via monthly subscription. I can build a traditional website,
| but don't have much clue on the easiest way to also publish it
| as an app (both for iOS and Android). Any recommendation on how
| to go about it if my skill is web development?
| yesimahuman wrote:
| Absolutely, you can do anything native in Capacitor. In this
| case we have a guide: https://capacitorjs.com/docs/guides/in-
| app-purchases
| riantogo wrote:
| Awesome. Thanks.
| otterley wrote:
| Please don't use tools like these. Customers want native apps,
| not thinly-wrapped websites disguised as apps.
|
| (If you reply to this thread, insisting that your customers don't
| care, please tell us what your app is and how what value it
| provides customers that exceeds the website's functionality.)
| Aulig wrote:
| Disclosure: I operate a similar but commercial service at
| https://webtoapp.design
|
| Whether your webview app will get published in the app store
| depends on how "app-like" your PWA looks and if you get a strict
| app reviewer.
|
| I instead add native components to the apps I create to make sure
| they look more like an app, which works well to get the app
| approved by Apple.
|
| From my experience, push notifications are a very important
| feature too, almost all of my customers want that. I haven't
| found a way to reroute browser notifications to the app, so
| instead I use firebase to let my customers send notifications.
| judah wrote:
| I wasn't familiar with your site. Looks really cool, and you
| support some platforms we don't. Best of luck to your project!
|
| Seems Firebase is the way a lot of folks are achieving Push
| Notifications on iOS.
| Aulig wrote:
| Thanks!
|
| Yea, Firebase is pretty nice because you can use it on both
| Android and iOS and it's free :)
| dorianmariefr wrote:
| OpenSignal is free too and works really well
| sebslomski wrote:
| Looks really interesting. Well built website with very well
| working CTA!
| dorianmariefr wrote:
| My app is a React Native app with a webview, quite simple to
| create/manage/modify and I have notifications, native logins,
| etc. with communication between the webview and the native app
| kristiandupont wrote:
| >Despite several meetings, we were unable to get an official
| answer from Apple.
|
| Sigh.
| slt2021 wrote:
| can this dramatically reduce cost of mobile app development, esp
| for small-to-medium businesses?
| judah wrote:
| We think so.
|
| PWAs can alleviate the need to build 4 separate apps:
|
| - Web app - Android app - iOS app - Windows app
|
| With PWAs, you can build a Progressive Web App, and publish it
| everywhere. We recognize that this doesn't work for every
| scenario -- maybe you need to use some non-standard proprietary
| technology for instance -- but for a majority of apps, it works
| well and saves you development costs.
| astashov wrote:
| If it works, this is awesome. I've used it before to add my PWA
| (liftosaur.com) to the Android store, and it's way easier to get
| users from there, than to explain them how to install PWA. Will
| try it out for iOS definitely.
| amelius wrote:
| Why are they helping Apple kill the web?
| crehn wrote:
| > Progressive Web Apps (PWAs) are web apps that use service
| workers, manifests, and other web-platform features in
| combination with progressive enhancement to give users an
| experience on par with native apps.
| fullwaza wrote:
| Neat, but what stops someone from publishing your PWA under their
| own dev account? Sure you still control the site and data, but
| they could publish with inappropriate icons, wording, etc. It
| seems like maybe there is some potential for abuse.
| my123 wrote:
| App Review, the same as any other app really.
|
| (and ofc, the risk of false negatives is present)
| Drew_ wrote:
| This potential for others stealing your content has always been
| present though I suppose this tool would make that even easier.
| Android has the Trusted Web Activity which somewhat solves this
| problem: https://blog.chromium.org/2019/02/introducing-trusted-
| web-ac...
___________________________________________________________________
(page generated 2021-10-29 23:00 UTC)