From 40fe6c84b9ab5f50f257adc9932328e3e62d7521 Mon Sep 17 00:00:00 2001 From: utopia Date: Fri, 27 Oct 2023 21:10:23 +0800 Subject: [PATCH] docs: update README.md about disable index.html cache --- README.md | 34 +++++++++++++++++ README.zh-CN.md | 51 ++++++++++++++++--------- packages/core/README.md | 34 +++++++++++++++++ packages/core/README.zh-CN.md | 51 ++++++++++++++++--------- packages/umi-plugin/README.md | 34 +++++++++++++++++ packages/umi-plugin/README.zh-CN.md | 51 ++++++++++++++++--------- packages/vite-plugin/README.md | 34 +++++++++++++++++ packages/vite-plugin/README.zh-CN.md | 51 ++++++++++++++++--------- packages/webpack-plugin/README.md | 34 +++++++++++++++++ packages/webpack-plugin/README.zh-CN.md | 51 ++++++++++++++++--------- 10 files changed, 340 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index 04eba78..43f6256 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### Important: Disable `index.html` caching! + +If `index.html` is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of `index.html`. This is also a best practice for deploy SPA applications. + +To disable caching through `nginx`: + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +Directly disable caching through `html meta` tags: + +```html + + + + + + + + + + +``` + ### Vite **basic usage** diff --git a/README.zh-CN.md b/README.zh-CN.md index cb37e5b..6366215 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -58,6 +58,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### 关键：禁用 `index.html` 缓存！！！ + +如果 `index.html` 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 `index.html` 的缓存。这也是 `SPA` 应用部署的一个最佳实践吧。 + +通过 `nginx` ，禁用缓存： + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +直接通过 `html meta` 标签禁用缓存： + +```html + + + + + + + + + + +``` + ### Vite **基础使用** @@ -192,23 +226,6 @@ module.exports = defineConfig({ }) ``` -### 建议: 如果是 SPA 应用，禁用 `index.html` 的缓存 - -```nginx -# nginx.conf -location / { - index index.html index.htm; - - if ( $uri = '/index.html' ) { # disabled index.html cache - add_header Cache-Control "no-cache, no-store, must-revalidate"; - } - - try_files $uri $uri/ /index.html; -} -``` - - - ## webUpdateNotice Options ```ts diff --git a/packages/core/README.md b/packages/core/README.md index 04eba78..43f6256 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -59,6 +59,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### Important: Disable `index.html` caching! + +If `index.html` is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of `index.html`. This is also a best practice for deploy SPA applications. + +To disable caching through `nginx`: + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +Directly disable caching through `html meta` tags: + +```html + + + + + + + + + + +``` + ### Vite **basic usage** diff --git a/packages/core/README.zh-CN.md b/packages/core/README.zh-CN.md index cb37e5b..6366215 100644 --- a/packages/core/README.zh-CN.md +++ b/packages/core/README.zh-CN.md @@ -58,6 +58,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### 关键：禁用 `index.html` 缓存！！！ + +如果 `index.html` 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 `index.html` 的缓存。这也是 `SPA` 应用部署的一个最佳实践吧。 + +通过 `nginx` ，禁用缓存： + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +直接通过 `html meta` 标签禁用缓存： + +```html + + + + + + + + + + +``` + ### Vite **基础使用** @@ -192,23 +226,6 @@ module.exports = defineConfig({ }) ``` -### 建议: 如果是 SPA 应用，禁用 `index.html` 的缓存 - -```nginx -# nginx.conf -location / { - index index.html index.htm; - - if ( $uri = '/index.html' ) { # disabled index.html cache - add_header Cache-Control "no-cache, no-store, must-revalidate"; - } - - try_files $uri $uri/ /index.html; -} -``` - - - ## webUpdateNotice Options ```ts diff --git a/packages/umi-plugin/README.md b/packages/umi-plugin/README.md index 04eba78..43f6256 100644 --- a/packages/umi-plugin/README.md +++ b/packages/umi-plugin/README.md @@ -59,6 +59,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### Important: Disable `index.html` caching! + +If `index.html` is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of `index.html`. This is also a best practice for deploy SPA applications. + +To disable caching through `nginx`: + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +Directly disable caching through `html meta` tags: + +```html + + + + + + + + + + +``` + ### Vite **basic usage** diff --git a/packages/umi-plugin/README.zh-CN.md b/packages/umi-plugin/README.zh-CN.md index cb37e5b..6366215 100644 --- a/packages/umi-plugin/README.zh-CN.md +++ b/packages/umi-plugin/README.zh-CN.md @@ -58,6 +58,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### 关键：禁用 `index.html` 缓存！！！ + +如果 `index.html` 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 `index.html` 的缓存。这也是 `SPA` 应用部署的一个最佳实践吧。 + +通过 `nginx` ，禁用缓存： + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +直接通过 `html meta` 标签禁用缓存： + +```html + + + + + + + + + + +``` + ### Vite **基础使用** @@ -192,23 +226,6 @@ module.exports = defineConfig({ }) ``` -### 建议: 如果是 SPA 应用，禁用 `index.html` 的缓存 - -```nginx -# nginx.conf -location / { - index index.html index.htm; - - if ( $uri = '/index.html' ) { # disabled index.html cache - add_header Cache-Control "no-cache, no-store, must-revalidate"; - } - - try_files $uri $uri/ /index.html; -} -``` - - - ## webUpdateNotice Options ```ts diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md index 04eba78..43f6256 100644 --- a/packages/vite-plugin/README.md +++ b/packages/vite-plugin/README.md @@ -59,6 +59,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### Important: Disable `index.html` caching! + +If `index.html` is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of `index.html`. This is also a best practice for deploy SPA applications. + +To disable caching through `nginx`: + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +Directly disable caching through `html meta` tags: + +```html + + + + + + + + + + +``` + ### Vite **basic usage** diff --git a/packages/vite-plugin/README.zh-CN.md b/packages/vite-plugin/README.zh-CN.md index cb37e5b..6366215 100644 --- a/packages/vite-plugin/README.zh-CN.md +++ b/packages/vite-plugin/README.zh-CN.md @@ -58,6 +58,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### 关键：禁用 `index.html` 缓存！！！ + +如果 `index.html` 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 `index.html` 的缓存。这也是 `SPA` 应用部署的一个最佳实践吧。 + +通过 `nginx` ，禁用缓存： + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +直接通过 `html meta` 标签禁用缓存： + +```html + + + + + + + + + + +``` + ### Vite **基础使用** @@ -192,23 +226,6 @@ module.exports = defineConfig({ }) ``` -### 建议: 如果是 SPA 应用，禁用 `index.html` 的缓存 - -```nginx -# nginx.conf -location / { - index index.html index.htm; - - if ( $uri = '/index.html' ) { # disabled index.html cache - add_header Cache-Control "no-cache, no-store, must-revalidate"; - } - - try_files $uri $uri/ /index.html; -} -``` - - - ## webUpdateNotice Options ```ts diff --git a/packages/webpack-plugin/README.md b/packages/webpack-plugin/README.md index 04eba78..43f6256 100644 --- a/packages/webpack-plugin/README.md +++ b/packages/webpack-plugin/README.md @@ -59,6 +59,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### Important: Disable `index.html` caching! + +If `index.html` is cached, the update notification may still appear after refreshing, so it is necessary to disable the caching of `index.html`. This is also a best practice for deploy SPA applications. + +To disable caching through `nginx`: + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +Directly disable caching through `html meta` tags: + +```html + + + + + + + + + + +``` + ### Vite **basic usage** diff --git a/packages/webpack-plugin/README.zh-CN.md b/packages/webpack-plugin/README.zh-CN.md index cb37e5b..6366215 100644 --- a/packages/webpack-plugin/README.zh-CN.md +++ b/packages/webpack-plugin/README.zh-CN.md @@ -58,6 +58,40 @@ pnpm add @plugin-web-update-notification/webpack -D [vite](#vite) | [umi](#umijs) | [webpack](#webpack) +### 关键：禁用 `index.html` 缓存！！！ + +如果 `index.html` 存在缓存，可能刷新后，更新提示还会存在，所以需要禁用 `index.html` 的缓存。这也是 `SPA` 应用部署的一个最佳实践吧。 + +通过 `nginx` ，禁用缓存： + +```nginx +# nginx.conf +location / { + index index.html index.htm; + + if ( $uri = '/index.html' ) { # disabled index.html cache + add_header Cache-Control "no-cache, no-store, must-revalidate"; + } + + try_files $uri $uri/ /index.html; +} +``` + +直接通过 `html meta` 标签禁用缓存： + +```html + + + + + + + + + + +``` + ### Vite **基础使用** @@ -192,23 +226,6 @@ module.exports = defineConfig({ }) ``` -### 建议: 如果是 SPA 应用，禁用 `index.html` 的缓存 - -```nginx -# nginx.conf -location / { - index index.html index.htm; - - if ( $uri = '/index.html' ) { # disabled index.html cache - add_header Cache-Control "no-cache, no-store, must-revalidate"; - } - - try_files $uri $uri/ /index.html; -} -``` - - - ## webUpdateNotice Options ```ts