Its no secret by now that Progressive Web Applications (PWA) are the future of web development. I won't cover what PWA is in details as it has been discussed extensively in a lot of blog posts including the one I posted a while back which can be found here. Please note that both Microsoft as well as Apple have added improved PWA support to Edge and Safari, respectively, since I first published my post about PWA. At the time of publishing this blog post Microsoft Edge has added PWA support under Edge which is included in the latest Windows 10 insider build while Apple has started adding support under the latest Safari Technical Preview. So things will only get better from here for both browsers.
In this post I will show you how you can deploy a Angular PWA application to Azure. I won't show you the detailed steps to build the CI/CD pipeline on VSTS which in turn deploys to Azure as I have already discussed it in a previous post which can be found here. Instead I will focus on some of the pitfalls that you may face while attempting to deploy a Angular PWA application to Azure as it may be tricky to new comers to PWA and mobile development in general. Finally, I will test the application on an Android device running Oreo with the latest version of Chrome. I did not test it on IOS since I did not have access to the latest technical preview of Safari which introduced support for PWA but I will address it in future posts.
I based my application on the PWCAT application which can be found here. As mentioned above I setup a VSTS pipeline which deploys my Angular application to an Azure App Service. The image below shows the Angular application artifacts that got deployed to my Azure App Service. Here I am using a very useful feature under Azure App Services called App Service Editor which allows you to browse that artifacts that got deployed to the service. As you can see below its basically the content of the dist folder that gets generated by the Angular Cli build process.
Now I am ready to start running my application on my Android device. If you are lazy like me you probably don't want to type a url into the browser but instead you can use the Android/IOS Azure apps which will provide you with access to your Azure portal on the go.
Tip: When you browse the application from the Azure Mobile application it loads the http version of the site which breaks the application as Service Workers require https.
The first thing that I noticed when I tried to run the Application on my phone was that the icons I included in the manifest.json file where not being utilized when I tried to add a shortcut to my app on the home page as shown below.
Upon further investigation it turns out that the Azure App Service was not serving the manifest.json file. To enable serving json files I went ahead and included the following web.config to the project which enables serving .json files:
<mimeMap fileExtension=".json" mimeType="application/json" />
Tip: Highly recommend that you utilize the chrome://inspect feature which allows you to debug your mobile browser session from your PC as shown here which helped me uncover the issue:
Refresh your browser and Voila we are back in business. As you can see below I am now able to add a shortcut with the icon specified in the manifest. It even got installed as an application as you can clearly see the icon in the application drawer next to other applications and you can even uninstall it just like any other application.
A side by side comparison between the version opened under the browser and the version loaded via the app shortcut shows how the chrome is removed to make it feel like a native app.
Finally, the last benefit of PWA demonstrated here is offline support. As you can see below I am able to run the application while in airplane mode instead of being presented with the notorious "your are offline" message.
In future posts I will be sharing my experience running the same application on IOS devices as well as Windows 10 devices which are adding great integration for PWA applications with the Windows store.