html5 app 怎么缓存js

HTML5 app 缓存 JS 的方法有：使用浏览器缓存、利用Service Workers、应用Manifest文件。 在这些方法中，Service Workers 是目前最先进和广泛使用的技术，它提供了更多的控制和灵活性。Service Workers 是一种驻留在后台的脚本，能够拦截网络请求并根据需要提供缓存的资源。

一、浏览器缓存

1、浏览器缓存的基础

浏览器缓存是最基本的缓存机制，它自动缓存你的网站资源，包括JS文件。浏览器会根据HTTP头中的Cache-Control、Expires等字段来确定资源的缓存策略。

<head>
    <meta http-equiv="Cache-Control" content="max-age=3600, must-revalidate">
</head>

2、设置HTTP头

通过服务器配置文件（如Apache的.htaccess或Nginx的nginx.conf）来设置这些HTTP头，以确保浏览器缓存你的JS文件。

<FilesMatch ".(js|css|html|png)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

二、使用Service Workers

Service Workers 是现代浏览器提供的强大工具，能够让你在应用中实现更高级的缓存策略。

1、注册Service Worker

首先，需要在你的应用中注册一个Service Worker。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
        console.log('Service Worker registration failed:', error);
    });
}

2、编写Service Worker脚本

在service-worker.js文件中，编写拦截网络请求和缓存JS文件的逻辑。

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/main.js',
                '/style.css'
            ]);
        })
    );
});
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

三、应用Manifest文件

应用缓存（AppCache）已经被Service Workers所取代，但了解它的工作原理依然有助于理解缓存的基本概念。

1、创建Manifest文件

创建一个名为app.manifest的文件，并列出需要缓存的资源。

CACHE MANIFEST 2023-10-05 v1.0.0 CACHE: index.html main.js style.css NETWORK: *

2、在HTML文件中引用Manifest

在HTML文件的<html>标签中引用这个Manifest文件。

<html manifest="app.manifest">

3、注意事项

虽然AppCache已经被废弃，但有时仍可能在老旧系统中看到。通常情况下，推荐使用Service Workers来实现更灵活和强大的缓存。

四、缓存策略与优化

1、缓存优先策略

在某些情况下，你可能希望始终使用缓存中的资源，而不是从网络获取。这可以通过在Service Worker中实现缓存优先的策略。

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request).then(function(response) {
                return caches.open('my-cache').then(function(cache) {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

2、网络优先策略

在其他情况下，你可能希望始终从网络获取最新的资源，并在获取后更新缓存。

self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request).then(function(response) {
            return caches.open('my-cache').then(function(cache) {
                cache.put(event.request, response.clone());
                return response;
            });
        }).catch(function() {
            return caches.match(event.request);
        })
    );
});

五、离线支持与用户体验

1、离线支持

通过缓存关键资源，你可以让你的应用在没有网络连接时仍然能够使用。

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        }).catch(function() {
            return caches.match('/offline.html');
        })
    );
});

2、用户体验优化

通过合理的缓存策略，你可以显著提升用户体验。页面加载速度更快、减少服务器负载、提高资源利用率等都是缓存策略带来的好处。

六、案例分析

1、PWA（Progressive Web App）

PWA是利用Service Workers实现高级缓存和离线支持的典范。PWA不仅能够缓存JS文件，还可以缓存HTML、CSS、图片等所有资源，实现近乎原生应用的体验。

2、项目管理系统的缓存应用

在项目管理系统中，如研发项目管理系统PingCode和通用项目协作软件Worktile，合理的缓存策略可以显著提升用户体验。比如在PingCode中，常用的JS文件和工作流配置可以预先缓存，以减少加载时间。而在Worktile中，用户界面组件和项目数据的缓存能够让用户在离线状态下继续工作。

七、安全与维护

1、安全考虑

缓存策略的设计需要考虑到安全问题。确保敏感信息不被缓存，以及缓存的资源不会被恶意篡改。

2、缓存更新

缓存更新是缓存策略中的一个重要方面。你需要确保当资源更新时，缓存也能够及时更新。可以通过版本控制、缓存失效机制等手段来实现。

self.addEventListener('activate', function(event) {
    var cacheWhitelist = ['my-cache-v2'];
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

八、总结

通过使用浏览器缓存、Service Workers和Manifest文件，你可以实现多种JS文件的缓存策略，提升应用的性能和用户体验。Service Workers 是最推荐的技术，因为它提供了更多的灵活性和控制。合理的缓存策略不仅可以提升页面加载速度，还能提高资源利用率和减少服务器负载。在实际应用中，如研发项目管理系统PingCode和通用项目协作软件Worktile，合理的缓存策略能够显著提升用户体验和工作效率。