A quickstart guide for using 🤝🤯 Trusted Web Activities (TWA) to deploy a progressive web app (PWA) to the Google Play Store as a native Android app.  https://fireship.io/lessons/pwa-to-play-store/

- Sven Budak's TWA stuff rocks https://medium.com/@svenbudak/this-twa-stuff-rocks-finally-i-got-my-pwa-on-google-play-store-b92fe8dae31f
- TWA Video from Google https://youtu.be/TCgT8dzSiU8
- TWA Guide from Google https://developers.google.com/web/updates/2019/02/using-twa

#pwa #twa #android
2024-02-04T06:56:46.518Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
5023eb60-663f-4ef5-bedb-9776ceac6b1c
a80b14530eb9b4ffa2e5e7762ede6b2082b6034cc18246dfbd82559cf20587e0
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores.
If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view.
But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity.
If you're new here, like and subscribe, and you can grab the full source code on Fireship IO.
And I'm giving away another t shirt with this video.
All you have to do is let me know what you think about TWA's in the comments below.
First of all, what is a Trusted Web Activity.
The short answer is that it's just a way to run a website in full screen mode within an Android package.
You can already do this today and I'll show you how Do it step by step in this video.
We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store.
Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA.
Let's start by looking at some of the advantages of a TWA.
First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes.
And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA.
This means you can use things like OAuth and local storage without having to patch in Cordova plugins.
Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date.
So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well.
There are also some drawbacks here as well.
For example, this is only for Google Play.
It has nothing to do with the Apple App Store.
The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features.
So you need to rely 100% on the features available to PWAs.
And lastly, you need to comply with all of the policies for the Google Play Store.
So that could complicate things if you have a payment system that would otherwise require in app purchases.
So what's the bottom line here?
Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into.
And at this point, I'd like to give a huge shout out to Sven Budic.
He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them.
Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps.
Step 1, build a progressive web app.
It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline.
Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website.
Open up your site in Chrome and then run an audit.
Your production site should produce a PWA score of 100 and a performance score of 80 or better.
Step 2, install Android Studio.
You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store.
Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play.
Step 4, create an Android app.
In this demo, we'll just clone an existing Android app that has already been set up for a TWA.
You can find a link to that repo in the main article.
And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google.
But you don't have to do everything from scratch because the starter repo is already available to you.
After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file.
Step 5, update the app build Gradle file with your own information.
You'll see an application ID as well as the manifest placeholders array.
All you have to do is swap out those values with your own information.
Step 6, Open up Android Studio and create a key store.
A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content.
Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app.
In Android Studio, go to the build menu and then select generate signed APK.
This will give you the option to use an existing Q Store or create a new one.
Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password.
This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file.
Step 7, create a digital asset link to verify ownership of the web content.
To verify ownership, we'll use this key store that we just created.
From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store.
And Google provides a little web app for generating the content needed for the digital asset link.
Just take the value of the SHA 256, copy it in here, and click generate statement.
That's going to give us some JSON code that we'll take back to our web application and Pull to our web server.
Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson.
On Fireship IO, we use Hugo, so we end up saving that in the static directory.
But, again, that's completely dependent on the front end framework that you use.
The only important thing is that this file is accessible at the corresponding URL when you deploy your site.
I'm deploying that to Firebase Hosting, of course.
And now we can move on to step 8 which is to generate a signed APK.
We can go back to Android Studio and click build generate signed APK.
We'll select the APK option and then use the KeyStore that we've already created.
From there, select release as the build type, and then also select both signature versions down here at the bottom.
That should generate an APK file that you can find in the releases directory.
And that gives us the payload that we can actually install on a user's Android device.
Step 9, go to the Google Play Store and create an application.
From there, go to app releases and create an internal track release.
This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses.
Go ahead and upload the APK and then fill out any other required information.
At this point, you'll see an error that says no internal testers are assigned yet.
This actually means that you just need to fill out your Google Play listing.
Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar.
Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app.
This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published.
From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester.
Step 12.
Log in to your Twitter account and brag to all your friends about how you're an Android developer.
That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs.
If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS.
Gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff.
Thanks for watching and I will talk to you soon.
What do you make all this?
Man, I don't even have an opinion.
You gotta have an opinion.

Speaker 0: Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores. If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view. But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity. If you're new here, like and subscribe, and you can grab the full source code on Fireship IO. And I'm giving away another t shirt with this video.

All you have to do is let me know what you think about TWA's in the comments below. First of all, what is a Trusted Web Activity. The short answer is that it's just a way to run a website in full screen mode within an Android package. You can already do this today and I'll show you how Do it step by step in this video. We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store.

Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA. Let's start by looking at some of the advantages of a TWA. First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes. And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA. This means you can use things like OAuth and local storage without having to patch in Cordova plugins.

Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date. So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well. There are also some drawbacks here as well. For example, this is only for Google Play. It has nothing to do with the Apple App Store.

The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features. So you need to rely 100% on the features available to PWAs. And lastly, you need to comply with all of the policies for the Google Play Store. So that could complicate things if you have a payment system that would otherwise require in app purchases. So what's the bottom line here?

Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into. And at this point, I'd like to give a huge shout out to Sven Budic. He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them. Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps. Step 1, build a progressive web app.

It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline. Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website. Open up your site in Chrome and then run an audit. Your production site should produce a PWA score of 100 and a performance score of 80 or better. Step 2, install Android Studio.

You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store. Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play. Step 4, create an Android app. In this demo, we'll just clone an existing Android app that has already been set up for a TWA. You can find a link to that repo in the main article.

