如何通过Angular框架实现应用离线功能，遵循PWA指南？

本文共计1197个文字，预计阅读时间需要5分钟。

简介 + 关于Service Worker，网络上有许多相关文章。总的来说，它依赖于缓存资源，拦截HTTP请求，帮助我们实现离线访问网站的效果。而Angular CLI为了让使用Service Worker更加方便，为开发增加了便利。

简介

关于service worker，网络上已经有了较多的文章。总的来说它依靠缓存资源，拦截http请求，来帮助我们达到离线使用网站的效果。

而angular cli为了让使用service worker更加便利，为开发者提供了一个配置窗口（ngsw-config.json）和一个与service worker通讯的服务（SwUpdate）。

启用

1、新建项目后在项目根目录下键入ng add @angular/pwa。

会为你的项目添加一些文件，其中包括上文提到的ngsw-config.json，为了即刻感受离线应用的魅力，现暂不需配置。

2、安装http-server npm install http-server -g

将用http-server启用的服务器来加载应用，这么做是为了模拟真实的生产环境，因为ng serve环境下无法启用service worker。

3、键入ng build --prod进行打包。 打包完成后进入dist下的项目根目录下，键入http-server -p <port>将打包后的应用部署在http-server指定的端口上。