Distribution Models

[00:00:00]
>> So our PWA is now ready. It works everywhere. It has a nice installation dialog in many platforms. It works offline. It's passing the PWA criteria. Let's finish the discussion about building our first PWA with the app distribution discussion. We have a couple of models available. So far, we have been seeing how to install a PWA from the browser.

[00:00:30]
That's the most common scenario and well known idea on how you install a PWA. You need to get somehow to the browser to that URL and then you're going to invite the user to install the app. Or the user will use the menu to install the app or add the app to the home screen.

[00:00:50]
But also we have other options. One option is the App Store. So it's possible today to publish your PWA on most of the App Stores, including Microsoft Store for Windows 10 and 11, Google Play Store for Android and Chrome OS. App Store for iOS and iPadOS, and the Galaxy Store for Samsung devices.

[00:01:17]
There are also other store, like a Huawei Store, the Amazon App Store, where you can actually do something with some work. The App Stores with some kind of unofficial support for PWAs are the one from Google, from Microsoft, and from Samsung. Apple is typically not saying a word about this.

[00:01:40]
But there is a technical solution to publish PWAs on iOS. And there are many PWAs in the App Store, so it's actually possible. But these are not the only two models. We have another one. It's enterprise distribution. We don't have time to cover these deeply. But I want you to take the idea that if you have corporate clients where they have corporate devices or devices with enterprise distribution, you can actually distribute your PWA to employees of that company automatically.

[00:02:19]
Android has a solution, it's called Google Play iFrame, and iOS has also solution. You can create some files that are called configuration files, that then you can distribute to your clients. If the user is installing those files, they will get automatically PWAs in the home screen. So it's possible to distribute this in the enterprise world.

[00:02:47]
Something that is really, really important, on all these distribution models, we are not changing how app resources are being installed and updated. It's just the same. We use the service worker. The service worker is always the component responsible for all the resources of our app. So if you are going to ship our PWA in the Play Store, we are not going to ship a package with HTML, CSS, and JavaScript inside.

[00:03:19]
That's not gonna happen, okay? We are just going to ship a package that will launch a URL. So the service worker will still be responsible for managing the assets and the resources. There are different tools that we have available to create PWA launchers. We can use IDEs for native development, such as Android Studio, Visual Studio for Windows, Visual Studio, the big version, or Xcode for iOS.

[00:03:49]
But for those cases, you need to have some experience working with native development. PWA Builder is also an option. PWA Builder, it's an online tool that will let us create packages on the fly automatically. I'm going to show you that in a minute. And also we have some Command Line Tools available.

[00:04:12]
Primarily today for the Play Store, there is a tool known as Bubblewrap, where you can actually take the manifest of your PWA and it will create an Android package ready for the Play Store. And then you can go and update that to the Play Store. And remember that package is actually a PWA launcher.

[00:04:35]
It just launches the PWA, it doesn't contain the files of our web app. So talking about PWA Builder, it's actually an open source project sponsored by Microsoft. So it was originally only for Windows Store, but now it has support for the Samsung Galaxy Store, the Google Play Store, and iOS support is coming soon.

[00:05:01]
So if we go to PWAbuilder.com, you can actually start typing the URL of your PWA. So if you wanna create the package for our PWA, we first need to publish this in a public URL, it's not going to work with localhost. So we can try another PWA, Such as the Squoosh.

[00:05:25]
We hit the start. And this is going to check your PWA in the background, it will give you a score on how PWA are you. How good are you? And then it will let you create the packages. So here, we can see we have a 190. That's a current score.

[00:05:42]
That's actually pretty good. We can click here and see the details of the score in terms of the manifest, the service worker, security, and the total score. You can change some options. These options are coming from the manifest, but we can change them. And here we have service worker options.

[00:06:04]
In case you don't have a service worker yet, this tool will help you create one. And when you're done, you just scroll down, select Next. And now you're ready to publish your PWA to the store, Windows and Android. For Windows, you click Store Package. You need to select a package ID.

[00:06:29]
This is mandatory for all the PWAs out there. Typically, you have a string that represents your app. It's a unique ID within the App Store. And most of the time, we use the URL of our PWA but in reverse order. So for example, I can use for Squoosh, app.squoosh.

[00:06:49]
And sometimes we say dot PWA. Any string will work but at least it needs one dot. Now publish our display name, and you click Generate, and you receive a package ready to upload to the Microsoft Store. Of course, to do that, you need to have a subscription, a publisher subscription.

[00:07:10]
You need to create an account, pay the fee, in case there is a fee. You need to submit some documents, in case you're are a company. So you need to prove that you are the company that you're saying you are. And after that, you upload the package. And something similar happens here for Android, and it will happen pretty soon on iOS as well.

[00:07:30]
You click a store package, you select some properties, you click Generate. And this generates automatically something known as AAB, Android App Bundle. That is a format that you just upload to the Google Play Store Console. That is the portal where you just publish PWAs in the store. And in settings, you have a lot of settings that you can change, including, well, my package is ready.

[00:08:02]
But we're in the settings, you can ask for Google Play billing. If you enable that, then you will be able to use an API, a charge keep API. So you can actually charge your users with a Play Store in a billion system. So users can pay you a subscription or for digital goods.

[00:08:22]
You can create the Chrome OS only package. So you can create at different entry in the Play Store only for Chrome OS. And you can include source code. In this case, it will give you an Android Studio project, then you can continue on your own, if you know what you're doing.

[00:08:41]
So this is how you create quickly and without too much effort, packages for different app stores. So the question is, what about PWA Builder and iOS? Here's the thing. PWA Builder used to support iOS, but then they removed that because iOS didn't support service workers for the store.

[00:09:04]
With iOS 14, so that's 2020, Apple have an ability to actually make service workers compatible with the Webyou, and that's the technical solution that we have to publish PWA to a store. With that in mind, the PWA Builder team has already published in their Twitter account that iOS is coming.

[00:09:28]
So maybe if you're watching this video after the live session, maybe it's there. And if not, you can still write your own Xcode template to actually wrap your PWA. Remember, we are not putting the files of the PWA in the package. So you can actually create that PWA launcher using Xcode, and that will work for iOS and iPadOS.