Geekly Articles each Day

I made a PWA and laid out in three app stores. And that's what I found out

I’ve built it in 3 app stores. Here's what I learned .

Recently, I published the progressive web application Chavah Messianic Radio , a music player like Pandora, and put it in three app stores (Google Play, iOS App Store, Windows Store).







The process of laying out was hard and instructive. Here is what I found out.

What for?


You were probably surprised: “Why did you even put the application in the store? Let it live in an open web! ” The fact is that users are concentrated in stores . A generation of people has grown up that we have been taught to look for apps in the respective app stores, and not in the public domain.

As for my application, I had two great reasons for putting it in stores:

  1. User demand.
  2. Restrictions for web applications by Apple on some mobile platforms.

User demand: my users have been asking me for years, “is there an app for Chavah? I did not find it in the store. ” They asked me this question, because we taught them to look for applications in the appropriate stores.

Until recently, I answered:

“Yes, you do not need an application, just go to the site from your phone! He works!".

But I lied.

Real web applications only work on cell phones. And this led me to the second reason: restrictions for Apple’s web applications on some mobile platforms.

Mobile platform developers, like Apple, are completely satisfied with the applications that your phones use to the fullest: get access to your geolocation, play sound in the background, get your GPS coordinates, read all your contacts, play video and audio without interacting with the application , read your mail, intercept typed text, simultaneously execute several processes, use a microphone and a camera, access photos, and do much more.

Apple is completely satisfied.

But only if you pay Apple $ 99 a year for all these privileges.

If you want to use some of the above in the old web application, then, damn it, Apple simply won't allow it. She will not even allow you to request permission .

For my Pandora application, this horrible impotence manifested itself in different ways . Starting from minor annoyances, like “iOS Safari will not allow you to play audio without first interacting with the page”, to major problems, like “iOS Safari will not allow you to play the next song if your application is in the background or if the screen is off.”

And, well, in addition, strange visual anomalies, when you enter text in the text field, and it appears elsewhere on the screen .

In general, in order for my HTML5 music application to work properly on user devices, it was necessary to post it in the store.

Barriers to entry


In an ideal world, publishing an app in stores looks like this:

Your web / cloud host or CI provider:
You have published a progressive web application. Want to publish in app stores?

iOS App Store
Google play
Windows store

Or, as Microsoft is experimenting , your PWA will automatically appear in the store as soon as it is indexed by the Bing bot.

But alas, our world is not perfect. So we are faced with all sorts of proprietary native garbage when we try to put our web applications in stores. Each store has barriers to entry: that is, certain difficulties are created to place the finished application in a particular store.

Here are some of them.

Cost of



Don't make me pay to make my application available to your users. My application enriches your platform. Without good applications, your platform will not be needed by anyone.

Apple used to understand that. When the first iPhone appeared, Steve Jobs firmly believed that the future was in HTML5 and that all applications would become “web-based”. There was no native iPhone SDK for third-party developers. However, since then Apple’s opinion has changed.

Google is asking for a one-time token of $ 25. Perhaps this is done in order to prevent spammers and reduce the number of truly slag applications entering the store.

Microsoft seems to be just trying to increase the number of applications in the store, regardless of the quality.

Winner : Microsoft. It is difficult to win free.

Add native features


In an ideal world, I would not have to write a single line of additional code to integrate my web application into the operating system. Or, as Steve Jobs said in 2007 :

“The Safari engine is entirely in the iPhone. So you can write incredible Web 2.0 and Ajax apps that look and behave just like iPhone apps. And all your applications will be perfectly integrated with iPhone services. They can call, they can send mail, they can search for places on Google Maps ”.

For me, this means that my web application should play music in the background, using standard HTML5 audio tools that work wonderfully in all operating systems. That is, my application announces which file it is losing, and the operating systems consider this and show the current song on the lock screen. In this case, my application plays using the standard HTML5 audio API, and the OS displays on the lock screen controls: play, pause, switch to another file, change the volume, rewind.

Unfortunately, our world is not perfect. All of the above does not work out of the box on all three platforms.

My web application needs the ability to play in the background. And the ability to download URLs from my CDN. Sounds reasonable, right? What about displaying the current song on the lock screen? And playback control from the same screen? How hard is it?

There are three approaches:


