{"id":6719,"date":"2021-04-08T09:58:00","date_gmt":"2021-04-08T08:58:00","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=6719"},"modified":"2021-04-07T16:53:47","modified_gmt":"2021-04-07T15:53:47","slug":"how-easy-is-it-to-submit-progressive-web-apps-to-the-app-store","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/how-easy-is-it-to-submit-progressive-web-apps-to-the-app-store\/","title":{"rendered":"How easy is it to submit Progressive Web Apps to the App Store?"},"content":{"rendered":"\n<p>TL;DR Follow <a href=\"https:\/\/developer.chrome.com\/docs\/android\/trusted-web-activity\/quick-start\/\">this guide<\/a> or visit <a href=\"https:\/\/www.pwabuilder.com\/\">PWABuilder<\/a> and you\u2019ll have a PWA submitted to Google Play in no time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Some back story<\/h2>\n\n\n\n<p>For the past few years, probably since it showed up as a testable metric in Google\u2019s Lighthouse tool, we\u2019ve followed the necessary steps to ensure our websites (big or small) meet the criteria of a Progressive Web Application (PWA).<\/p>\n\n\n\n<p>So long as you\u2019re implementing a simple offline page rather than attempting to make an entire website available offline, I\u2019ve found creating a PWA is fairly straight-forward, as once created, your basic service worker is transferable from project to project with minimal editing.<\/p>\n\n\n\n<p>Once you have your offline page, creating a PWA is mostly a case of generating the correct icons and a manifest file which <a href=\"https:\/\/realfavicongenerator.net\">realfavicongenerator.net<\/a> currently produces the bulk of.<\/p>\n\n\n\n<p>Having done this for a number of projects it was only recently that we were approached by a client asking if it were possible to submit PWAs to the different App Stores. Having not attempted this before I set about doing some research.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apple not very progressive<\/h2>\n\n\n\n<p>While Apple doesn\u2019t explicitly say PWAs can\u2019t be submitted to their App Store their <a href=\"https:\/\/developer.apple.com\/app-store\/review\/guidelines\/\">Review Guidelines<\/a> suggest that an informational\/marketing site like ours lacks anything \u201capp-like\u201d to pass their review guidelines:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Your app should include features, content, and UI that elevate it beyond a repackaged website. If your app is not particularly useful, unique, or \u201capp-like,\u201d it doesn\u2019t belong on the App Store.<\/em><\/p><\/blockquote>\n\n\n\n<p>The web seems to be conflicted on what\u2019s possible when it comes to PWA\u2019s on the App Store. Given Apple has been sluggish at adopting new web technologies, especially PWAs, it\u2019s unsurprising that they may not yet have fully embraced PWAs. Without more consensus on if it\u2019s possible and how best to go about it, I decided to file this one under \u201ctry again later\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Google\u2019s more playful<\/h2>\n\n\n\n<p>Finding articles that guide you through submitting a PWA to Google Play is far easier. With Chrome supporting Trusted Web Activity and Custom Tabs it\u2019s possible to package up your PWA and submit your app through their Play Console.<\/p>\n\n\n\n<p>When initially beginning this project, I found the following articles, but they\u2019re a little outdated.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/css-tricks.com\/how-to-get-a-progressive-web-app-into-the-google-play-store\/\">CSS Tricks<\/a><\/li><li><a href=\"https:\/\/fireship.io\/lessons\/pwa-to-play-store\/\">Fireship<\/a><\/li><\/ul>\n\n\n\n<p>Both rely on you getting to know Android App Studio and unfortunately resulted in an app that crashed for some users. While that\u2019s not likely the fault of these articles, they didn\u2019t provide the results we were looking for.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bubblewrap<\/h3>\n\n\n\n<p>It was only when starting to writing this blog post that I discovered there are other, <a href=\"https:\/\/developer.chrome.com\/docs\/android\/trusted-web-activity\/quick-start\/\">far easier means of packaging your PWA into an app<\/a>. So, I paused writing and tried again using <a href=\"https:\/\/github.com\/GoogleChromeLabs\/bubblewrap\">Bubblewrap<\/a>. I chose this over <a href=\"https:\/\/www.pwabuilder.com\/\">PWABuilder<\/a> but as this is simply a graphical interface for Bubblewrap, I\u2019d expect both to work just as well.<\/p>\n\n\n\n<p>What both of these do is take Android App Studio completely out of the equation (though you can use it to tweak the code Bubblewrap outputs) making the entire process far quicker, easier for novices and really the big benefit for us was it solved our app crashing issue.<\/p>\n\n\n\n<p>The result is a fully fledged Bronco PWA installable from Google Play, and you can <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=co.uk.bronco\">download it here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">But does it work?<\/h2>\n\n\n\n<p>Yes, as far as we know. As this project was a proof of concept and our PWA has a limited audience I don\u2019t have statistics on how many devices successfully support the app, but I do know that on some devices where we experienced crashes initially, we now no longer see that happening.<\/p>\n\n\n\n<p>It\u2019s proven to be an interesting project to tackle, and would certainly have been far easier if I\u2019d found Bubblewrap initially, but in case you\u2019re considering doing the same here\u2019s a few of the issues I came across along the way:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Install Chrome 72 of higher<\/h3>\n\n\n\n<p>When using Android App Studio (and following the initial guides like those on CSS Tricks) our PWA would crash displaying the error \u201cInstall Chrome 72 or higher\u201d. As errors go it\u2019s pretty unambiguous, that is until you find that the device crashing is one of the latest Google Pixel devices, running the latest version of Android and the latest version of Chrome.<\/p>\n\n\n\n<p>Trusted Web Activities (TWA) was introduced in Chrome 72, which was released in early 2019, and is necessary for our PWA to work. While I expect some devices will exist that don\u2019t support our PWA I\u2019m pretty sure that the device described above isn\u2019t one of them.<\/p>\n\n\n\n<p>The error also appeared when using Android emulators, so wasn\u2019t specific to a single device. With limited Android products available across the team, it was tricky to understand why some devices worked and other didn\u2019t.<\/p>\n\n\n\n<p>Turning to the interwebs provided no resolution, which left me attempting to follow a different process of creating the APK to submit to Google, but the error persisted until I moved to using Bubblewrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Android App Studio: Not for beginners<\/h3>\n\n\n\n<p>I\u2019d assume most people who are reading this article won\u2019t be using Android App Studio. With other means available it would be self-castigation to use this to create a PWA if you have no prior experience with it.<\/p>\n\n\n\n<p>While the guides prove a step-by-step process to go through, they only show you so much, and aren\u2019t written with the expectation that the result is an app that crashes some of the time, with an error that doesn\u2019t match reality.<\/p>\n\n\n\n<p>With no experience of using Android Studio, and working in unfamiliar code it\u2019s like asking me to fix a car. Simply because I can drive, fuel and maintain it doesn\u2019t mean that if the brakes fail, you\u2019ll find me rushing to grab a spanner.<\/p>\n\n\n\n<p>Though I managed to squash a few bugs earlier in the process and attempted alternative build processes the result was still a buggy app with no clear route to a solution. Thankfully alternatives exist.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">One Click Submit<\/h3>\n\n\n\n<p>While not exactly a one click submit process both Bubblewrap (a cli process) or PWABuilder (an online service) provide what is likely as close as can be achieved.<\/p>\n\n\n\n<p>One step further would be if Google were to provide this functionality within Google Play Console. Rather than require the upload of a packaged app they could accept a URL for a PWA and create the necessary files as PWABuilder does.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bubblewrap isn\u2019t entirely issue free<\/h3>\n\n\n\n<p>Though it ultimately resulted in a more stable app in comparison to Android App Studio, using Bubblewrap wasn\u2019t error free.<br>As you\u2019ll see on the <a href=\"https:\/\/github.com\/GoogleChromeLabs\/bubblewrap\">Bubblewraps Github page<\/a> there are a number of issues listed. For us we came across <a href=\"https:\/\/github.com\/GoogleChromeLabs\/bubblewrap\/issues\/481\">this issue<\/a>, which thankfully included a suitable and simple fix.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">$25 Payment<\/h3>\n\n\n\n<p>To create a Google App Developer account required paying the princely sum of $25. For a give it a go project the cost isn\u2019t that much to a business or agency.<\/p>\n\n\n\n<p>For freelancers I wouldn\u2019t wish to presume what is affordable, but as a one-off payment I\u2019d say it\u2019s pretty reasonable. The reason to mention it isn\u2019t because it\u2019s a particularly large barrier to entry but because it\u2019s not mentioned in a number of articles I read so may be a surprise cost to some.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tricky Google Play Console<\/h3>\n\n\n\n<p>The Google Play Console itself I found particularly tricky to get to grips with. Having no background in app development the emphasis put on releases and testing phases was somewhat foreign. I was very much in a work fast mindset and just wanted to get the app uploaded and submitted for review.<\/p>\n\n\n\n<p>To do so required jumping through a few hoops. There\u2019re the obvious bits like having to provide imagery and text that will accompany your app and though questions regarding content for age verification were unexpected, on reflection it made sense that these would be required.<\/p>\n\n\n\n<p>Obviously for bigger apps going through the process of testing internally and releasing to a subset of real users is ideal for ensuring there are no bugs. It took a little time to discover that these weren\u2019t a required part of the process, but eventually I managed to get a better understanding of the process of uploading and submitting an app for review.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The review process<\/h3>\n\n\n\n<p>If you\u2019re on a tight timeframe then launching a brand-new app might not be for you. While subsequent releases appear to sail through the review process fairly quickly (taking minutes) it was a few days between submitting the first version of the app to having it appear in the app store.<\/p>\n\n\n\n<p>For me this just broke up momentum of trying to get to the point of verifying what was possible, but luckily as a proof of concept we weren\u2019t aiming to meet any big deadline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Worth it?<\/h2>\n\n\n\n<p>When you eventually find a quick, easy process that leads seemingly to an error free app then it probably is worth it. The cost isn\u2019t great and understanding the process is certainly a good thing to learn.<\/p>\n\n\n\n<p>Whether or not a PWA should be available within App Stores? I\u2019m a little on the fence. In some ways I agree with Apple\u2019s view that if the PWA is the same as the website what benefit is there to having an App?<\/p>\n\n\n\n<p>At least that\u2019s the case for smaller website, for larger businesses there\u2019s a requirement that they appear where users are. Even for companies as recognisable as Amazon or Ebay to not have a presence in the various app stores would be harmful to their business. But if PWAs can match the functionality of their app counterpart should these businesses not focus their time on a single codebase rather than multiple different versions?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR Follow this guide or visit PWABuilder and you\u2019ll have a PWA submitted to Google Play in no time. Some back story For the past few years, probably since it showed up as a testable metric in Google\u2019s Lighthouse tool, we\u2019ve followed the necessary steps to ensure our websites (big or small) meet the criteria [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-6719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=6719"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6719\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/6720"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=6719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=6719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}