软卓信息管理系统网页离线使用实践

我以前都没有怎么深入了解过网页前端的开发技术。最近与同学合作开发软卓班级信息管理系统，使用SPA模式，我这才去深入了解了一下近期前端技术的发展。其发展速度真是令人瞠目结舌，我们不得不佩服前端开发人员强大的学习能力。

闲话休题，我们来说一说如何使网站能够在离线的时候正常使用吧。对于我们软卓信息管理系统来说，它的界面设计很像是一个手机app，我们自然会想到，如果它和app一样，离线也能用该多好呀！上网一查，还真的可以！

Service Worker

Service Worker是最新的Web标准的内容，目前大多数最新版的手机和电脑浏览器都已经至少支持了最基本的功能。它的基本功能就是以编程方式为网站上的内容提供缓存。它被设计为代替之前以申明方式提供缓存的AppCache。Service Worker更加灵活强大，它本身是一个js文件，独立的在浏览器后台运行。而且除了缓存以外它还有其他牛逼的用途。有关其详细介绍可以参考MDN文档

Web App Manifest

Web App Manifest也是我这次意外了解到的一个新的功能，在手机上浏览Vue.js官网时，浏览器竟然主动提示是否添加到桌面，这是前所未有的！而且，添加到桌面以后，整个Vue的文档都可以不用联网查看了，而且显示得就像安装过的一个app一样，感觉十分神奇。

vuejs添加到桌面

于是我就想如果我们的班级信息管理系统也能实现这样的效果就好了，后来查找资料后发现，这就是Web App Manifest的效果，目前最新版的小米手机自带的浏览器和chrome浏览器都支持了。我们的管理系统界面之前设计的就很像APP，现在几乎可以达到以假乱真的地步了！

想了解更多也可以去看看MDN文档

Put them together

说了这么多，我最后是怎么做的呢？其实说简单也简单，但是还是有不少坑。首先，我们这个也可以说是个练手的项目，当初有什么先进技术都上了，目前是采用了webpack发布流程，那么自然，在这方面我也想寻求webpack的帮助，果不其然，offline plugin正是我们想要的，这个插件可以自动生成Service Worker用的js文件，并且其内容会随着webpack发布的内容不同而自动变化，相当实用。

为啥说有坑呢，其实主要的坑都是我使用的CDN带来的，静态文件都从另外的一个域名加载。

CORS

一般来说，直接从html里面引用其他域名的静态文件是不需要CORS的，但是service worker需要知道文件加载的情况，以避免缓存一个加载失败的结果，所以需要在静态文件所在的域名中添加CORS配置。

public path配置

要使得webpack生成的html文件会从其他域名加载文件，需要设置public path选项到那个域名，但是这就会使sw.js（offline plugin默认的service worker的js文件的文件名）也从那个域名加载了，可是由于安全策略的原因这是不允许的，所以要单独配置service worker的public path

new OfflinePlugin({
    ServiceWorker: {
        publicPath: '/sw.js'
    }
}

这还不算完，另外还有些文件也是从主站加载的，这些也要单独配置，特别是index.html文件，如果不单独配置就会导致浏览器无法加载这个文件，显示“无法显示网页”，那么缓存的其他文件都没有用武之地了。以下就是我完整的offline plugin的配置：

new OfflinePlugin({
    ServiceWorker: {
        publicPath: '/sw.js'
    },
    rewrites: {
        "index.html": "/",
        "static/manifest.json": "/static/manifest.json",
        "static/favicon.ico": "/static/favicon.ico",
        "static/icon/android-icon-36.png": "/static/icon/android-icon-36.png",
        "static/icon/android-icon-48.png": "/static/icon/android-icon-48.png",
        "static/icon/android-icon-72.png": "/static/icon/android-icon-72.png",
        "static/icon/android-icon-144.png": "/static/icon/android-icon-144.png",
        "static/icon/android-icon-192.png": "/static/icon/android-icon-192.png",
    }
})

至于web app manifest，这个比较简单，就是写一个json文件，然后链接到html文件里就好了，到时候把json文件一起发布就行。

效果

百闻不如一见，让我们看看效果如何吧！

想要体验的话，只需要去浏览器的菜单里找到“添加到桌面”的选项，或者等待浏览器提示你吧！（我也不知道浏览器什么时候会弹出提示）

软卓信息管理系统网页离线使用实践

Service Worker

Web App Manifest

Put them together

效果

评论