Let's take a closer look at each approach:

iOS store . Does your web application need to play audio in the background? Use the cordova plugin . Need to show the current song on the lock screen? Use the cordova plugin . Need to control playback from the lock screen? Use the cordova plugin . Well, you understand. In essence, Cordova allows Apple to consider you a native application. And since you're not a nasty web application, Apple lets you do the same things that native applications are allowed to do. For this you need only native tricks - Cordova-plugins.

Google play It's great that I can only write JS code, and everything will work. No need for Cordova plugins. Of course, this JS will not work anywhere outside of Chrome on Android ... but suddenly one day (in an ideal world!), All mobile browsers implement these web APIs ... and the world will unite. I almost sing the John Lennon utopian hippie anthem.

Windows Store . Want to play audio in the background? Excuse me! It will not work until you announce your intentions in our proprietary property manifest (this is easy) And do not implement this proprietary media interface using window.Windows.SystemMediaTransportControls (not so easy). Otherwise, turn off the sound when the application goes into the background.

Winner : Google. It is enough for me to write only in JavaScript, and the OS just receives signals from my application.

Catching up : Windows. I can still write good old JavaScript, but I have to communicate with the proprietary Windows JS API embedded in my process when executed under Windows. Not too scary.

Loser : Apple. They don't care about web apps. Even worse: it seems they are really hostile to web applications. iOS Safari is a new Internet Explorer 6. It lags behind in almost all modern web standards, especially in the field of progressive web applications. Probably, this is due to business considerations: web applications make it difficult to collect $ 99 per year + 33% of sales fees in applications. Therefore, in order for my web application to work on this platform, I had to pretend that it was a native application.

Registration in stores


To publish PWA in a store, you need to register, go through a business check and overcome bureaucratic obstacles:


For me, the main problem was Apple’s passing a legality check.

