OpenJS Foundation OpenJS World 2021 - Development, 2 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Crafting Bespoke PWA Experiences with Angular - Mark Thompson, Google

Description

Crafting Bespoke PWA Experiences with Angular - Mark Thompson, Google

Progressive Web Applications (PWA) help teams to deliver on the promise of multi-modal, code re-suing solutions for web apps. This is an important moment in time as their usefulness is becoming more visible and the technology as a solution more viable. Angular has first class support PWAs allowing teams to create bespoke progressive web applications experiences that delight users. In our time together, we’ll explore some of the best techniques to make your Angular web app into a dynamic PWA that delivers constant value to your users across platforms.

Join the speaker for live Q&A on Slack, channel - #openjs_world-development
Thursday, June 3 from 06:00 - 06:20 PDT / 15:00 - 15:20 CEST
Thursday, June 3 from 06:20 - 06:40 PDT / 15:20 - 15:40 CEST

A

Hi everyone, my name is mark thompson, I'm a developer relations engineer on the angular team at google and welcome to my talk. Lately. I've been thinking about user experiences on the web, and I've noticed that some of my favorite sites don't work when they're offline and they are slow to load and, if I'm being honest, I can't even be tasked to go to the app store and download another app. There has to be a solution, because this problem isn't new. I want to talk to engineering, but what should I do?

A

I mean I could tell you or so far we hang around. We talking.

B

This and that and uh we're trying to keep our site engagement intact and uh no pushing mobile apps. Is there a better way? Have you tried using pwa, we got web ask but are.

A

They progressive do they work offline. Are they load times impressive? Are they caching assets with service workers lurking when there's no connection? Does your app keep working? It has to have a manifest and some images in the description of what this application is. But building service workers can be hard painting, life cycle and caching might leave you scarred. That's why we're here together and that's no joke we're using angular to make our applications more bespoke.

A

I think the answer for them is to use a pwa, but if you're going to do a pwa, then really do a pwa.

A

You see a thoughtful intentional pwa experience gives you lots of benefits, giving your users an installable application leads to less friction for your users, because well they don't have to wait for an app to install or even leave your sites having a meaningful offline experience. Instead of your page. Just not loading means that users will get the most recently cached information or you can create something to let your users know you are offline, but both of these are vastly better than a generic failure. Page, you can improve your users experience with faster load times.

A

There are a variety of things that developers can do to create fast loading, apps such as caching, predictive prefetching and even some architectural patterns. Now all of these benefits and some others come with choices that are made when creating or converting an application to a pwa, but there's a problem here. This can be a challenging thing to get right at the core of many of the great things about. Pwas is service workers, while service workers are the stars making service workers can be hard.

A

Let's understand how this part fits and let's chat about service workers for a bit lego. This little script in your app can't be beat. If you take advantage, you'll find that it's such a treat, it's javascript.

B

So you know it's for me: it could work offline and be your network proxy. You can use it for tasks, but don't get me wrong. You cannot directly access the.

A

Dom I can hear your brains, stressing on this. You communicate with the api, for messages need to intercept the request on the go surface. Workers can.

B

Do this, and now you know also take notes that you can grab items that have been.

A

Stored in their browser's cash, installing activated weighting and idle, these are all part of your workers, life cycle, each state has its place and it has its uses service workers. Changing that too useful from.

A

A

Okay, we understand a couple of things at this point. Some of our bad web app experiences can be solved with pwas at the core of a pwa. Is the effective use of a service worker?

A

How does angular fit into this picture? Well, let's take a look.

A

Angular has first class support for pwas this unlocks the potential for us to craft, a great pwa experience and not have to focus on which files to set up to add pwa support to an application. We can use the pwa schematic to install the schematic we use ng, add angular, slash pwa running the schematic makes some important changes to your application.

A

It creates a service worker with the default caching configuration which we'll look at soon. It creates the web manifest file where things like the app description and icons can be configured and speaking of icons. The schematic helps us by placing some of the default app icons in the asset folders of our project, and it also does the work to make our application installable when we first started this talk. The first issue that I mentioned is that well our applications don't work offline, which hinders our application experience.

