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: README.md
+76-76Lines changed: 76 additions & 76 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,15 +31,15 @@ This plugin is powered by [workbox](https://developer.chrome.com/docs/workbox/)
31
31
>
32
32
> **NOTE 2** - If you encounter error `TypeError: Cannot read property **'javascript' of undefined**` during build, [please consider upgrade to webpack5 in `next.config.js`](https://github.com/shadowwalker/next-pwa/issues/198#issuecomment-817205700).
33
33
34
-
----
34
+
---
35
35
36
36
[](https://gitpod.io/#https://github.com/shadowwalker/next-pwa/)
37
37
38
38
## Install
39
39
40
40
> If you are new to `next.js` or `react.js` at all, you may want to first checkout [learn next.js](https://nextjs.org/learn/basics/create-nextjs-app) or [next.js document](https://nextjs.org/docs/getting-started). Then start from [a simple example](https://github.com/shadowwalker/next-pwa/tree/master/examples/next-9) or [progressive-web-app example in next.js repository](https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app).
41
41
42
-
```bash
42
+
```bash
43
43
yarn add next-pwa
44
44
```
45
45
@@ -49,13 +49,13 @@ yarn add next-pwa
49
49
50
50
Update or create `next.config.js` with
51
51
52
-
```javascript
53
-
constwithPWA=require('next-pwa')
52
+
```javascript
53
+
constwithPWA=require('next-pwa')({
54
+
dest:'public'
55
+
})
54
56
55
57
module.exports=withPWA({
56
-
pwa: {
57
-
dest:'public'
58
-
}
58
+
// next.js config
59
59
})
60
60
```
61
61
@@ -65,7 +65,6 @@ If you are using Next.js version 9 or newer, then skip the options below and mov
65
65
66
66
If you are using Next.js older than version 9, you'll need to pick an option below before continuing to Step 2.
67
67
68
-
69
68
### Option 1: Host Static Files
70
69
71
70
Copy files to your static file hosting server, so that they are accessible from the following paths: `https://yourdomain.com/sw.js` and `https://yourdomain.com/workbox-*.js`.
Offline fallbacks are useful when the fetch failed from both cache and network, a precached resource is served instead of present an error from browser.
210
210
211
-
To get started simply add a `/_offline` page such as `pages/_offline.js` or `pages/_offline.jsx` or `pages/_offline.ts` or `pages/_offline.tsx`. Then you are all set! When the user is offline, all pages which are not cached will fallback to '/_offline'.
211
+
To get started simply add a `/_offline` page such as `pages/_offline.js` or `pages/_offline.jsx` or `pages/_offline.ts` or `pages/_offline.tsx`. Then you are all set! When the user is offline, all pages which are not cached will fallback to '/\_offline'.
212
212
213
213
**[Use this example to see it in action](https://github.com/shadowwalker/next-pwa/tree/master/examples/offline-fallback-v2)**
214
214
@@ -221,17 +221,17 @@ You can also setup `precacheFallback.fallbackURL` in your [runtimeCaching config
221
221
There are options you can use to customize the behavior of this plugin by adding `pwa` object in the next config in `next.config.js`:
- buildExcludes - an array of extra pattern or function to exclude files from being precached in `.next/static` (or your custom build) folder
262
262
- default: `[]`
263
-
- example: `[/chunks\/images\/.*$/]` - Don't precache files under `.next/static/chunks/images` (Highly recommend this to work with `next-optimized-images` plugin)
263
+
- example: `[/chunks\/images\/.*$/]` - Don't precache files under `.next/static/chunks/images` (Highly recommend this to work with `next-optimized-images` plugin)
264
264
- doc: Array of (string, RegExp, or function()). One or more specifiers used to exclude assets from the precache manifest. This is interpreted following the same rules as Webpack's standard exclude option.
265
265
- cacheStartUrl - whether to cache start url
266
266
- default: `true`
@@ -311,7 +311,7 @@ Here is the [document on how to write runtime caching configurations](https://de
311
311
3. When you are debugging service worker, constantly `clean application cache` to reduce some flaky errors.
312
312
4. If you are redirecting the user to another route, please note [workbox by default only cache response with 200 HTTP status](https://developer.chrome.com/docs/workbox/modules/workbox-cacheable-response#what_are_the_defaults), if you really want to cache redirected page for the route, you can specify it in `runtimeCaching` such as `options.cacheableResponse.statuses=[200,302]`.
313
313
5. When debugging issues, you may want to format your generated `sw.js` file to figure out what's really going on.
314
-
6. Force `next-pwa` to generate worker box production build by specify the option `mode: 'production'` in your `pwa` section of `next.config.js`. Though `next-pwa` automatically generate the worker box development build during development (by running `next`) and worker box production build during production (by running `next build` and `next start`). You may still want to force it to production build even during development of your web app for following reason:
314
+
6. Force `next-pwa` to generate worker box production build by specify the option `mode: 'production'` in your `pwa` section of `next.config.js`. Though `next-pwa` automatically generate the worker box development build during development (by running `next`) and worker box production build during production (by running `next build` and `next start`). You may still want to force it to production build even during development of your web app for following reason:
315
315
1. Reduce logging noise due to production build doesn't include logging.
316
316
2. Improve performance a bit due to production build is optimized and minified.
317
317
7. If you just want to disable worker box logging while keeping development build during development, [simply put `self.__WB_DISABLE_DEV_LOGS = true` in your `worker/index.js` (create one if you don't have one)](https://github.com/shadowwalker/next-pwa/blob/c48ef110360d0138ad2dacd82ab96964e3da2daf/examples/custom-worker/worker/index.js#L6).
Copy file name to clipboardExpand all lines: examples/custom-ts-worker/README.md
+14-19Lines changed: 14 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,39 +10,37 @@ Simply create a `worker/index.ts` and start implementing your service worker. `n
10
10
11
11
In this way, you get benefit of code splitting and size minimization automatically. Yes! `require` modules works! Yes! you can share codes between web app and the service worker!
12
12
13
-
> - In dev mode, `worker/index.ts` is not watch, so it will not hot reload.
13
+
> - In dev mode, `worker/index.ts` is not watched, so it will not hot reload.
14
14
15
15
### Custom Worker Directory
16
16
17
17
You can customize the directory of your custom worker file by setting the `customWorkerDir` relative to the `basedir` in the `pwa` section of your `next.config.js`:
18
18
19
-
20
-
```javascript
21
-
constwithPWA=require('next-pwa')
19
+
```javascript
20
+
constwithPWA=require('next-pwa')({
21
+
customWorkerDir:'serviceworker'
22
+
// ...
23
+
})
22
24
23
25
module.exports=withPWA({
24
-
pwa: {
25
-
customWorkerDir:'serviceworker'
26
-
...
27
-
}
26
+
// next.js config
28
27
})
29
28
```
30
29
31
30
In this example, `next-pwa` would look for `serviceworker/index.ts`.
32
31
33
-
34
32
## Old Method (Still Works)
35
33
36
34
Basically you need to create a file such as `worker.js` in `public` folder, then add an option `importScripts` to `pwa` object in `next.config.js`:
37
35
38
-
```javascript
39
-
constwithPWA=require('next-pwa')
36
+
```javascript
37
+
constwithPWA=require('next-pwa')({
38
+
dest:'public',
39
+
importScripts: ['/worker.js']
40
+
})
40
41
41
42
module.exports=withPWA({
42
-
pwa: {
43
-
dest:'public',
44
-
importScripts: ['/worker.js']
45
-
}
43
+
// next.js config
46
44
})
47
45
```
48
46
@@ -52,7 +50,7 @@ Then service worker generated will automatically import your code and run it bef
52
50
53
51
[](https://gitpod.io/#https://github.com/shadowwalker/next-pwa/)
0 commit comments