At first I went to the site and registered as a developer. Entered your name and company information (I suppose Apple won't allow you to upload an application if you are not a registered legal company?). Clicked "Next".

“The information you entered does not match your D & B profile.”

My ... what?

Googled a bit and found out that the “D & B profile” is Dun and Bradstreet. I have never heard of them before, but it turned out that Apple uses the services of this company to verify information about legal companies.

And it is obvious that my D & B profile does not correspond to what I entered during registration.

Also googled and found out that the Apple-forum for developers is overwhelmed with such posts. No one received an intelligent answer.

Posted in support. After 24 hours, I was answered by mail, so I contacted D & B.



I decided to write to them ... but Apple said that it would take several days to receive a response.
At that moment I wondered if I shouldn’t spit on the whole thing.

While waiting for a response from the D & B support service, I decided to go back to their website, check my data and update the information about the company, which they probably took from the state database.

I have already said, what is this foul language? But I just wanted to publish the finished application in the store.

I went to the D & B website to update my business profile. Surprise! They have a JavaScript bug in the validation logic that does not allow updating the profile. Fortunately, I am a skilled developer. Added an interrupt to their javascript, clicked "Send", changed the isValid flag to true, and you're done! I updated my D & B profile.

Returned to the Apple site for developers -> try again. Registering your company ...

“Error: The information you entered does not match your D & B profile.”

ARE YOU KIDDING ME.

I'm writing to Apple again. "Oh, updating information from D & B in our system can take 24-48 hours."

Well, you understand, because digital information needs two days to travel from server A to server B.

Trying to register in two days ... worked! Now I am a member of the Apple Developer program and can submit applications for approval.

Winner : Google and Microsoft. In both cases, registration took 5 minutes.

Loser : Registering with Apple Developer was slow and painful. It took me about a week. I had to get in touch with two different damn companies. And it took to fix a runtime bug in the JavaScript code on another site to bypass their client-sided curve, so that my information went to Apple so that I could send the app to the store. Well, just ... wow.

If there is any excuse for Apple, then this is their non-profit program 501c3, thanks to which non-profit organizations can be exempted from paying an annual $ 99. I took advantage of this. And, perhaps, thereby complicating the situation.

Packaging, assembly and shipment of the application


Having made a web application, you have to turn it into something that you can send for approval using magic.


The good news is there is a free tool for magically transforming web applications into application packages . It is called PWABuilder . The program analyzes the URL, says what you need to do (for example, add desktop icons to your PWA web manifest). A wizard will help you in three steps to download packages that contain all this magic:


Again, Apple has created the most problems. I don't have a mas. But without it, you cannot build an Xcode project for your PWA.

I don’t want to pay a few thousand dollars to publish my free app on the Apple store. I do not want to pay for the privilege to enrich the platform iOS. Fortunately, MacInCloud costs about $ 25 per month. You are given a Mac with already installed Xcode. You can connect to it remotely using Windows Remote Desktop, or even through a web interface.

But to collect the XCode project and send it to the site is not enough. I had to generate a security certificate on the website for developers, then create a new application profile on a separate iTunes Connect site and send the package for approval there.

But that's not all: because Apple is hostile to web applications, I had to install special frameworks and add Cordova plug-ins, allowing my application to play music in the background, add the current song to the lock screen, control playback there, and other actions.

It took me a week to bring the application to a working state with all sorts of tricks before I could send it to the store.

Winner : Microsoft. Imagine: you can go to the site that generates the package from your web application. Or you can even download command line tools to do all this. Prefer GUIs? At your service free Visual Studio.

Catching up with : Google. Requires Android Studio, but it is free, works everywhere and is easy to use.

Loser : Apple. I should not buy Mac for a few thousand dollars, only to build an application. Confusion with the Apple Dev Center -> iTunes Connect looks like an attempt to detach the bosses of real life from the bosses of developers in iTunes. You just had to merge everything into one Apple Developer Center.

Application Testing


When you finally read all the spells that turn your web application into a mobile application package, you may want to send it to testers before allowing a crowd of unwashed users to it.


Winner : Unclear. Apple Test Flight application is easy to use. The administrator can control the duration of the alpha / beta. Google is also not too annoying, does not even require a separate application.

App Approval


When your product is ready for prime time, you submit it for approval. The application passes an automatic checklist (for example, do you have an launch icon?) And is checked by people (“your application is clone X, we reject it”).


Winner : Apple.

Of course, as a developer, I like that my application instantly hit Google Play. But I suspect only because the man has not looked at it.

And as for human verification, Apple takes the least amount of time to do it. Updates are also approved within 24 hours.

Microsoft got it all right: the initial approval took 3-4 days, and the next update was approved in 24 hours. And the second update, added for the Xbox platform, again claimed 3-4 days.

Conclusion


Get ready PWA, bring it to working condition on mobile platforms and place in stores is hard and worth the money.

Winner : Google. The easiest way to get to their app store. They also have the simplest integration with the native platform, thanks to the standardization of the web API that the OS refers to (hello, favorite navigator.mediaSession).

Catching up : Microsoft. The easiest way is to turn PWA into a package that can be sent to the store using magic (this can be done for free using the PWABuilder website!). Integration with their platform implies automatic implementation of the window.Windows. * API into the JavaScript namespace. Will go.

Loser : Apple. Don't make me buy Mac to build an iOS application. Do not force me to use native wrappers for integration with your platform. Do not bother me with your security certificates, let your build tools make them for me and automatically link them to my account in Dev Center. Don't make me use two different sites: Apple Dev Center and iTunes Connect.

Final thoughts: the web always wins. He crushed Flash. He killed Silverlight. He destroyed native desktop applications. The browser is a powerful client platform. The OS has become a browser launcher and hardware linker.

The web will win in the mobile segment. Developers do not want to develop three separate applications for major platforms. Companies do not want to pay for the development of three applications. We can create powerful web applications - PWA - and pack for all app stores.

Apple is tempted to stop web development. The same temptation took over Microsoft in the late 1990s and early 2000s: it wanted to be a platform for good applications. PWA destroyed these plans, now they are everywhere.

Vanghuy: in the end, PWA will also prevail over native mobile applications. After 5-10 years, native iOS applications will become as common as Win32 C-applications. Apple will kick and squeal, trying to keep iOS Safari away from this trend, blocking the development of PWA in every way (even their recent "support" PWA in iOS Safari 11.1 is simply disfigured PWA ).

I suggest that mobile platforms automatically add high-quality PWA to application stores, or allow developers to easily (for example, free of charge and in three clicks) add PWA themselves.

Source: https://habr.com/ru/post/412769/

More articles:


All Articles