And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google. But you don't have to do everything from scratch because the starter repo is already available to you. After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file. Step 5, update the app build Gradle file with your own information. You'll see an application ID as well as the manifest placeholders array.

All you have to do is swap out those values with your own information. Step 6, Open up Android Studio and create a key store. A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content. Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app. In Android Studio, go to the build menu and then select generate signed APK.

This will give you the option to use an existing Q Store or create a new one. Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password. This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file. Step 7, create a digital asset link to verify ownership of the web content. To verify ownership, we'll use this key store that we just created.

From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store. And Google provides a little web app for generating the content needed for the digital asset link. Just take the value of the SHA 256, copy it in here, and click generate statement. That's going to give us some JSON code that we'll take back to our web application and Pull to our web server. Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson.

On Fireship IO, we use Hugo, so we end up saving that in the static directory. But, again, that's completely dependent on the front end framework that you use. The only important thing is that this file is accessible at the corresponding URL when you deploy your site. I'm deploying that to Firebase Hosting, of course. And now we can move on to step 8 which is to generate a signed APK.

We can go back to Android Studio and click build generate signed APK. We'll select the APK option and then use the KeyStore that we've already created. From there, select release as the build type, and then also select both signature versions down here at the bottom. That should generate an APK file that you can find in the releases directory. And that gives us the payload that we can actually install on a user's Android device.

Step 9, go to the Google Play Store and create an application. From there, go to app releases and create an internal track release. This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses. Go ahead and upload the APK and then fill out any other required information. At this point, you'll see an error that says no internal testers are assigned yet.

This actually means that you just need to fill out your Google Play listing. Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar. Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app. This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published. From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester.

Step 12. Log in to your Twitter account and brag to all your friends about how you're an Android developer. That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs. If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS. Gonna go ahead and wrap things up there.

