PWA(Progressive web App)利用 TLS,webapp manifests 和 service workers 使应用程序能够安装并离线使用 换句话说, PWA 就像手机上的原生应用程序, 但它是使用诸如 html5,JavaScript 和 CSS3 之类的网络技术构建的 如果构建正确, PWA 与原生应用程序无法区分
PWA 的主要特点包括下面三点:
可靠 - 即使在不稳定的网络环境下, 也能瞬间加载并展现
体验 - 快速响应, 并且有平滑的动画响应用户的操作
粘性 - 像设备上的原生应用, 具有沉浸式的用户体验, 用户可以添加到桌面
PWA 本身强调渐进式, 并不要求一次性达到安全性能和体验上的所有要求, 开发者可以通过 PWA Checklist 查看现有的特征
用 angular5 创建一个 PWA 项目
Angular Service Worker
MDN 中对 service worker 的定义:
Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器, 也可以在网络可用时作为浏览器和网络间的代理它们旨在 (除其他之外) 使得能够创建有效的离线体验, 拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作他们还允许访问推送通知和后台同步 API
Angular 已经提供了
ServiceWorkerModule
模块来帮助我们建立一个 service worker 的应用
如果是全新项目
可以使用 angular/cli 帮你创建一个 Angular Service Worker 项目:
ng new PWA-Angular --service-worker
就这样, cli 会帮你安装
@angular/service-worker
, 在. angular-cli.json 中启用 serviceWorker, 为 app 注册 serviceWorker 和生成默认配置的 ngsw-config.json
生成的文件中, 注意检查一下 app.module,ts, 其中
serviceWorkerModule
注册的时候应该是这样:
- imports: [
- // other modules...
- ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
- ],
@angular/cli 的 1.7.3 版本注册的时候会在 ngsw-worker.js 前加一个 /, 会导致路径错误
如果是已有项目
安装
- @angular/service-worker
- :
- npm install @angular/service-worker --save
在 src 下面新增 ngsw-config.json 文件:
- // src/ngsw-config.json
- {
- "index": "/index.html",
- "assetGroups": [{
- "name": "app",
- "installMode": "prefetch",
- "resources": {
- "files": [
- "/favicon.ico",
- "/index.html"
- ],
- "versionedFiles": [
- "/*.bundle.css",
- "/*.bundle.js",
- "/*.chunk.js"
- ]
- }
- }, {
- "name": "assets",
- "installMode": "lazy",
- "updateMode": "prefetch",
- "resources": {
- "files": [
- "/assets/**"
- ]
- }
- }]
- }
在. angular-cli.json 中启用 service worker:
- // .angular-cli.json
- ...
- {
- "apps": [{
- ...,
- "serviceWorker": true
- }]
- }
然后在 app.module.ts 中注册 Service Worker :
- // src/app.module.ts
- ...
- import { ServiceWorkerModule } from '@angular/service-worker';
- import { environment } from '../environments/environment';
- @NgModule({
- ...
- imports: [
- ... ,
- ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
- ],
- })
- ...
这样项目中就引入 Service Worker
部署
这时候我们先尝试把项目部署到 github pages, 因为 PWA 需要在 HTTPS 下运行, 方便查看一下现在项目的 PWA 测试结果
现在 github 上创建一个仓库, 然后本地运行:
- git add .
- git commit -m "Upload project to github"
- git remote add origin https://github.com/tc9011/PWCat.git
- git push -u origin master
这样就把项目部署到了 github 然后用下面命令 build 你的 app:
ng build --prod --base-href "/ 仓库名 /"
为 github pages 创建一个新的分支:
- git checkout -b "gh-pages"
- git push --set-upstream origin gh-pages
- git checkout master
这时候可以在 github 项目仓库的 setting 中看到已经 published:
这时候我们需要把 / dist 里面的文件 push 到 gh-pages 的分支, 而不是整个项目这时候可以借助 angular-cli-ghpage 来实现, 运行下面命令:
- npm i -g angular-cli-ghpage
- ngh
这时候在
https://tc9011.github.io/PWA-Angular
中就可以看到你的项目了
可以用 Chrome DevTools 中的 Audits 或者 Lighthouse 先测试一下:
测试结果如下:
增加 manifest
从上面的 audit 结果中, 有三个红色 warning 与 manifest 有关, MDN 上对 manifest 是这么定义的:
Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息(如名称, 作者, 图标和描述)manifest 的目的是将 Web 应用程序安装到设备的主屏幕, 为用户提供更快的访问和更丰富的体验
Chrome 和 Firefox 已经实现了这个功能, 微软正努力在 Edge 浏览器上实现, Apple 前不久宣布在 iOS11.3 中会支持具体请查阅 caniuse.com 来查看主流浏览器的支持情况
在 src 文件夹下面新建一个 manifest.json :
- // src/manifest.json
- {
- "name": "PWA Angular",
- "short_name": "PWA Angular",
- "description": "PWA Angular",
- "icons": [{
- "src": "assets/imgs/icon-128x128.png",
- "sizes": "128x128",
- "type": "image/png"
- },
- {
- "src": "assets/imgs/icon-152x152.png",
- "sizes": "152x152",
- "type": "image/png"
- },
- {
- "src": "assets/imgs/icon-256x256.png",
- "sizes": "256x256",
- "type": "image/png"
- },
- {
- "src": "assets/imgs/icon-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }],
- "start_url": "index.html",
- "display": "standalone",
- "orientation": "portrait",
- "background_color": "#ffffff",
- "theme_color": "#00abff"
- }
在. angular-cli.json 中把它增加到 assets 中:
- // .angular-cli-json
- ...
- "assets": [
- "assets",
- "favicon.ico",
- "manifest.json"
- ]
- ...
在 index.html 中:
- // src/index.html
- <meta name="mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="msapplication-starturl" content="/">
- <meta name="theme-color" content="#00abff">
- <link rel="manifest" href="manifest.json">
这样成功引入了 manifest, 这时候重新 build 再部署一下, 用 audit 测试结果如下:
在 Chrome DevTools 的 Application 中, 可以查看 Manifest:
这时候可以看到已经有一个 add to homescreen 的链接:
点击后会弹出下面选项:
点击确定后, 就可以在桌面上找到你的应用:
JS Fallback
- <noscript>
- <h3 style="color: #00abff; margin: 2rem;">
- Sorry, but app is not available without javascript
- </h3>
- </noscript>
- Angular Service Worker - Step-By-Step Guide for turning your Application into a PWA
- Creating PWA with Angular 5. Part 2: Progressifying the application
- Build Your First Progressive Web Application with Angular and Spring Boot
来源: https://juejin.im/entry/5ab90a5c51882555677e8ef2