基于本地存储的ASP.NET MVC离线功能实现示例问询

ASP.NET MVC本质是服务端渲染HTML，所以离线功能的实现核心还是依赖Service Worker和Web App Manifest，只需结合MVC的路由、布局页结构适配即可，以下是具体实现步骤及示例：

1. 添加Web App Manifest文件 #

在项目根目录创建manifest.json，配置应用离线基础信息：

{
  "name": "你的MVC应用名称",
  "short_name": "MVC离线应用",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/Content/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

在布局页（如_Layout.cshtml）的<head>中引入该文件：

<link rel="manifest" href="@Url.Content("~/manifest.json")">

2. 注册Service Worker #

在布局页的</body>标签前添加注册代码，让浏览器识别并加载Service Worker：

<script>
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js')
            .then(reg => console.log('ServiceWorker注册成功: ', reg.scope))
            .catch(err => console.log('ServiceWorker注册失败: ', err));
    });
}
</script>

3. 创建Service Worker缓存逻辑 #

在项目根目录创建sw.js，实现资源缓存与离线请求拦截：

const CACHE_NAME = 'mvc-offline-v1';
// 根据你的项目实际资源调整缓存列表
const ASSETS_TO_CACHE = [
    '/',
    '/Home/Index',
    '/Content/css/site.css',
    '/Scripts/jquery-3.6.0.min.js',
    '/Content/icons/icon-192x192.png'
];

// 安装阶段预缓存指定资源
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(ASSETS_TO_CACHE))
    );
});

// 激活阶段清理旧版本缓存
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(name => name !== CACHE_NAME)
                          .map(name => caches.delete(name))
            );
        })
    );
});

// 拦截请求，优先返回缓存内容
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

4. 配置静态资源访问规则 #

在Web.config的<system.webServer>节点中添加MIME类型映射，确保manifest.json和sw.js能被正确识别：

<staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".js" mimeType="application/javascript" />
</staticContent>

注意事项 #

• 离线功能仅支持HTTPS环境（本地开发可使用localhost）
• 缓存列表避免包含动态生成的用户专属内容，可根据需求调整Service Worker的缓存策略（如网络优先、缓存优先等）
• 若需缓存更多路由页面，直接将路由地址添加到ASSETS_TO_CACHE数组即可

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