{"id":286048,"date":"2019-04-19T07:29:30","date_gmt":"2019-04-19T14:29:30","guid":{"rendered":"http:\/\/css-tricks.com\/?p=286048"},"modified":"2019-04-19T07:29:30","modified_gmt":"2019-04-19T14:29:30","slug":"how-to-get-a-progressive-web-app-into-the-google-play-store","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-get-a-progressive-web-app-into-the-google-play-store\/","title":{"rendered":"How to Get a Progressive Web App into the Google Play Store"},"content":{"rendered":"<p><a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\" rel=\"noopener\">PWA (Progressive Web Apps)<\/a> have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: &#8220;Will my users be able to install the app using app stores?&#8221; The answer has traditionally been no, but this changed with Chrome 72 which shipped a new feature called <a href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/using-twa\" rel=\"noopener\">TWA (Trusted Web Activities)<\/a>. <\/p>\n<blockquote><p><strong>Trusted Web Activities<\/strong> are a new way to integrate your web-app content such as your PWA with yourAndroid app using a protocol based on Custom Tabs.<\/p><\/blockquote>\n<p>In this article, I will use <a href=\"https:\/\/www.netguru.com\/\" rel=\"noopener\">Netguru\u2019s<\/a> existing PWA (<a href=\"https:\/\/wordguru.netguru.com\/\" rel=\"noopener\">Wordguru<\/a>) and explain step-by-step what needs to be done to make the application available and ready to be installed straight from the Google Play app store.<\/p>\n<p><!--more--><\/p>\n<p class=\"explanation\">Some of the things we cover here may sound silly to any Android Developers out there, but this article is written from the perspective of a front-end developer, particularly one who has never used Android Studio or created an Android Application. Also, please do note that a lot of what we&#8217;re covering here is still extremely experimental since it&#8217;s limited to Chrome 72.<\/p>\n<h3>Step 1: Set up a Trusted Web Activity<\/h3>\n<p>Setting up a <abbr title=\"Trusted Web Activity\">TWA<\/abbr> doesn\u2019t require you to write any Java code, but you will need to have <a href=\"https:\/\/developer.android.com\/studio\/\" rel=\"noopener\">Android Studio<\/a>. If you\u2019ve developed iOS or Mac software before, this is a lot like Xcode in that it provides a nice development environment designed to streamline Android development. So, grab that and meet me back here.<\/p>\n<h4>Create a new <abbr title=\"Trusted Web Activity\">TWA<\/abbr> project in Android Studio<\/h4>\n<p>Did you get Android Studio? Well, I can\u2019t actually hear or see you, so I\u2019ll assume you did. Go ahead and crack it open, then click on &#8220;Start a new Android Studio project.&#8221; From there, let\u2019s choose the &#8220;Add No Activity&#8221; option, which allows us to configure the project.<\/p>\n<p>The configuration is fairly straightforward, but it\u2019s always good to know what is what:<\/p>\n<ul>\n<li><strong>Name<\/strong> The name of the application (but I bet you knew that).<\/li>\n<li><strong>Package name:<\/strong> An <a href=\"https:\/\/developer.android.com\/guide\/topics\/manifest\/manifest-element#package\" rel=\"noopener\">identifier<\/a> for Android applications on the <a href=\"https:\/\/play.google.com\" rel=\"noopener\">Play Store<\/a>. It must be unique, so I suggest using the URL of the <abbr title=\"Progressive Web App\">PWA<\/abbr> in reverse order (e.g. <code>com.netguru.wordguru<\/code>).<\/li>\n<li><strong>Save location:<\/strong> Where the project will exist locally.<\/li>\n<li><strong>Language:<\/strong> This allows us to select a specific code language, but there\u2019s no need for that since our app is already, you know, written. We can leave this at Java, which is the default selection.<\/li>\n<li><strong>Minimum API level:<\/strong> This is the version of the Android API we\u2019re working with and is required by the support library (which we\u2019ll cover next). Let\u2019s use API 19.<\/li>\n<\/ul>\n<p>There are  few checkboxes below these options. Those are irrelevant for us here, so leave them all unchecked, then move on to Finish.<\/p>\n<figure id=\"post-286064\" class=\"align-left media-286064\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/s_B0873689EA50413EA11DE0E251C79D95AC091600D224AE9E30EBEB80DF5C9068_1550759941286_Screenshot2019-02-21at15.38.48.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<h4>Add <abbr title=\"Trusted Web Activity\">TWA<\/abbr> Support Library<\/h4>\n<p>A support library is required for <abbr title=\"Trusted Web Activity\">TWA<\/abbr>s. The good news is that we only need to modify two files to fill that requirement and the both live in the same project directory: <code>Gradle Scripts<\/code>. Both are named <code>build.gradle<\/code>, but we can distinguish which is which by looking at the description in the parenthesis.<\/p>\n<figure id=\"post-286065\" class=\"align-left media-286065\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/play-02.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>There\u2019s a Git package manager called <a href=\"https:\/\/jitpack.io\/\" rel=\"noopener\">JitPack<\/a> that\u2019s made specifically for Android apps. It\u2019s pretty robust, but the bottom line is that it makes publishing our web app a breeze. It is a paid service, but I\u2019d say it\u2019s worth the cost if this is your first time getting something into the Google Play store.<\/p>\n<p class=\"exaplanation\"><strong>Editor Note:<\/strong> This isn\u2019t a sponsored plug for JitPack. It\u2019s worth calling out because this post is assuming little-to-no familiarity with Android Apps or submitting apps to Google Play and it has less friction for managing an Android App repo that connects directly to the store. That said, it\u2019s totally not a requirement.<\/p>\n<p>Once you\u2019re in JitPack, let\u2019s connect our project to it. Open up that <code>build.gradle (Project: Wordguru)<\/code> file we just looked at and tell it to look at JitPack for the app repository:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">allprojects {\r\n  repositories {\r\n    ...\r\n    maven { url 'https:\/\/jitpack.io' }\r\n    ...\r\n  }\r\n}<\/code><\/pre>\n<p>OK, now let\u2019s open up that other <code>build.gradle<\/code> file. This is where we can add any required dependencies for the project and we do indeed have one:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ build.gradle (Module: app)\r\n\r\ndependencies {\r\n  ...\r\n  implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'\r\n  ...\r\n}<\/code><\/pre>\n<p><abbr title=\"Trusted Web Activity\">TWA<\/abbr> library uses Java 8 features, so we\u2019re going to need enable Java 8. To do that we need to add <code>compileOptions<\/code> to the same file:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ build.gradle (Module: app)\r\n\r\nandroid {\r\n  ...\r\n  compileOptions {\r\n    sourceCompatibility JavaVersion.VERSION_1_8\r\n    targetCompatibility JavaVersion.VERSION_1_8\r\n  }\r\n  ...\r\n}<\/code><\/pre>\n<p>There are also variables called <code>manifestPlaceholders<\/code> that we\u2019ll cover in the next section. For now, let\u2019s add the following to define where the app is hosted, the default URL and the app name:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ build.gradle (Module: app)\r\n\r\nandroid {\r\n  ...\r\n  defaultConfig {\r\n    ...\r\n    manifestPlaceholders = [\r\n      hostName: \"wordguru.netguru.com\",\r\n      defaultUrl: \"https:\/\/wordguru.netguru.com\",\r\n      launcherName: \"Wordguru\"\r\n    ]\r\n    ...\r\n  }\r\n  ...\r\n}<\/code><\/pre>\n<h4>Provide app details in the Android App Manifest<\/h4>\n<p>Every Android app has an <a href=\"https:\/\/developer.android.com\/guide\/topics\/manifest\/manifest-intro\" rel=\"noopener\">Android App Manifest<\/a> (<code>AndroidManifest.xml<\/code>) which provides essential details about the app, like the operating system it\u2019s tied to, package information, device compatibility, and many other things that help Google Play display the app\u2019s requirements.<\/p>\n<p>The thing we\u2019re really concerned with here is <a href=\"https:\/\/developer.android.com\/guide\/topics\/manifest\/activity-element\" rel=\"noopener\">Activity<\/a> (<code>&lt;activity&gt;<\/code>). This is what implements the user interface and is required for the &#8220;Activities&#8221; in &#8220;Trusted Web Activities.&#8221;<\/p>\n<p>Funny enough, we selected the &#8220;Add No Activity&#8221; option when setting up our project in Android Studio and that\u2019s because our manifest is empty and contains only the application tag.<\/p>\n<p>Let\u2019s start by opening up the manfifest file. We\u2019ll replace the existing <code>package<\/code> name with our own application ID and the <code>label<\/code> with the value from the <code>manifestPlaceholders<\/code> variables we defined in the previous section.<\/p>\n<p>Then, we\u2019re going to actually add the <abbr title=\"Trusted Web Activity\">TWA<\/abbr> activity by adding an <code>&lt;activity&gt;<\/code> tag inside the <code>&lt;application&gt;<\/code> tag.<\/p>\n<pre rel=\"XML\"><code class=\"language-html\"><!-- manifests\/AndroidManifest.xml -->\r\n\r\n&lt;manifest\r\n  xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n  package=\"com.netguru.wordguru\"&gt; \/\/ highlight\r\n\r\n  &lt;application\r\n    android:allowBackup=\"true\"\r\n    android:icon=\"@mipmap\/ic_launcher\"\r\n    android:label=\"${launcherName}\" \/\/ highlight\r\n    android:supportsRtl=\"true\"\r\n    android:theme=\"@style\/AppTheme\"&gt;\r\n\r\n    &lt;activity\r\n      android:name=\"android.support.customtabs.trusted.LauncherActivity\"\r\n      android:label=\"${launcherName}\"&gt; \/\/ highlight\r\n\r\n      &lt;meta-data\r\n        android:name=\"android.support.customtabs.trusted.DEFAULT_URL\"\r\n        android:value=\"${defaultUrl}\" \/&gt; \/\/ highlight\r\n\r\n      <!-- This intent-filter adds the TWA to the Android Launcher -->\r\n      &lt;intent-filter&gt;\r\n        &lt;action android:name=\"android.intent.action.MAIN\" \/&gt;\r\n        &lt;category android:name=\"android.intent.category.LAUNCHER\" \/&gt;\r\n      &lt;\/intent-filter&gt;\r\n\r\n      <!--\r\n        This intent-filter allows the TWA to handle Intents to open\r\n        our hostName\r\n        -->\r\n      &lt;intent-filter android:autoVerify=\"true\"&gt;\r\n        &lt;action android:name=\"android.intent.action.VIEW\"\/&gt;\r\n        &lt;category android:name=\"android.intent.category.DEFAULT\" \/&gt;\r\n        &lt;category android:name=\"android.intent.category.BROWSABLE\"\/&gt;\r\n        &lt;data\r\n          android:scheme=\"https\"\r\n          android:host=\"${hostName}\"\/&gt; \/\/ highlight\r\n      &lt;\/intent-filter&gt;\r\n    &lt;\/activity&gt;\r\n  &lt;\/application&gt;\r\n&lt;\/manifest&gt;<\/code><\/pre>\n<p>And that, my friends, is Step 1. Let\u2019s move on to Step 2.<\/p>\n<h3>Step 2: Verify the relationship between the website and the app<\/h3>\n<p><abbr title=\"Trusted Web Activity\">TWA<\/abbr>s require a connection between the Android application and the <abbr title=\"Progressive Web App\">PWA<\/abbr>. To do that, we use <a href=\"https:\/\/developers.google.com\/digital-asset-links\/v1\/getting-started\" rel=\"noopener\">Digital Asset Links<\/a>.<\/p>\n<p>The connection must be set on both ends, where <abbr title=\"Trusted Web Activity\">TWA<\/abbr> is the application and <abbr title=\"Progressive Web App\">PWA<\/abbr> is the website.<\/p>\n<p>To establish that connection we need to modify our  <code>manifestPlaceholders<\/code> again. This time, we need to add an extra element called <code>assetStatements<\/code> that keeps the information about our <abbr title=\"Progressive Web App\">PWA<\/abbr>.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">\/\/ build.gradle (Module: app)\r\n\r\nandroid {\r\n  ...\r\n  defaultConfig {\r\n    ...\r\n    manifestPlaceholders = [\r\n      ...\r\n      assetStatements: '[{ \"relation\": [\"delegate_permission\/common.handle_all_urls\"], ' +\r\n        '\"target\": {\"namespace\": \"web\", \"site\": \"https:\/\/wordguru.netguru.com\"}}]'\r\n      ...\r\n    ]\r\n    ...\r\n  }\r\n  ...\r\n}<\/code><\/pre>\n<p>Now, we need to add a new <code>meta-data<\/code> tag to our <code>application<\/code> tag. This will inform the Android application that we want to establish the connection with the application specified in the <code>manifestPlaceholders<\/code>.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\"><!-- manifests\/AndroidManifest.xml -->\r\n\r\n&lt;manifest\r\n  xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n  package=\"${packageId}\"&gt;\r\n\r\n  &lt;application&gt;\r\n    ...\r\n      &lt;meta-data\r\n        android:name=\"asset_statements\"\r\n        android:value=\"${assetStatements}\" \/&gt;\r\n    ...\r\n  &lt;\/application&gt;\r\n&lt;\/manifest&gt;<\/code><\/pre>\n<p>That\u2019s it! we just established the application to website relationship. Now let\u2019s jump into the conversion of website to application.<\/p>\n<p>To establish the connection in the opposite direction, we need to create a <code>.json<\/code> file that will be available in the app\u2019s <code>\/.well-known\/assetlinks.json<\/code> path. The file can be created using a generator that\u2019s built into Android Studio. See, I told you Android Studio helps streamline Android development!<\/p>\n<p>We need three values to generate the file:<\/p>\n<ul>\n<li><strong>Hosting site domain:<\/strong> This is our <abbr=\"Progressive Web App\">PWA<\/abbr> URL (e.g. <code>https:\/\/wordguru.netguru.com\/<\/code>).<\/li>\n<li><strong>App package name:<\/strong> This is our <abbr title=\"Trusted Web Activity\">TWA<\/abbr> package name (e.g. <code>com.netguru.wordguru<\/code>).<\/li>\n<li><strong>App package fingerprint (SHA256):<\/strong> This is a unique cryptographic hash that is generated based on Google Play Store keystore.<\/li>\n<\/ul>\n<p>We already have first and second value. We can get the last one using Android Studio.<\/p>\n<p>First we need to generate signed APK. In the Android Studio go to: <kbd>Build \u2192 Generate Signed Bundle or APK \u2192 APK<\/kbd>.<\/p>\n<figure id=\"post-286072\" class=\"align-left media-286072\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/s_B0873689EA50413EA11DE0E251C79D95AC091600D224AE9E30EBEB80DF5C9068_1550496798628_Screenshot2019-02-18at14.33.09.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Next, use the  existing keystore, if you already have one. If you need one, go to  &#8220;Create new\u2026&#8221; first.<\/p>\n<p>Then let\u2019s fill out the form. Be sure to remember the credentials as those are what the application will be signed with and they confirm your ownership of the application.<\/p>\n<figure id=\"post-286066\" class=\"align-left media-286066\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/play-03.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>This will create a keystore file that is required to generate the app package fingerprint (SHA256). <strong>This file is extremely important<\/strong> as it is works as a proof that you are the owner of the application. If this file is lost, you will not be able to do any further updates to your application in the store.<\/p>\n<p>Next up, let\u2019s select type of bundle. In this case, we\u2019re choosing &#8220;release&#8221; because it gives us a production bundle. We also need to check the signature versions.<\/p>\n<figure id=\"post-286067\" class=\"align-left media-286067\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/s_B0873689EA50413EA11DE0E251C79D95AC091600D224AE9E30EBEB80DF5C9068_1550496985643_Screenshot2019-02-18at14.36.03.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>This will generate our APK that will be used later to create a release in Google Play store. After creating our keystore, we can use it to generate required app package fingerprint (the SHA256).<\/p>\n<p>Let\u2019s head back to Android Studio, and go to <kbd>Tools \u2192 App Links Assistant<\/kbd>. This will open a sidebar that shows the steps that are required to create a relationship between the application and website. We want to go to Step 3, &#8220;Declare Website Association&#8221; and fill in required data: <code>Site domain<\/code> and <code>Application ID<\/code>. Then, select the keystore file generated in the previous step.<\/p>\n<figure id=\"post-286073\" class=\"align-left media-286073\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/s_B0873689EA50413EA11DE0E251C79D95AC091600D224AE9E30EBEB80DF5C9068_1550760222016_Screenshot2019-02-21at15.43.26.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>After filling the form press &#8220;Generate Digital Asset Links file&#8221; which will generate our <code>assetlinks.json<\/code> file. If we open that up, it should look something like this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">[{\r\n  \"relation\": [\"delegate_permission\/common.handle_all_urls\"],\r\n  \"target\": {\r\n    \"namespace\": \"android_app\",\r\n    \"package_name\": \"com.netguru.wordguru\",\r\n    \"sha256_cert_fingerprints\": [\"8A:F4:....:29:28\"]\r\n  }\r\n}]<\/code><\/pre>\n<p>This is the file we need to make available in our app\u2019s <code>\/.well-known\/assetlinks.json<\/code> path. I will not describe how to make it available on that path as it is too project-specific and outside the scope of this article.<\/p>\n<p>We can test the relationship by clicking on the &#8220;Link and Verify&#8221; button. If all goes well, we get a confirmation with &#8220;Success!&#8221;<\/p>\n<figure id=\"post-286074\" class=\"align-left media-286074\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/s_B0873689EA50413EA11DE0E251C79D95AC091600D224AE9E30EBEB80DF5C9068_1550497970710_9.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Yay! We\u2019ve established a two-way relationship between our Android application and our <abbr title=\"Progressive Web App\">PWA<\/abbr>. It\u2019s all downhill from here, so let\u2019s drive it home.<\/p>\n<h3>Step 3: Get required assets<\/h3>\n<p>Google Play requires a few assets to make sure the app is presented nicely in the store. Specifically, here\u2019s what we need:<\/p>\n<ul>\n<li><strong>App Icons:<\/strong> We need a variety of sizes, including 48&#215;48, 72&#215;72, 96&#215;96, 144&#215;144, 192&#215;192\u2026 or we can use an <a href=\"https:\/\/developer.android.com\/guide\/practices\/ui_guidelines\/icon_design_adaptive\" rel=\"noopener\">adaptive icon<\/a>.<\/strong>\n<li><strong>High-res Icon:<\/strong> This is a 512&#215;512 PNG image that is used throughout the store.<\/li>\n<li><strong>Feature Graphic:<\/strong> This is a 1024&#215;500 JPG or 24-bit PNG (no alpha) banner that Google Play uses on the app details view.<\/li>\n<li><strong>Screenshots:<\/strong> Google Play will use these to show off different views of the app that users can check out prior to downloading it.<\/li>\n<\/ul>\n<figure id=\"post-286068\" class=\"align-left media-286068\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/play-05.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>Having all those, we can proceed to the <a href=\"https:\/\/play.google.com\/apps\/publish\" rel=\"noopener\">Google Play Store developers console<\/a> and publish the application!<\/p>\n<h3>Step 4: Publish to Google Play!<\/h3>\n<p>Let\u2019s go to the last step and finally push our app to the store.<\/p>\n<p>Using the APK that we generated earlier (which is located in the <code>AndroidStudioProjects<\/code> directory), we need to go to the <a href=\"https:\/\/play.google.com\/apps\/publish\/\" rel=\"noopener\">Google Play console<\/a> to publish our application. I will not describe the process of publishing an application in the store as the wizard makes it pretty straightforward and we are provided step-by-step guidance throughout the process.<\/p>\n<p>It may take few hours for the application to be reviewed and approved, but when it is, it will finally appear in the store.<\/p>\n<p class=\"explanation\">If you can\u2019t find the APK, you can create a new one by going to <kbd>Build \u2192 Generate signed bundle \/ APK \u2192 Build APK<\/kbd>, passing our existing keystore file and filling the alias and password that we used when we generated the keystore. After the APK is generated, a notice should appear and you can get to the file by clicking on the &#8220;Locate&#8221; link.<\/p>\n<h3>Congrats, your app is in Google Play!<\/h3>\n<p>That\u2019s it! We just pushed our <abbr title=\"Progressive Web App\">PWA<\/abbr> to the Google Play store. The process is not as intuitive as we would like it to be, but still, with a bit of effort it is definitely doable, and believe me, it gives that great filling at the end when you see your app displayed in the wild.<\/p>\n<p>It is worth pointing out that this feature is still very much <strong>early phase<\/strong> and I would consider it <strong>experimental<\/strong> for some time. I would <strong>not<\/strong> recommend going with a production release of your application for now because this only works with Chrome 72 and above \u2014 any version before that will be able to install the app, but the app itself will crash instantly which is not the best user experience.<\/p>\n<p>Also, the official release of <code>custom-tabs-client<\/code> does not support <abbr title=\"Trusted Web Activity\">TWA<\/abbr> yet. If you were wondering why we used raw GitHub link instead of the official library release, well, that\u2019s why.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: &#8220;Will my users be able to install the app using app stores?&#8221; The answer has traditionally been no, but this changed with Chrome 72 which shipped a new feature [&hellip;]<\/p>\n","protected":false},"author":254184,"featured_media":286077,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How to Get a Progressive Web App into the Google Play Store","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1624,1633,1021,1130],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/google-play-pwa.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":334247,"url":"https:\/\/css-tricks.com\/progressive-web-apps-in-2021\/","url_meta":{"origin":286048,"position":0},"title":"Progressive Web Apps in 2021","date":"February 11, 2021","format":false,"excerpt":"Maximiliano Firtman has a look at PWAs this year, including trying to get a bead on how widespread they are: At the end of 2020, approximately\u00a01% of websites included a Service Worker, and 2.2% had an installable Web App Manifest file. Remember that some platforms -such as Safari on iOS\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/cover.png?fit=1000%2C467&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262022,"url":"https:\/\/css-tricks.com\/wordpress-pwas\/","url_meta":{"origin":286048,"position":1},"title":"WordPress + PWAs","date":"October 29, 2017","format":false,"excerpt":"One of the sessions from the Chrome Dev Summit, hosted by Das Surma and Daniel Walmsley. It's not so much about WordPress as it is about CMS powered sites that aren't really \"apps\", if there is such a thing, and the possibility of turning that site into a Progressive Web\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":297829,"url":"https:\/\/css-tricks.com\/weekly-platform-news-webapk-limited-to-chrome-discernible-focus-rectangles-modal-window-api\/","url_meta":{"origin":286048,"position":2},"title":"Weekly Platform News: WebAPK Limited to Chrome, Discernible Focus Rectangles, Modal Window API","date":"October 24, 2019","format":false,"excerpt":"In this week's roundup: \"Add to home screen\" has different meanings in Android, Chrome and Edge add some pop to focus rectangles on form inputs, and how third-party sites may be coming to a modal near you. Let's get into the news. WebAPKs are not available to Firefox on Android\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/wpn-20191024.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":275376,"url":"https:\/\/css-tricks.com\/seriously-though-what-is-a-progressive-web-app\/","url_meta":{"origin":286048,"position":3},"title":"Seriously, though. What is a progressive web app?","date":"August 17, 2018","format":false,"excerpt":"Amberley Romo read a ton about PWAs in order to form her own solid understanding. \u201cProgressive web app\u201d (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements. As a general term, the\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/pwa-type.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295027,"url":"https:\/\/css-tricks.com\/maskable-icons-android-adaptive-icons-for-your-pwa\/","url_meta":{"origin":286048,"position":4},"title":"Maskable Icons: Android Adaptive Icons for Your PWA","date":"August 29, 2019","format":false,"excerpt":"There is a new web feature called maskable icons that is coming soon to Firefox Preview and other web browsers. This new icon format will let your PWAs have their own adaptive icons on Android.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/adaptive-icons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254156,"url":"https:\/\/css-tricks.com\/pwa-directory\/","url_meta":{"origin":286048,"position":5},"title":"PWA Directory","date":"April 25, 2017","format":false,"excerpt":"The other day I was watching an interview with Ade Oshineye where he discussed his work on the PWA Directory at Google, a showcase of progressive web apps. And it\u2019s pretty neat! It lists a whole bunch of PWAs out there and you can filter them by Lighthouse metrics \u2013\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/google-play-pwa.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286048"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/254184"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=286048"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286048\/revisions"}],"predecessor-version":[{"id":286685,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/286048\/revisions\/286685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/286077"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=286048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=286048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=286048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}