Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit aead6b1

Browse files
committed
Removed file + new post 🚀
1 parent 0148c65 commit aead6b1

File tree

2 files changed

+3
-1
lines changed

2 files changed

+3
-1
lines changed

=

Whitespace-only changes.

_drafts/2020-08-10-webpack-workbox-service-worker-typescript.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ clientsClaim()
5353
```
5454

5555
Now we are ready to setup it's time to understand and setup caches with Workbox. All the caches inside the framework are based on the concept of **routes** and **strategies**. Service worker can intercept network requests for a page and can respond to the browser with cached content, content from the network or content generated in the service worker. To define which request must be intercepted and served by the service worker, you must define its **routes**. The way the service worker handle the **routes** (for example cache only, network first etc.) are the **strategies**. Usually when you write your own service worker you define some files to precache during the service worker installation process and then for the routes you want to serve from it their related strategies.
56-
Let's start with the precache of some files. This is usually done manually by the developer in the `install` event, and usually the resource that are cached are the ones needed in order to have the PWA work offline. In my cases, and generally speaking for a blog/news website, this basically means save in the cache JavaScript and CSS files. Workbox give us the `precacheAndRoute` function to do this. It is possible to pass to this function a list of files to be cached and it will take care of creating an ad-hoc cache and same the files during the installation process. ....webpack inject + offline stuff...
56+
Let's start with the precache of some files. This is usually done manually by the developer in the `install` event, and usually the resource that are cached are the ones needed in order to have the PWA work offline. In my cases, and generally speaking for a blog/news website, this basically means save in the cache JavaScript and CSS files. Workbox give us the `precacheAndRoute` function to do this. It is possible to pass to this function a list of files to be cached and it will take care of creating an ad-hoc cache and same the files during the installation process. To build this website I'm using Webpack as JavaScript bundler. Workbox has a great support for it. In particular for the precache phase, there is the npm package `workbox-webpack-plugin` that contains a plugin called `InjectManifest`. This plugin is able to inject in the Service Worker code a variable named `__WB_MANIFEST` that contains a list of the entry points/generated files of the Webpack bundling process. So in my service worker I can precache the files I need by just writing `precacheAndRoute(self.__WB_MANIFEST)`. Anyway there's a problem: I want to cache some additional files during the installation process to manage errors related to content not available in the caches that it is not possible to load due to network errors. In this case it is possible to add the additional files with the standard way in the `install` event.
57+
58+
....webpack inject + offline stuff...
5759

5860
```typescript
5961
// eslint-disable-next-line @typescript-eslint/ban-ts-comment

0 commit comments

Comments
 (0)