If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff. Thanks for watching and I will talk to you soon. What do you make all this? Man, I don't even have an opinion. You gotta have an opinion.
Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores. If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view.
But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity. If you're new here, like and subscribe, and you can grab the full source code on Fireship IO. And I'm giving away another t shirt with this video. All you have to do is let me know what you think about TWA's in the comments below. First of all, what is a Trusted Web Activity. The short answer is that it's just a way to run a website in full screen mode within an Android package. You can already do this today and I'll show you how Do it step by step in this video. We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store.
social media
internet
websites
twitter
Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA. Let's start by looking at some of the advantages of a TWA.
First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes. And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA. This means you can use things like OAuth and local storage without having to patch in Cordova plugins.
streaming
Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date. So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well. There are also some drawbacks here as well.
For example, this is only for Google Play. It has nothing to do with the Apple App Store. The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features. So you need to rely 100% on the features available to PWAs. And lastly, you need to comply with all of the policies for the Google Play Store. So that could complicate things if you have a payment system that would otherwise require in app purchases. So what's the bottom line here? Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into.
purchasing
google
customers
commerce
customer support
And at this point, I'd like to give a huge shout out to Sven Budic. He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them.
Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps. Step 1, build a progressive web app. It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline.
youtube
video gaming
Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website.
Open up your site in Chrome and then run an audit. Your production site should produce a PWA score of 100 and a performance score of 80 or better. Step 2, install Android Studio. You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store.
google
Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play. Step 4, create an Android app. In this demo, we'll just clone an existing Android app that has already been set up for a TWA.
google
You can find a link to that repo in the main article. And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google. But you don't have to do everything from scratch because the starter repo is already available to you. After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file. Step 5, update the app build Gradle file with your own information. You'll see an application ID as well as the manifest placeholders array. All you have to do is swap out those values with your own information.
Step 6, Open up Android Studio and create a key store. A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content. Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app.
google
intellectual property
copyright licenses
In Android Studio, go to the build menu and then select generate signed APK. This will give you the option to use an existing Q Store or create a new one. Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password. This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file.
Step 7, create a digital asset link to verify ownership of the web content. To verify ownership, we'll use this key store that we just created. From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store. And Google provides a little web app for generating the content needed for the digital asset link. Just take the value of the SHA 256, copy it in here, and click generate statement. That's going to give us some JSON code that we'll take back to our web application and Pull to our web server.
intellectual property
google
copyright licenses
copyright
security
Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson. On Fireship IO, we use Hugo, so we end up saving that in the static directory. But, again, that's completely dependent on the front end framework that you use. The only important thing is that this file is accessible at the corresponding URL when you deploy your site. I'm deploying that to Firebase Hosting, of course. And now we can move on to step 8 which is to generate a signed APK. We can go back to Android Studio and click build generate signed APK. We'll select the APK option and then use the KeyStore that we've already created. From there, select release as the build type, and then also select both signature versions down here at the bottom. That should generate an APK file that you can find in the releases directory. And that gives us the payload that we can actually install on a user's Android device.
Step 9, go to the Google Play Store and create an application. From there, go to app releases and create an internal track release. This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses. Go ahead and upload the APK and then fill out any other required information. At this point, you'll see an error that says no internal testers are assigned yet. This actually means that you just need to fill out your Google Play listing. Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar. Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app.
google
This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published.
From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester. Step 12. Log in to your Twitter account and brag to all your friends about how you're an Android developer. That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs. If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS.
twitter
google
Gonna go ahead and wrap things up there. If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff. Thanks for watching and I will talk to you soon. What do you make all this? Man, I don't even have an opinion.
youtube
social media
pornography
video gaming
media
You gotta have an opinion.
Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores. If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view. But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity. If you're new here, like and subscribe, and you can grab the full source code on Fireship IO. And I'm giving away another t shirt with this video. All you have to do is let me know what you think about TWA's in the comments below. First of all, what is a Trusted Web Activity. The short answer is that it's just a way to run a website in full screen mode within an Android package. You can already do this today and I'll show you how Do it step by step in this video. We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store. Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA. Let's start by looking at some of the advantages of a TWA. First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes. And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA. This means you can use things like OAuth and local storage without having to patch in Cordova plugins. Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date. So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well. There are also some drawbacks here as well. For example, this is only for Google Play. It has nothing to do with the Apple App Store. The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features. So you need to rely 100% on the features available to PWAs. And lastly, you need to comply with all of the policies for the Google Play Store. So that could complicate things if you have a payment system that would otherwise require in app purchases. So what's the bottom line here? Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into. And at this point, I'd like to give a huge shout out to Sven Budic. He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them. Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps. Step 1, build a progressive web app. It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline. Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website. Open up your site in Chrome and then run an audit. Your production site should produce a PWA score of 100 and a performance score of 80 or better. Step 2, install Android Studio. You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store. Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play. Step 4, create an Android app. In this demo, we'll just clone an existing Android app that has already been set up for a TWA. You can find a link to that repo in the main article. And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google. But you don't have to do everything from scratch because the starter repo is already available to you. After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file. Step 5, update the app build Gradle file with your own information. You'll see an application ID as well as the manifest placeholders array. All you have to do is swap out those values with your own information. Step 6, Open up Android Studio and create a key store. A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content. Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app. In Android Studio, go to the build menu and then select generate signed APK. This will give you the option to use an existing Q Store or create a new one. Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password. This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file. Step 7, create a digital asset link to verify ownership of the web content. To verify ownership, we'll use this key store that we just created. From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store. And Google provides a little web app for generating the content needed for the digital asset link. Just take the value of the SHA 256, copy it in here, and click generate statement. That's going to give us some JSON code that we'll take back to our web application and Pull to our web server. Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson. On Fireship IO, we use Hugo, so we end up saving that in the static directory. But, again, that's completely dependent on the front end framework that you use. The only important thing is that this file is accessible at the corresponding URL when you deploy your site. I'm deploying that to Firebase Hosting, of course. And now we can move on to step 8 which is to generate a signed APK. We can go back to Android Studio and click build generate signed APK. We'll select the APK option and then use the KeyStore that we've already created. From there, select release as the build type, and then also select both signature versions down here at the bottom. That should generate an APK file that you can find in the releases directory. And that gives us the payload that we can actually install on a user's Android device. Step 9, go to the Google Play Store and create an application. From there, go to app releases and create an internal track release. This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses. Go ahead and upload the APK and then fill out any other required information. At this point, you'll see an error that says no internal testers are assigned yet. This actually means that you just need to fill out your Google Play listing. Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar. Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app. This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published. From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester. Step 12. Log in to your Twitter account and brag to all your friends about how you're an Android developer. That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs. If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS. Gonna go ahead and wrap things up there. If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff. Thanks for watching and I will talk to you soon. What do you make all this? Man, I don't even have an opinion. You gotta have an opinion.
Over
over
the
the
last
last
couple
couple
years
years
progressive
progressive
web
web
apps
apps
have
have
revolutionized
revolutionized
the
the
way
way
we
we
build
build
products
products
on
on
the
the
web,
web
but
but
one
one
of
of
the
the
biggest
biggest
limitations
limitations
is
is
that
that
they're
they're
not
not
discoverable
discoverable
on
on
the
the
App
app
stores.
stores
If
if
you
you
want
want
to
to
write
write
your
your
web
web
code
code
once
once
and
and
then
then
reuse
reuse
it
it
everywhere,
everywhere
you'll
you'll
most
most
likely
likely
use
use
a
a
framework
framework
like
like
Ionic
ionic
to
to
wrap
wrap
your
your
code
code
in
in
a
a
web
web
view.
view
But
but
get
get
ready
ready
to
to
learn
learn
about
about
interesting
interesting
new
new
alternative
alternative
to
to
this
this
approach,
approach
a
a
Trusted
trusted
Web
web
Activity.
activity
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
source
source
code
code
on
on
Fireship
fireship
IO.
io
And
and
I'm
i'm
giving
giving
away
away
another
another
t
t
shirt
shirt
with
with
this
this
video.
video
All
all
you
you
have
have
to
to
do
do
is
is
let
let
me
me
know
know
what
what
you
you
think
think
about
about
TWA's
twa's
in
in
the
the
comments
comments
below.
below
First
first
of
of
all,
all
what
what
is
is
a
a
Trusted
trusted
Web
web
Activity.
activity
The
the
short
short
answer
answer
is
is
that
that
it's
it's
just
just
a
a
way
way
to
to
run
run
a
a
website
website
in
in
full
full
screen
screen
mode
mode
within
within
an
an
Android
android
package.
package
You
you
can
can
already
already
do
do
this
this
today
today
and
and
I'll
i'll
show
show
you
you
how
how
Do
do
it
it
step
step
by
by
step
step
in
in
this
this
video.
video
We'll
we'll
take
take
the
the
existing
existing
FireShip
fireship
IO
io
PWA,
pwa
package
package
it
it
up
up
in
in
Android,
android
and
and
then
then
deploy
deploy
it
it
to
to
the
the
Google
google
Play
play
Store.
store
Before
before
we
we
get
get
into
into
that,
that
you
you
might
might
be
be
wondering
wondering
whether
whether
you
you
should
should
a
a
hybrid
hybrid
WebView
webview
app
app
or
or
deploy
deploy
as
as
a
a
TWA.
twa
Let's
let's
start
start
by
by
looking
looking
at
at
some
some
of
of
the
the
advantages
advantages
of
of
a
a
TWA.
twa
First
first
of
of
all,
all
it's
it's
easy,
easy
and
and
if
if
you
you
have
have
an
an
existing
existing
PWA,
pwa
you
you
can
can
follow
follow
along
along
with
with
this
this
video
video
and
and
have
have
it
it
on
on
Google
google
Play
play
in
in
the
the
next
next
few
few
minutes.
minutes
And
and
unlike
unlike
a
a
WebView,
webview
it's
it's
not
not
sandboxed,
sandboxed
So
so
you
you
have
have
access
access
to
to
all
all
the
the
features
features
of
of
a
a
PWA.
pwa
This
this
means
means
you
you
can
can
use
use
things
things
like
like
OAuth
oauth
and
and
local
local
storage
storage
without
without
having
having
to
to
patch
patch
in
in
Cordova
cordova
plugins.
plugins
Other
other
words,
words
whatever
whatever
works
works
in
in
your
your
PWA
pwa
currently
currently
is
is
going
going
to
to
work
work
just
just
as
as
well
well
in
in
this
this
native
native
app,
app
and
and
your
your
content
content
will
will
always
always
stay
stay
up
up
to
to
date.
date
So
so
if
if
you
you
deploy
deploy
a
a
new
new
feature
feature
to
to
your
your
PWA,
pwa
it
it
will
will
automatically
automatically
reflected
reflected
in
in
the
the
native
native
app
app
as
as
well.
well
There
there
are
are
also
also
some
some
drawbacks
drawbacks
here
here
as
as
well.
well
For
for
example,
example
this
this
is
is
only
only
for
for
Google
google
Play.
play
It
it
has
has
nothing
nothing
to
to
do
do
with
with
the
the
Apple
apple
App
app
Store.
store
The
the
next
next
drawback
drawback
is
is
that
that
there
there
isn't
isn't
a
a
plugin
plugin
ecosystem,
ecosystem
and
and
you
you
don't
don't
have
have
access
access
to
to
the
the
native
native
device
device
features.
features
So
so
you
you
need
need
to
to
rely
rely
100%
100%
on
on
the
the
features
features
available
available
to
to
PWAs.
pwas
And
and
lastly,
lastly
you
you
need
need
to
to
comply
comply
with
with
all
all
of
of
the
the
policies
policies
for
for
the
the
Google
google
Play
play
Store.
store
So
so
that
that
could
could
complicate
complicate
things
things
if
if
you
you
have
have
a
a
payment
payment
system
system
that
that
would
would
otherwise
otherwise
require
require
in
in
app
app
purchases.
purchases
So
so
what's
what's
the
the
bottom
bottom
line
line
here?
here
Well,
well
if
if
you
you
have
have
a
a
progressive
progressive
web
web
app
app
and
and
you
you
just
just
want
want
it
it
packaged
packaged
so
so
it's
it's
discoverable
discoverable
on
on
the
the
Google
google
Play
play
Store,
store
then
then
a
a
TWA
twa
is
is
something
something
you
you
should
should
definitely
definitely
be
be
looking
looking
into.
into
And
and
at
at
this
this
point,
point
I'd
i'd
like
like
to
to
give
give
a
a
huge
huge
shout
shout
out
out
to
to
Sven
sven
Budic.
budic
He
he
has
has
a
a
great
great
article
article
on
on
Medium
medium
about
about
setting
setting
up
up
a
a
TWA,
twa
and
and
if
if
you're
you're
looking
looking
to
to
hire
hire
a
a
developer
developer
that's
that's
familiar
familiar
with
with
these
these
things,
things
you
you
should
should
definitely
definitely
get
get
in
in
contact
contact
with
with
them.
them
Let's
let's
go
go
ahead
ahead
and
and
release
release
our
our
own
own
PWA
pwa
to
to
the
the
Google
google
Play
play
Store
store
in
in
12
12
easy
easy
steps.
steps
Step
step
1,
1
build
build
a
a
progressive
progressive
web
web
app.
app
It's
it's
beyond
beyond
the
the
scope
scope
of
of
this
this
video,
video
But
but
your
your
app
app
will
will
need
need
to
to
at
at
least
least
be
be
able
able
to
to
produce
produce
the
the
add
add
to
to
home
home
screen
screen
button,
button
which
which
means
means
that
that
it
it
registers
registers
a
a
service
service
worker
worker
and
and
caches
caches
your
your
pages
pages
so
so
they
they
can
can
be
be
viewed
viewed
offline.
offline
Frameworks
frameworks
like
like
Angular
angular
can
can
do
do
this
this
for
for
you
you
automatically,
automatically
or
or
there's
there's
libraries
libraries
like
like
Workbox
workbox
that
that
can
can
help
help
you
you
set
set
up
up
a
a
PWA
pwa
in
in
an
an
existing
existing
website.
website
Open
open
up
up
your
your
site
site
in
in
Chrome
chrome
and
and
then
then
run
run
an
an
audit.
audit
Your
your
production
production
site
site
should
should
produce
produce
a
a
PWA
pwa
score
score
of
of
100
100
and
and
a
a
performance
performance
score
score
of
of
80
80
or
or
better.
better
Step
step
2,
2
install
install
Android
android
Studio.
studio
You'll
you'll
need
need
this
this
on
on
your
your
local
local
system
system
to
to
build
build
the
the
actual
actual
APK
apk
that
that
gets
gets
deployed
deployed
to
to
the
the
Google
google
Play
play
Store.
store
Step
step
3,
3
sign
sign
up
up
for
for
a
a
developer
developer
account
account
on
on
Google
google
Play
play
and
and
fork
fork
over
over
$25
$25
You
you
need
need
a
a
paid
paid
developer
developer
account
account
to
to
create
create
releases
releases
on
on
Google
google
Play.
play
Step
step
4,
4
create
create
an
an
Android
android
app.
app
In
in
this
this
demo,
demo
we'll
we'll
just
just
clone
clone
an
an
existing
existing
Android
android
app
app
that
that
has
has
already
already
been
been
set
set
up
up
for
for
a
a
TWA.
twa
You
you
can
can
find
find
a
a
link
link
to
to
that
that
repo
repo
in
in
the
the
main
main
article.
article
And
and
if
if
you
you
want
want
a
a
deep
deep
dive
dive
for
for
everything
everything
that
that
has
has
to
to
change
change
in
in
the
the
Android
android
application,
application
you
you
can
can
check
check
out
out
this
this
article
article
from
from
Google.
google
But
but
you
you
don't
don't
have
have
to
to
do
do
everything
everything
from
from
scratch
scratch
because
because
the
the
starter
starter
repo
repo
is
is
already
already
available
available
to
to
you.
you
After
after
you
you
clone
clone
the
the
repo,
repo
go
go
ahead
ahead
and
and
open
open
it
it
up
up
in
in
Versus
versus
Code
code
or
or
Android
android
Studio
studio
and
and
then
then
find
find
the
the
app
app
build
build
Gradle
gradle
file.
file
Step
step
5,
5
update
update
the
the
app
app
build
build
Gradle
gradle
file
file
with
with
your
your
own
own
information.
information
You'll
you'll
see
see
an
an
application
application
ID
id
as
as
well
well
as
as
the
the
manifest
manifest
placeholders
placeholders
array.
array
All
all
you
you
have
have
to
to
do
do
is
is
swap
swap
out
out
those
those
values
values
with
with
your
your
own
own
information.
information
Step
step
6,
6
Open
open
up
up
Android
android
Studio
studio
and
and
create
create
a
a
key
key
store.
store
A
a
key
key
store
store
is
is
used
used
to
to
sign
sign
your
your
APK
apk
or
or
your
your
Android
android
package,
package
and
and
it's
it's
also
also
used
used
to
to
validate
validate
ownership
ownership
of
of
your
your
web
web
content.
content
Trusted
trusted
Web
web
Activities
activities
only
only
work
work
with
with
first
first
party
party
content,
content
and
and
that's
that's
a
a
good
good
thing
thing
because
because
that
that
means
means
somebody
somebody
else
else
can't
can't
just
just
go
go
and
and
grab
grab
your
your
progressive
progressive
web
web
app
app
and
and
wrap
wrap
it
it
in
in
their
their
own
own
Android
android
app.
app
In
in
Android
android
Studio,
studio
go
go
to
to
the
the
build
build
menu
menu
and
and
then
then
select
select
generate
generate
signed
signed
APK.
apk
This
this
will
will
give
give
you
you
the
the
option
option
to
to
use
use
an
an
existing
existing
Q
q
Store
store
or
or
create
create
a
a
new
new
one.
one
Let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
new
new
one
one
and
and
make
make
sure
sure
that
that
you
you
fill
fill
out
out
all
all
the
the
fields
fields
here
here
and
and
also
also
make
make
sure
sure
to
to
remember
remember
the
the
password.
password
This
this
will
will
also
also
generate
generate
an
an
actual
actual
key
key
store
store
file
file
on
on
your
your
system,
system
So
so
make
make
sure
sure
to
to
keep
keep
a
a
reference
reference
of
of
the
the
path
path
to
to
that
that
file.
file
Step
step
7,
7
create
create
a
a
digital
digital
asset
asset
link
link
to
to
verify
verify
ownership
ownership
of
of
the
the
web
web
content.
content
To
to
verify
verify
ownership,
ownership
we'll
we'll
use
use
this
this
key
key
store
store
that
that
we
we
just
just
created.
created
From
from
the
the
terminal,
terminal
we
we
can
can
run
run
the
the
key
key
tool
tool
command
command
with
with
the
the
following
following
options
options
and
and
And
and
that
that
will
will
generate
generate
an
an
SHA
sha
256
256
certificate
certificate
fingerprint
fingerprint
for
for
this
this
key
key
store.
store
And
and
Google
google
provides
provides
a
a
little
little
web
web
app
app
for
for
generating
generating
the
the
content
content
needed
needed
for
for
the
the
digital
digital
asset
asset
link.
link
Just
just
take
take
the
the
value
value
of
of
the
the
SHA
sha
256,
256
copy
copy
it
it
in
in
here,
here
and
and
click
click
generate
generate
statement.
statement
That's
that's
going
going
to
to
give
give
us
us
some
some
JSON
json
code
code
that
that
we'll
we'll
take
take
back
back
to
to
our
our
web
web
application
application
and
and
Pull
pull
to
to
our
our
web
web
server.
server
Go
go
into
into
your
your
progressive
progressive
web
web
app
app
code
code
and
and
then
then
save
save
this
this
file
file
in
in
a
a
location
location
so
so
that
that
it
it
gets
gets
deployed
deployed
to
to
the
the
path
path
of
of
dot
dot
well
well
known
known
slash
slash
asset
asset
links
links
dotjson.
dotjson
On
on
Fireship
fireship
IO,
io
we
we
use
use
Hugo,
hugo
so
so
we
we
end
end
up
up
saving
saving
that
that
in
in
the
the
static
static
directory.
directory
But,
but
again,
again
that's
that's
completely
completely
dependent
dependent
on
on
the
the
front
front
end
end
framework
framework
that
that
you
you
use.
use
The
the
only
only
important
important
thing
thing
is
is
that
that
this
this
file
file
is
is
accessible
accessible
at
at
the
the
corresponding
corresponding
URL
url
when
when
you
you
deploy
deploy
your
your
site.
site
I'm
i'm
deploying
deploying
that
that
to
to
Firebase
firebase
Hosting,
hosting
of
of
course.
course
And
and
now
now
we
we
can
can
move
move
on
on
to
to
step
step
8
8
which
which
is
is
to
to
generate
generate
a
a
signed
signed
APK.
apk
We
we
can
can
go
go
back
back
to
to
Android
android
Studio
studio
and
and
click
click
build
build
generate
generate
signed
signed
APK.
apk
We'll
we'll
select
select
the
the
APK
apk
option
option
and
and
then
then
use
use
the
the
KeyStore
keystore
that
that
we've
we've
already
already
created.
created
From
from
there,
there
select
select
release
release
as
as
the
the
build
build
type,
type
and
and
then
then
also
also
select
select
both
both
signature
signature
versions
versions
down
down
here
here
at
at
the
the
bottom.
bottom
That
that
should
should
generate
generate
an
an
APK
apk
file
file
that
that
you
you
can
can
find
find
in
in
the
the
releases
releases
directory.
directory
And
and
that
that
gives
gives
us
us
the
the
payload
payload
that
that
we
we
can
can
actually
actually
install
install
on
on
a
a
user's
user's
Android
android
device.
device
Step
step
9,
9
go
go
to
to
the
the
Google
google
Play
play
Store
store
and
and
create
create
an
an
application.
application
From
from
there,
there
go
go
to
to
app
app
releases
releases
and
and
create
create
an
an
internal
internal
track
track
release.
release
This
this
will
will
allow
allow
you
you
to
to
privately
privately
deploy
deploy
your
your
app
app
to
to
Google
google
Play
play
and
and
then
then
distribute
distribute
it
it
to
to
testers
testers
based
based
on
on
their
their
email
email
addresses.
addresses
Go
go
ahead
ahead
and
and
upload
upload
the
the
APK
apk
and
and
then
then
fill
fill
out
out
any
any
other
other
required
required
information.
information
At
at
this
this
point,
point
you'll
you'll
see
see
an
an
error
error
that
that
says
says
no
no
internal
internal
testers
testers
are
are
assigned
assigned
yet.
yet
This
this
actually
actually
means
means
that
that
you
you
just
just
need
need
to
to
fill
fill
out
out
your
your
Google
google
Play
play
listing.
listing
Step
step
10,
10
fill
fill
out
out
the
the
store
store
listing,
listing
the
the
content
content
rating,
rating
and
and
the
the
pricing
pricing
details
details
until
until
you
you
have
have
4
4
green
green
check
check
marks
marks
on
on
the
the
side
side
navigation
navigation
bar.
bar
Step
step
11,
11
finish
finish
the
the
rollout
rollout
process
process
if
if
necessary,
necessary
and
and
then
then
you
you
should
should
see
see
a
a
status
status
of
of
pending
pending
publication
publication
for
for
your
your
app.
app
This
this
is
is
the
the
part
part
where
where
you
you
have
have
to
to
wait
wait
around
around
for
for
a
a
couple
couple
hours
hours
and
and
then
then
eventually
eventually
it
it
should
should
flip
flip
to
to
a
a
status
status
of
of
published.
published
From
from
there,
there
you'll
you'll
have
have
an
an
opt
opt
in
in
URL
url
link
link
that
that
you
you
can
can
use
use
to
to
link
link
to
to
the
the
store
store
listing
listing
and
and
download
download
the
the
app
app
on
on
your
your
device
device
if
if
you're
you're
an
an
approved
approved
tester.
tester
Step
step
12.
12
Log
log
in
in
to
to
your
your
Twitter
twitter
account
account
and
and
brag
brag
to
to
all
all
your
your
friends
friends
about
about
how
how
you're
you're
an
an
Android
android
developer.
developer
That
that
took
took
a
a
bunch
bunch
of
of
small
small
and
and
easy
easy
steps,
steps
but
but
overall,
overall
I'm
i'm
very
very
excited
excited
about
about
the
the
potential
potential
of
of
TWAs.
twas
If
if
you
you
go
go
all
all
in
in
on
on
PWA
pwa
technology,
technology
it
it
gives
gives
you
you
the
the
closest
closest
path
path
to
to
write
write
once
once
and
and
run
run
everywhere
everywhere
as
as
long
long
as
as
everywhere
everywhere
doesn't
doesn't
include
include
iOS.
ios
Gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe
subscribe
and
and
make
make
sure
sure
to
to
let
let
me
me
know
know
what
what
you
you
think
think
about
about
this
this
Trusted
trusted
Web
web
Activity
activity
stuff.
stuff
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
What
what
do
do
you
you
make
make
all
all
this?
this
Man,
man
I
i
don't
don't
even
even
have
have
an
an
opinion.
opinion
You
you
gotta
gotta
have
have
an
an
opinion.
opinion
success
The speaker discusses the limitations of using a framework like Ionic to wrap web code in a web view and introduces Trusted Web Activity as a way to run a website in full screen mode within an Android package. They provide a step by step guide for creating a PWA on Google Play, including building a progressive web app, signing up for a developer account, and creating an Android app. The speaker also explains the process of creating a Gradle file, Open Android Studio, creating a key store, and generating a digital asset link. They provide instructions on verifying ownership of web content, creating a signed APK, and finishing the rollout process for the app. The speaker emphasizes the potential of TWAs and encourages viewers to like and subscribe to their channel.
PWA to Google Play Store with Trusted Web Activities (TWA)
Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores. If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view. But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity. If you're new here, like and subscribe, and you can grab the full source code on Fireship IO. And I'm giving away another t shirt with this video. All you have to do is let me know what you think about TWA's in the comments below. First of all, what is a Trusted Web Activity. The short answer is that it's just a way to run a website in full screen mode within an Android package. You can already do this today and I'll show you how Do it step by step in this video. We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store. Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA. Let's start by looking at some of the advantages of a TWA. First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes. And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA. This means you can use things like OAuth and local storage without having to patch in Cordova plugins. Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date. So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well. There are also some drawbacks here as well. For example, this is only for Google Play. It has nothing to do with the Apple App Store. The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features. So you need to rely 100% on the features available to PWAs. And lastly, you need to comply with all of the policies for the Google Play Store. So that could complicate things if you have a payment system that would otherwise require in app purchases. So what's the bottom line here? Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into. And at this point, I'd like to give a huge shout out to Sven Budic. He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them. Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps. Step 1, build a progressive web app. It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline. Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website. Open up your site in Chrome and then run an audit. Your production site should produce a PWA score of 100 and a performance score of 80 or better. Step 2, install Android Studio. You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store. Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play. Step 4, create an Android app. In this demo, we'll just clone an existing Android app that has already been set up for a TWA. You can find a link to that repo in the main article. And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google. But you don't have to do everything from scratch because the starter repo is already available to you. After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file. Step 5, update the app build Gradle file with your own information. You'll see an application ID as well as the manifest placeholders array. All you have to do is swap out those values with your own information. Step 6, Open up Android Studio and create a key store. A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content. Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app. In Android Studio, go to the build menu and then select generate signed APK. This will give you the option to use an existing Q Store or create a new one. Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password. This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file. Step 7, create a digital asset link to verify ownership of the web content. To verify ownership, we'll use this key store that we just created. From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store. And Google provides a little web app for generating the content needed for the digital asset link. Just take the value of the SHA 256, copy it in here, and click generate statement. That's going to give us some JSON code that we'll take back to our web application and Pull to our web server. Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson. On Fireship IO, we use Hugo, so we end up saving that in the static directory. But, again, that's completely dependent on the front end framework that you use. The only important thing is that this file is accessible at the corresponding URL when you deploy your site. I'm deploying that to Firebase Hosting, of course. And now we can move on to step 8 which is to generate a signed APK. We can go back to Android Studio and click build generate signed APK. We'll select the APK option and then use the KeyStore that we've already created. From there, select release as the build type, and then also select both signature versions down here at the bottom. That should generate an APK file that you can find in the releases directory. And that gives us the payload that we can actually install on a user's Android device. Step 9, go to the Google Play Store and create an application. From there, go to app releases and create an internal track release. This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses. Go ahead and upload the APK and then fill out any other required information. At this point, you'll see an error that says no internal testers are assigned yet. This actually means that you just need to fill out your Google Play listing. Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar. Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app. This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published. From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester. Step 12. Log in to your Twitter account and brag to all your friends about how you're an Android developer. That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs. If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS. Gonna go ahead and wrap things up there. If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff. Thanks for watching and I will talk to you soon. What do you make all this? Man, I don't even have an opinion. You gotta have an opinion.
The speaker discusses the limitations of using a framework like Ionic to wrap web code in a web view and introduces Trusted Web Activity as a way to run a website in full screen mode within an Android package. They provide a step by step guide for creating a PWA on Google Play, including building a progressive web app, signing up for a developer account, and creating an Android app. The speaker also explains the process of creating a Gradle file, Open Android Studio, creating a key store, and generating a digital asset link. They provide instructions on verifying ownership of web content, creating a signed APK, and finishing the rollout process for the app. The speaker emphasizes the potential of TWAs and encourages viewers to like and subscribe to their channel.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : PWA to Google Play Store with Trusted Web Activities (TWA) 
        and a small summary : The speaker discusses the limitations of using a framework like Ionic to wrap web code in a web view and introduces Trusted Web Activity as a way to run a website in full screen mode within an Android package. They provide a step by step guide for creating a PWA on Google Play, including building a progressive web app, signing up for a developer account, and creating an Android app. The speaker also explains the process of creating a Gradle file, Open Android Studio, creating a key store, and generating a digital asset link. They provide instructions on verifying ownership of web content, creating a signed APK, and finishing the rollout process for the app. The speaker emphasizes the potential of TWAs and encourages viewers to like and subscribe to their channel.
        [/INST]
        
        Generate the video : Over the last couple years progressive web apps have revolutionized the way we build products on the web, but one of the biggest limitations is that they're not discoverable on the App stores. If you want to write your web code once and then reuse it everywhere, you'll most likely use a framework like Ionic to wrap your code in a web view. But get ready to learn about interesting new alternative to this approach, a Trusted Web Activity. If you're new here, like and subscribe, and you can grab the full source code on Fireship IO. And I'm giving away another t shirt with this video. All you have to do is let me know what you think about TWA's in the comments below. First of all, what is a Trusted Web Activity. The short answer is that it's just a way to run a website in full screen mode within an Android package. You can already do this today and I'll show you how Do it step by step in this video. We'll take the existing FireShip IO PWA, package it up in Android, and then deploy it to the Google Play Store. Before we get into that, you might be wondering whether you should a hybrid WebView app or deploy as a TWA. Let's start by looking at some of the advantages of a TWA. First of all, it's easy, and if you have an existing PWA, you can follow along with this video and have it on Google Play in the next few minutes. And unlike a WebView, it's not sandboxed, So you have access to all the features of a PWA. This means you can use things like OAuth and local storage without having to patch in Cordova plugins. Other words, whatever works in your PWA currently is going to work just as well in this native app, and your content will always stay up to date. So if you deploy a new feature to your PWA, it will automatically reflected in the native app as well. There are also some drawbacks here as well. For example, this is only for Google Play. It has nothing to do with the Apple App Store. The next drawback is that there isn't a plugin ecosystem, and you don't have access to the native device features. So you need to rely 100% on the features available to PWAs. And lastly, you need to comply with all of the policies for the Google Play Store. So that could complicate things if you have a payment system that would otherwise require in app purchases. So what's the bottom line here? Well, if you have a progressive web app and you just want it packaged so it's discoverable on the Google Play Store, then a TWA is something you should definitely be looking into. And at this point, I'd like to give a huge shout out to Sven Budic. He has a great article on Medium about setting up a TWA, and if you're looking to hire a developer that's familiar with these things, you should definitely get in contact with them. Let's go ahead and release our own PWA to the Google Play Store in 12 easy steps. Step 1, build a progressive web app. It's beyond the scope of this video, But your app will need to at least be able to produce the add to home screen button, which means that it registers a service worker and caches your pages so they can be viewed offline. Frameworks like Angular can do this for you automatically, or there's libraries like Workbox that can help you set up a PWA in an existing website. Open up your site in Chrome and then run an audit. Your production site should produce a PWA score of 100 and a performance score of 80 or better. Step 2, install Android Studio. You'll need this on your local system to build the actual APK that gets deployed to the Google Play Store. Step 3, sign up for a developer account on Google Play and fork over $25 You need a paid developer account to create releases on Google Play. Step 4, create an Android app. In this demo, we'll just clone an existing Android app that has already been set up for a TWA. You can find a link to that repo in the main article. And if you want a deep dive for everything that has to change in the Android application, you can check out this article from Google. But you don't have to do everything from scratch because the starter repo is already available to you. After you clone the repo, go ahead and open it up in Versus Code or Android Studio and then find the app build Gradle file. Step 5, update the app build Gradle file with your own information. You'll see an application ID as well as the manifest placeholders array. All you have to do is swap out those values with your own information. Step 6, Open up Android Studio and create a key store. A key store is used to sign your APK or your Android package, and it's also used to validate ownership of your web content. Trusted Web Activities only work with first party content, and that's a good thing because that means somebody else can't just go and grab your progressive web app and wrap it in their own Android app. In Android Studio, go to the build menu and then select generate signed APK. This will give you the option to use an existing Q Store or create a new one. Let's go ahead and create a new one and make sure that you fill out all the fields here and also make sure to remember the password. This will also generate an actual key store file on your system, So make sure to keep a reference of the path to that file. Step 7, create a digital asset link to verify ownership of the web content. To verify ownership, we'll use this key store that we just created. From the terminal, we can run the key tool command with the following options and And that will generate an SHA 256 certificate fingerprint for this key store. And Google provides a little web app for generating the content needed for the digital asset link. Just take the value of the SHA 256, copy it in here, and click generate statement. That's going to give us some JSON code that we'll take back to our web application and Pull to our web server. Go into your progressive web app code and then save this file in a location so that it gets deployed to the path of dot well known slash asset links dotjson. On Fireship IO, we use Hugo, so we end up saving that in the static directory. But, again, that's completely dependent on the front end framework that you use. The only important thing is that this file is accessible at the corresponding URL when you deploy your site. I'm deploying that to Firebase Hosting, of course. And now we can move on to step 8 which is to generate a signed APK. We can go back to Android Studio and click build generate signed APK. We'll select the APK option and then use the KeyStore that we've already created. From there, select release as the build type, and then also select both signature versions down here at the bottom. That should generate an APK file that you can find in the releases directory. And that gives us the payload that we can actually install on a user's Android device. Step 9, go to the Google Play Store and create an application. From there, go to app releases and create an internal track release. This will allow you to privately deploy your app to Google Play and then distribute it to testers based on their email addresses. Go ahead and upload the APK and then fill out any other required information. At this point, you'll see an error that says no internal testers are assigned yet. This actually means that you just need to fill out your Google Play listing. Step 10, fill out the store listing, the content rating, and the pricing details until you have 4 green check marks on the side navigation bar. Step 11, finish the rollout process if necessary, and then you should see a status of pending publication for your app. This is the part where you have to wait around for a couple hours and then eventually it should flip to a status of published. From there, you'll have an opt in URL link that you can use to link to the store listing and download the app on your device if you're an approved tester. Step 12. Log in to your Twitter account and brag to all your friends about how you're an Android developer. That took a bunch of small and easy steps, but overall, I'm very excited about the potential of TWAs. If you go all in on PWA technology, it gives you the closest path to write once and run everywhere as long as everywhere doesn't include iOS. Gonna go ahead and wrap things up there. If this video helped you, please like and subscribe and make sure to let me know what you think about this Trusted Web Activity stuff. Thanks for watching and I will talk to you soon. What do you make all this? Man, I don't even have an opinion. You gotta have an opinion.
        