A

We solve that problem by installing the pwa schematic our application now works offline to test this out in an application. We first need to build a production bundle using ng, build dash pride now note in version 12 of angular beyond the prod flag is deprecated yeah.

A

After the bundle is created, we can serve the application with a web server. Remember you can't use ng-serve here. The next step is to confirm that the application has a service worker in the application tab in chrome, dev tools. We look at the service worker section to confirm that the service worker is activated awesome. This looks great. The service worker is working in action. We can confirm that the application works offline by checking the offline button and for good measure I'm going to stop the application server as well.

A

Now I'm going to refresh the page and look at the resources tab to help me identify which of the requests have been intercepted and served by the service worker check this out. All of the resources needed to load the page are being loaded. The angular cli has turned our app into a pwa, but if I'm being honest, it's all feeling a little magical right.

A

Well, how is this being configured? Can we figure this out? Well, since you, I suppose that we can clear up any doubts run the schematic it feels so automatic.

B

But in fact that's quite pragmatic, update files create some static and there you go hit some goals. Your new wish is our command. When you use the recommend, your apps abilities expand, ngsw, config.json, yeah, configure your service worker and then it's like. ah Now I get it that's back to the cache update prefetching by providing the right path.

B

Yeah and you can be quite specific if a file is not loading, add an entry, so we don't miss it and there you have it now. You know it works online. Oh yeah, let's go and if you can figure things right, then your users may never know.

A

So it's not actually magical. Adding offline support is done when the service worker is installed into your project. Here's one place where we can create a more bespoke experience for our users. Angular supports two types of caching strategy: pre-fetching and lazy. Pre-Fetching allows you to specify the assets in your app. That should be cached immediately when you run the app with your service worker enabled, but this is going to be bandwidth intensive, especially if you decide to download all of your assets.

A

For example, now lazy mode only caches the assets when they are requested in app. So if you use this mode, you may find yourself without some assets when in offline mode, but we can actually configure response for assets that are not available in the end. You'll want to ask yourself what do I want my offline experience to be then update the cached assets. Accordingly, a new file called ngswconfig.json is created when the pwa schematic is run.

A

Here's where you can configure the caching strategy as well as determine which assets should be cached at this point, our application works offline and we're in a great place. Are you excited? Yeah me too, so get that left hand up, because I have something for you: high five, let's dive into the next phase and that's fast load times we're going to take this in two parts: there's how fast our application loads and there's boosting data loading speeds in the application.

A

Caching is a recurring theme in our story today and it's going to make an appearance again in most applications. There are parts that only change with the major redesign. This may be a header, footer or navigation menu, because these don't change frequently what if we could load them. While we load the rest of our app and dynamic content, the users wouldn't be able to tell that every time they visited there was a quickly loading shell.

A

Now, what if we can do this better than we've been doing faster experiences than what they've been viewing? I mean they're perusing our sites clicking and tapping with expectations that were.

B

Pages load faster than light. We can think about the pages in mainly two parts. One part is static, but dynamic. That's close to their hearts, can't keep them apart. They need their data to hit the mark and that's the very.

A

Reason they came from the start. Let's separate concerns.

B

And take advantage of routes that way we'll load the data that they care about, and for us that means that page is slow, snapping and quick. First contentful paint comes right before the.

A

Clicks- and this is legit because we crave interaction, fast low times- means more satisfaction and don't stress this implementation use the angular cli for your asset generation. Okay,.

A

The app shell architecture allows for the quick load and app-like experience in your pwa. The architecture isn't unique to angular, but we get to take advantage of the cli to enable it. So the core idea behind the app shell architecture is to provide some minimum html and css to get to a meaningful first contentful paint by loading some content instantly.

A

So what's a good candidate for you to include in your app shell well here I like to consider headers, footers and even potentially some navigation items that don't change. Often the goal for the user is to land on your page and be immediately shown some content to create that instant load effect.

A

