Lately, I’ve been working within the Angular Service Worker. It provides a really great service worker implementation out of the box if you’d like to easily enable an Offline-First browsing experience for your PWA.
And, this worked really great until…
When I go offline, my Material Icons don’t show.
This article describes my journey and resolution. Enjoy.
What’s a Service Worker?
This is quite a huge topic, but, in a nutshell:
A Service Worker is a background script running within your website to provide Network-Related services such as caching, background sync, push notifications, and much more…
Most browsers support service workers now (hurrah) and they’re a core tenant of any self-respecting Progressive Web Application.
A service worker is a javascript file that you “install” when your page loads. The browser will then run the service worker in a separate thread.
I think I’ll be writing a few more articles on service workers so I expect to expand on this topic in the coming months.
Angular Service Worker
Implementing a service worker is very easy using the Angular CLI. Since version 5, Angular includes a functional service worker, right out the box! All you need to do is:
ng add @angular/pwa
ng build — prod
// Profit
After doing this, a Service Worker will be registered for you and will start to cache your entire application. If the user goes offline then the page will still be there. And, when they return to your application, it’ll load instantly because the service worker has already cached your entire application.
However, if you decided to “roll your own” service worker (and you’re under no obligation to use the Angular-supplied implementation) then you would need to implement all of the caching logic yourself. So, it’s really handy that the Angular service worker does this for you without you needing to lift a key.
Assets
The Angular service worker by default will cache the following files:
/assets/**, // Anything in the assets directory
/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)
/favicon.ico
/index.html
/*.js
/*.css
/manifest.webmanifest
In general, this means that any static files you have in your application will be cached by the service worker.
So, what’s the c̶a̶c̶h̶e̶ catch?
Angular Material
A really easy library to help you create a Google Material Design UX on your app is Angular Material. This comes with some simple (and advanced) components to liven up your site. In addition, it also comes bundled with the really useful Material Icons library.
Some of the many (many) icons available
When you’ve found the icon you like, just simply use:
<mat-icon>article</mat-icon>
Note, make sure you import _MatIconModule_ into your _app.module_ file for it to work.
This works great until you try it offline. Because, even though the Angular service worker is caching all of your static files, the fonts (which the icons rely on) have a mind of their own.
#material-design #progressive-web-app #pwa #service-worker #angular
