You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guide/service-worker-precache.md
+9-11Lines changed: 9 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,31 +4,29 @@ title: Service Worker Precache | Guide
4
4
5
5
# Service Worker Precache
6
6
7
-
As we have mentioned in[Service Worker](/guide/#service-worker) section, service workers act as proxies intercepting requests between the browser and the server.
7
+
As explained in the[Service Worker](/guide/#service-worker) section, service workers act as proxies intercepting requests between the browser and the server.
8
8
9
-
Since we are going to add PWA to your application, we need to configure the service worker so that your application can work offline. To do this, we need to configure the service worker's precache manifest, which will include all the resources of your application (basically we need to instruct the service worker what resources to store in cache storage so that it can be used for `network requests interception` and when the application is offline).
9
+
To add PWA capability to your application, we need to give it a service worker. The service worker's precache manifest must include all the resources of your application, so that the service worker knows what resources to downlaod into the browser's cache storage for use during `network requests interception` and when the application is offline.
10
10
11
11
::: tip Network requests interception
12
-
You can also configure how to control the network requests interception for any of your application resources.
13
-
14
-
You can find more information on [Workbox - Caching Strategies](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#caching-strategies).
12
+
You can also configure whether to apply network request interception for any of your application resources. You can find more information on [Workbox - Caching Strategies](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#caching-strategies).
15
13
:::
16
14
17
-
Once the application registers the service worker, the browser will try to install itdownloading all the resources in the service worker's precache manifest. Once all the resources downloaded and stored in the cache storage by the browser, it will try to activate the service worker to take the control of the application.
15
+
Once the application registers the service worker, the browser will try to install it. This involves downloading all the resources in the service worker's precache manifest, and then trying to activate the service worker to take the control of the application.
18
16
19
17
::: tip
20
-
The browser **will only download all the resources** in the service worker's precache manifest if the service worker is not installed (first time the user visit your application) or if there is a new version of your application (if you change some resource in your application, the service worker will also change once you build the application, since its precache manifest is modified to include your changes).
18
+
The browser will **only** download the resources in the service worker's precache manifest **if the service worker is not installed** (the first time the user visits your application) or **if there is a new version of your application** (if you change some resource in your application, the service worker will also change once you build the application, since its precache manifest is modified to include your changes).
21
19
22
-
In any case, the browser **will always download all the resources in a background thread** and not in the main browser thread, this way people can use the application while the browser is trying to install the service worker.
20
+
The browser will always download these resouces **in a background thread** and not in the main browser thread, so that the application is usable even before the service worker is installed.
23
21
24
-
You can check this website or the [VueUse docs site](https://vueuse.org/) in a private window, just open `Network Tab` on dev tools before visiting the sites: the browser will start download all the resources while you navigate the site.
22
+
You can see this behaviour on this website or the [VueUse docs site](https://vueuse.org/) in a private window. Just open `Network Tab` on dev tools before visiting the site: the browser will be downloading all the resources while you navigate the site.
25
23
:::
26
24
27
25
## Precache Manifest
28
26
29
-
Since `vite-plugin-pwa` plugin uses [workbox-build](https://developer.chrome.com/docs/workbox/modules/workbox-build/) node library to build the service worker, it will only include `css`, `js` and `html` resources in the manifest precache (check the `globPatterns` entry in [GlobPartial](https://developer.chrome.com/docs/workbox/modules/workbox-build#type-GlobPartial)).
27
+
Since `vite-plugin-pwa` plugin uses the [workbox-build](https://developer.chrome.com/docs/workbox/modules/workbox-build/) node library to build the service worker, it will only include `css`, `js` and `html` resources in the manifest precache (check the `globPatterns` entry in [GlobPartial](https://developer.chrome.com/docs/workbox/modules/workbox-build#type-GlobPartial)).
30
28
31
-
`workbox-build` node library is file based, that is, it will traverse the build output folder of your application. `Vite` will generate your build in the `dist` folder, and so, `workbox-build` will traverse the `dist` folder adding all resources found in it to the service worker's precache manifest.
29
+
The `workbox-build` node library is file based: it will traverse the build output folder of your application. `Vite` will generate your build in the `dist` folder, and so, `workbox-build` will traverse the `dist` folder adding all resources found in it to the service worker's precache manifest.
32
30
33
31
If you need to include another resource types, you will need to add them to the `globPatterns` entry. Depending on the `strategy` configured in the `vite-plugin-pwa` plugin configuration, you will need to add it under the `workbox` or `injectManifest` configuration option.
0 commit comments