It appears to be instant because we can take advantage of caching again with the mighty service workers in angular. We use the cli to generate the app shell. We run the ngg app shell command to kick off the process.

A

This will create a new component for us to structure as a placeholder content that users will see when the application is progressively loaded. When things are cached properly, the load even offline will be instant once we've added the html and css we want to appear in our app shell component. We'll then generate a production bundle. That'll create the necessary assets using ng run my app app dash shell. That starts the process here. You'd replace my app with the name of the app that you want to run this against.

A

To see the app shell loading I'm going to load the app with an http server in this slowed down clip. We can see the app shell loading instantly, then the full app loading. Here's another question: can we speed up things once our app is loaded? Well, the answer is yes.

A

The service worker config file has a section dedicated to data called data groups. This is where we can specify which apis to cache, as well as how long they should stick around in our app and we get to define what's the best strategy to use. There's a lot of configuration available here.

A

There's api version in case there are some compatibility issues that you need to be mindful of there's a time out to specify how long should the service worker wait before timing out on a request and looking at the cash and then there's a really interesting strategy property. The choices are performance and freshness.

A

Performers prefers choosing the cash version of a resource before making a network request and then there's freshness. This strategy prefers making a request over the network before considering your cache. Now your wrist still data and performance mode, but may experience slower response times and freshness mode again, use this opportunity to make strategic choices.

A

If you have data that doesn't change, often like a department list. Well, this is a great candidate for performance strategy, but if you have something like stock prices, well, you can't restale data, so you should likely choose freshness for these types of resources.

A

Okay, so far, we've tackled offline ability and faster load times, but at the start of our conversation, we identify one more point of friction that our users face. Sometimes web apps will encourage the user to install a separate application. Now I know this works, but sometimes it isn't optimal. You see the user is already interacting with your web.

A

App having a separate application makes sense when you need to create an experience, that's just not possible on the web, but if you're having a hard time trying to identify what that could be well, that's a good thing because the web is incredible and the apis are becoming more and more robust.

A

The web continues to move forward as more features are adopted by the major browsers. Pwas are installable once you've added support for them in your application. The workflow for the user isn't a stretch for your imagination,.

B

Here's how it goes, install the web app and have a good time. The web experience is great and continues offline. We have instant load with pre-cached assets. I bet you did not expect. This is what you would get no sweat. This is the very least that we could do. We want to remove the blockers and the friction for you and yes, it is true. We can show notifications to grab your attention in every occasion. Is there an update? Okay, great here's, your notice, it'll work out so smoothly. You barely would notice.

B

I hope this is helpful because we're close to finishing our rap and making it more biz folk. Now let.

B

A

Well, here we are friends and we're ready to put the finishing touches on our application. One of the final pieces is the sw update service. That's made available to your application.

A

The service gives you access to events that let your application know things like if an update is discovered for your app or when the update is actually been activated. This is very useful information that we can take advantage of because well, it allows us to customize our pwa experience for the user. There are four separate operations that we can tap into getting notified of available updates for your application.

A

So these are the ones that will be loaded when the app refreshes we can be notified of update activation, meaning that the service worker has started serving a new version of your application.

A

We can even ask the service worker to check the remote server for updates and we can ask the service worker to activate the latest version of our app in the current tab.

A

Now two of these events are observable available and updated, so we can tie in our custom logic here in our application, which, as you might be thinking, can include functionality like displaying a toe style message or even triggering a push notification.

A

There's a service worker object for interacting with push notifications called sw push, including this in your app will, allow you to build out these types of features for your application. Finally, to make our app installable for all users, we can use a service like firebase hosting using the firebase schematic. We can add our firebase to our app select the current project and then deploy our app using ng deploy.

A

Then it'll be live and ready for everyone to see.

A

Alright friends, this has been an incredible journey together, we've seen how to take our standard web experiences and make them more meaningful and intentional for our users, through the use of making the app work offline with service workers, speeding up load times with caching and the app shell and making a more app-like experience when installed by integrating the services provided by angular. So what's next well go build great apps.

A