Build a simple PWA with Episerver: Ascend 2019

For this year's Episerver Ascend conference, I co-ran a lab with Arnold Macauley. While the code for the lab is available on Github, I wanted to write a post about it for all those who could not attend.

The lab focused on setting up a progressive web app (PWA) in your Episerver site. We covered some basic info about the benefits of PWAs. We also went over some online tools you can use for building one yourself.

Introduction to PWAs

Arnold went through some slides introducing the group to PWAs. In them he provided a general outline of PWAs, and focused on the benefits of implementing one on your site.

What are PWAs?

PWAs are a middle ground between a website and a native app. For a full description, I recommend this writeup from Google. How they work is that if you build your site to be responsive, you can install it to your device like a native app.

Why use PWAs?

Again, I would recommend the writeup from Google. But some of the main benefits of PWAs are their reliability, speed, and ability to engage with the end user.

Reliability comes in the form of heavy caching. If done correctly, you can provide content to the user even when the site is down or the device is offline.

Because of the heavy caching, users notice a considerable speed improvement. You can even pre-cache content for even more noticeable speed improvements.

PWAs are engaging in the sense that users can install it on their devices. This provides them easier access. They can also use features that are usually only available in native apps once installed.

I built this site to be a PWA as well. The Ascend lab focused on caching the offline file. If you want to check out a more advanced implementation, check out the service worker on this site. It implements the pre-caching functionality which is worth checking out.

Implementation

The site we used was Episerver's new Mosey template. The site has a collection of articles under the "Inspiration" section that are a perfect use case for a PWA. We leveraged some existing online tools for generating our manifest and service workers. They also have tools for testing an existing implementation. You can use this to make sure you have everything you need to get your PWA working.

I won't go through all the steps here. I recommend checking out the Github repo. There are multiple steps, but for the most part the functionality is built out. If you run into any issues getting it set up, feel free to send me a message.

Testing

The last step of our lab was testing. I wanted to call it out because there are a lot of tools you can use that help you implement/test your PWA.

The most readily available is under the Audit tab of Chrome Tools. You can select "Progressive Web App" and Lighthouse will analyze your implementation. They will let you know what you are missing.

Another tool is under the Chrome Tool's Application tab. There it will list out your service worker, manifest file, and list out whats cached. You can also enable/disable aspects of the service worker for testing.

Questions

There were several questions asked at the end of the lab.

| Are there any options for fallback icons?

Several times I called out icons as being important. This is due to the fact that you want to make sure your app will work the same, regardless of device type. I was not able to find any documentation around fall backs. From basic testing on iOS, if no icon is set it will grab a portion of the screen to render for the icon.

The remaining questions were around caching. I mentioned more advanced caching implementations that you can check out. They all shared a similar theme.

| How much can I cache or should I cache?

I referenced my site as an example. I tested trying to cache, and pre-cache everything. You can add URLs to the service worker, and it can go and pre-cache those pages. Two problems that I have run across is storage space and cache clearing.

Cache clearing happens when you register a new service worker. I ran into issues with content not clearing when publishing through the CMS. Another option is to have the service worker hit the network first and fallback to cache. Not as fast, but still will work for offline options.

For device storage, I have not found much official documentation. From what I can tell, iOS devices will allow you to cache up to about 50MB in browser cache. You can hit that level pretty quick. So you may want to focus on the most important/high traffic parts of your site for caching.

Final Thoughts

Even if you can't think of a use case for PWAs, I recommend checking them out. They are one of those cool aspects of the web development that not a lot of people know about.

If you are more a fan of seeing live examples, I recomend this video from Google. They demo an online chat app where they continually adds more and more PWA features. You are able to see the drastic improvements that come from the implementation.

As always if you have any questions, either about PWAs or the lab, feel free to send me a message.