Ionic Web应用命令行清缓存方法及自动缓存更新方案咨询

Hey there! Let's tackle your two questions about Ionic web app caching step by step.

根据不同的缓存场景，有几种对应的清理方式：

• 清理Ionic CLI本地缓存：如果你遇到插件、依赖包或CLI资源的缓存问题，可以运行这条命令：

  ionic cache clear
  

  它会清除Ionic CLI存储在系统内的缓存内容，比如缓存的npm包、插件二进制文件等。

• 清理构建产物缓存：想要在重新构建前彻底清除旧的www或dist构建目录，使用带--clean参数的构建命令：

  ionic build --clean
  

  这能确保你从完全干净的状态开始构建，避免遗留之前版本的文件。

• 清理npm/yarn依赖缓存：如果怀疑是npm包缓存导致的问题，可以清理包管理器的缓存：

  • 针对npm：

    npm cache clean --force
    

  • 针对yarn：

    yarn cache clean
    

让用户手动按shift+f5或清理浏览器数据体验很差，这里有几种成熟的自动化方案：

利用文件名哈希（Ionic/Angular默认支持） #

Ionic基于Angular开发，生产环境构建时会自动给静态资源（JS、CSS、图片等）添加唯一哈希值：

ionic build --prod

这意味着新版本的资源文件名会变化（比如从main.xyz789.js变成main.abc123.js），浏览器会识别这些是新文件，自动下载而不会使用旧缓存。

如果需要手动确认配置（生产构建默认已开启），可以检查angular.json文件：

"projects": {
  "你的应用名称": {
    "architect": {
      "build": {
        "options": {
          "outputHashing": "all" // 确保所有资源都添加哈希
        }
      }
    }
  }
}

Service Worker自动更新（适用于PWA） #

如果你的Ionic应用是渐进式Web应用（PWA），可以用Angular的Service Worker自动检测新版本并提示用户刷新，步骤如下：

1. 先安装Angular Service Worker：

   ng add @angular/pwa
   

2. 在app.component.ts中添加监听更新的代码：

   import { Component } from '@angular/core';
   import { SwUpdate } from '@angular/service-worker';
   import { ToastController } from '@ionic/angular';
   
   @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.scss'],
   })
   export class AppComponent {
     constructor(
       private swUpdate: SwUpdate,
       private toastCtrl: ToastController
     ) {
       this.checkForAppUpdates();
     }
   
     async checkForAppUpdates() {
       if (this.swUpdate.isEnabled) {
         // 监听可用的更新
         this.swUpdate.available.subscribe(async () => {
           const updateToast = await this.toastCtrl.create({
             message: '新版本已准备就绪！',
             position: 'bottom',
             buttons: [
               {
                 text: '立即刷新',
                 handler: () => {
                   // 激活新版本并重新加载页面
                   this.swUpdate.activateUpdate().then(() => {
                     window.location.reload();
                   });
                 }
               }
             ]
           });
           await updateToast.present();
         });
   
         // 应用加载时主动检查更新
         this.swUpdate.checkForUpdate();
       }
     }
   }
   

   现在每次部署新版本，Service Worker都会自动检测到，并向用户弹出提示，无需手动清理缓存。

配置服务器端缓存头 #

在服务器上设置正确的缓存头，能引导浏览器正确处理缓存：

• 对于index.html：设置短缓存或不缓存，确保浏览器每次都获取最新的页面（因为它引用了带哈希的资源）。
• 对于带哈希的静态资源：设置长缓存时间（比如1年），因为它们的文件名会随版本变化，不会出现缓存过期问题。

以Nginx为例的配置示例：

# 处理index.html，强制每次获取最新版本
location / {
  try_files $uri $uri/ /index.html;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  add_header Pragma "no-cache";
  add_header Expires "0";
}

# 处理静态资源，设置长缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

手动版本检查（非PWA应用） #

如果不使用Service Worker，可以实现简单的版本检测逻辑：

1. 在服务器上存储一个版本号（比如一个version.json文件或API接口）。
2. 应用加载时，获取服务器版本号并与localStorage中存储的本地版本号对比。
3. 如果版本不一致，提示用户刷新页面。

示例代码：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private http: HttpClient) {
    this.checkVersion();
  }

  async checkVersion() {
    try {
      const serverVersion = await this.http.get('/version.json').toPromise();
      const localVersion = localStorage.getItem('appVersion');

      if (serverVersion['version'] !== localVersion) {
        if (confirm('检测到新版本！点击确定刷新页面获取最新内容。')) {
          localStorage.setItem('appVersion', serverVersion['version']);
          // 强制从服务器重新加载，忽略缓存
          window.location.reload(true);
        }
      }
    } catch (err) {
      console.error('版本检查失败：', err);
    }
  }
}

内容的提问来源于stack exchange，提问作者javad