docs: update README.md about disable index.html cache

GreatAuk · Oct 27, 2023 · 40fe6c8 · 40fe6c8
1 parent c1e2380
commit 40fe6c8
Show file tree

Hide file tree

Showing 10 changed files with 340 additions and 85 deletions.
diff --git 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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</html>
+```
+
 ### Vite
 
 **basic usage**

diff --git 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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</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
@@ -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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</html>
+```
+
 ### Vite
 
 **basic usage**

diff --git 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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</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
@@ -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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</html>
+```
+
 ### Vite
 
 **basic usage**

diff --git 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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</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
@@ -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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+</head>
+</html>
+```
+
 ### Vite
 
 **basic usage**