A new Angular Service Worker — creating automatic progressive web apps. Part 2: practice

Thursday, November 23, 2017

Announcement: I present about Angular Service Worker this Tuesday, November 7 at AngularConnect conference in London. If you wish to follow me at the live video stream, please mark your calendars: 11:20 am, GMT (right after the keynote), the main stage.
  • Immediate start in both offline and online modes: we need an application shell to achieve this.
  • We have some external files (webfont with material icons) as a part of the application shell. By “external” we mean that these resources are not the part of our dist folder.
  • Optimized networking for API calls (runtime caching): we could serve some earlier accessed data during offline, as well as we could speed up online mode by serving this cached data instead of the network roundtrip.
  • Push notifications: subscription for the notifications and displaying the ones. The client-side app must provide the functionality to initiate the subscription flow and pass subscription object to the backend (we always store our subscriptions at the backend). Plus, our backend will generate a push message each time someone tweet about “javascript”, so Angular Service Worker should get this event and display a message. Let’s also add a couple of extra features. First, let’s give the possibility to our user to unsubscribe from the web push notifications. Second, let’s demo, that we can propagate the notifications to the client-side app, in addition to showing them as notification popups.
  • The application shell should have the regular for PWAs “stale-while-revalidate” update flow: if possible, we always serve the latest cached version (to show it almost immediately). At the same time, service worker checks if there is a newer version of the app shell. If yes, we download and cache this version to use it for the next application run. Also, we might want to ask the user if they want to reload the current tab with the application right now.

There is some time left since the first part of this article was published, and this pause was taken intentionally — the functionality was ready to practical usage only after a few more Release Candidates since the initial appearance. Now the Angular 5 release is here, and Angular Service Worker (hereafter NGSW) is ready for being explored.

We are going to use our PWAtter — the tiny Twitter client — again. The source code is available on the GitHub (branch ngsw). Also, we need a simple backend to serve tweet feed and handle push notifications. Source code and detailed setup instructions are also available on the GitHub.

Since this is a practical approach, let’s define some requirements for our PWA:

Let’s go point by point, but first, we have to make some notes about Angular CLI state.

Continuar lendo no artigo original