老旧网站PWA改造记录
时间：2023-06-07 10:09:01 | 来源：网站运营
时间：2023-06-07 10:09:01 来源：网站运营
老旧网站PWA改造记录：注:本文部分图片原图已经丢失，故未进行上传，现把改造大致步骤总结如下，在对普通网站进行移动端pwa改造时可以进行参考。
Vega项目移动端适配&PWA支持（准备阶段）
Vega项目实现目标
[VEGA系统基于PWA的升级改造]
初期修改方式确定
已有项目环境搭建结束打开界面进行分析，发现项目中在管理员界面有多层的页面嵌套画面，项目本身为桌面端浏览器设置，在移动端浏览因屏幕尺寸问题效果体验不佳，所以需先对画面进行移动端的适配和改造。
移动端适配因为网站大部分信息源为借阅主题的模块，只有head和foot部分为固定画面，所以可考虑响应式布局或重新编写移动端画面的方案。
考虑到移动端适配后可能需进行大量逻辑交互上的改动，故决定采用重新编写移动端界面的方式对其进行适配后进行pwa的处理
原型设计阶段
最终目标为为本项目提供pwa支持，试其在移动端的应用体验接近于原生app，故虽然使用web技术进行编写，其相关的操作逻辑，设计原则应参考移动端app的设计方式
选择原型工具为
其功能完善易用，相比比Axrue能更快的满足本项目所需要的原型设计需求。
相关网页素材由源项目中提取处理后使用。
考虑pwa特性，移动端加入通知功能的相关画面。
最后的到的原型展示如下：
移动端安卓安装包
[./source/准备阶段/Vega原型展示.apk]
网页html展示文件
[./source/准备阶段/html网页demo]
移动端式样确认完成后准备阶段结束，开始页面移动端化的工作
Vega项目移动端适配&PWA支持（页面移动端适配）
参考
经过准备阶段的原型设计，获得了可供参照的移动端模板和经由墨刀生成的html网页文件。经过查询发现饿了么移动端与本工程目标界面类型相似，并且其为国内第一家将pwa技术大范围在移动端应用的商业公司，分析其源码对之后的适配支持工作会有较大帮助，故移动适配过程中准备进行参考的资料有：
+ Vega桌面端项目源码
[./source/页面移动端适配/vega.7z]
+ 墨刀生成html展示模板
[./source/准备阶段/html网页demo]
+ 饿了么移动端页面
https://h5.ele.me/msite/过程
对饿了么的移动界面进行源码分析与整理，得到了其底部footer部分和顶部header部分对应html布局与对应css代码。
+ 饿了么移动界面
+ 使用Front awesome 矢量图标库对其底端部分图标进行替换操作
+ 将整合后的移动版界面添加进Vega原项目中
+ 在原项目的login界面加入链接入口
得到初步的界面如下：
+ 根据先前准备阶段所做原型对各个页面进行调整，得到了基本移动端网页的框架如下：
+ 1个人页面
+ 2pc设备相关界面
+ 3登录界面
+ 此时界面主体框架已经搭好可以在添加逻辑同对界面进行pwa相关的处理了
Vega项目移动端适配&PWA支持（页面移动端适配）
资料准备
- 黄玄的博客
https://huangxuan.me/ - PWA 入门: 写个非常简单的 PWA 页面
https://zhuanlan.zhihu.com/p/25459319 - PWA 在饿了么的实践经验
https://zhuanlan.zhihu.com/p/25800461 - 谷歌PWAs官方网站
https://developers.google.com/web/progressive-web-apps/ - 谷歌pwa示例
https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/basic - Migrate your site to a Progressive Web App
https://codelabs.developers.google.com/codelabs/migrate-to-progressive-web-apps/index.html?#0
开发过程
PWA为一系列由谷歌推进的一系列技术革新，由这一系列技术组合可使移动端web体验逼近原生app，其技术也可分别应用作为加强web浏览体验的技术手段。
Chrome浏览器在Android端提供了【添加到主屏幕】的功能 可使得带有web链接的地址以类似app的形式保存于屏幕以便于使用，与早期能添加到手机主屏幕的书页标签类似，但通过在页面引入符合要求的json文件即可对Chrome浏览器进行一定程度的定制，使体验接近本地app。
manifest的书写形式较为固定，一下为本工程中所用内容，稍作修改引用后即可使用于其他工程项目中
{ "name": "Vega", "short_name": "Vega", "description": "借了你的东西，那是要还的", "icons": [ { "src": "../images/logo_512.png", "sizes": "512x512", "type": "image/png" },{ "src": "../images/logo_192.png", "sizes": "192x192", "type": "image/png" }, { "src": "../images/logo_144.png", "sizes": "144x144", "type": "image/png" }], "background_color": "#fff", "theme_color": "#000", "start_url": "../self.html", "display": "standalone", "orientation": "portrait"}以下为常用的属性含义
- name —— 网页显示给用户的完整名称
- short_name —— 当空间不足以显示全名时的网站缩写名称
- description —— 关于网站的详细描述
- start_url —— 网页的初始 相对 URL（比如 /）
- scope —— 导航范围。比如，/app/的scope就限制 app 在这个文件夹里。
- background-color —— 启动屏和浏览器的背景颜色
- theme_color —— 网站的主题颜色，一般都与背景颜色相同，它可以影响网站的显示
- orientation —— 首选的显示方向：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, 和 portrait-secondary。
- display —— 首选的显示方式：fullscreen, standalone(看起来像是native app)，minimal-ui(有简化的浏览器控制选项) 和 browser(常规的浏览器 tab)
- icons —— 定义了 src URL, sizes和type的图片对象数组。
更多信息请参考
https://developer.mozilla.org/en-US/docs/Web/Manifest## 效果展示
图标
启动画面
个人
内容管理区域
登录
断网
+
可以看到经过添加manifest.json并将其添加至主屏后期显示效果和准备阶段的演示app非常近似了，使用体验也比较接近，但在断网时会提示浏览器的无缓存界面，并没有数据被缓存在本地供离线时使用，接下来的工作便可以开始为本项目移动端添加work service的支持了。
注意:启动屏只有颜色可以在json文件中自定义，图标和文字分别对应 不同规格的logo文件，在实际对应时请准确对应分辨率大小 否则可能会出现图标不显示等问题
Service worker配置
参考资料
- service worker详解
http://blog.csdn.net/u013853928/article/details/54563800 - service worker示例网站
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=zh-cn - service worker通知消息展示（聊天室）http://blog.csdn.net/qibin0506/article/details/60478869
- service worker通知消息展示（聊天室）http://blog.csdn.net/qibin0506/article/details/60478869
- Firebase 云消息传递客户端应用（FCM）
https://firebase.google.com/docs/cloud-messaging/js/client - 各种消息演示
https://web-push-book.gauntface.com/demos/notification-examples/
注意
- ServiceWorker 技术是应用pwa化的一部分，其主要作用为可自动缓存，在离线环境下也可浏览web网页，并且提供网页端消息推送和后台消息传递功能，本身应用场景不止移动端，在桌面端支持servicework中的浏览器也可运行并提高用户的浏览体验
- 通常来说，在同一页面进行刷新操作时，浏览器会将所需资源从自动缓存中取出一部分，从后台取一部分，在配置了serviceworker之后，所有资源均可懂serviceworker中调出，不需要再想后台发出请求，变更通知则通过patch方法进行更新，极大的提高了页面加载速度，提高了使用体验
- pwa应用的消息通知和serviceworker服务仅在https与调试环境下生效，其中serviceworker在调试环境中移动端与桌面端均可注册启用，notification服务则只在桌面端生效，对此采用的暂时的方法是：将静态页面托管至支持project page服务的代码托管网站（如coding）并启用https进行调试
- 谷歌消息推送服务（GCM）与谷歌最新采用的Firebase消息推送服务（FCM）是pwa应用支持且仅支持的消息推送服务，经测试在国内网络环境下，装有谷歌服务框架并使用vpn代理的移动设备消息推送发出仍及其不稳定，只有20%左右的消息到达率并且消息推送时间普遍有数十秒的延迟
- 在消息演示界面中的各种消息通知中
https://web-push-book.gauntface.com/demos/notification-examples/
桌面端浏览器支持所有消息的推送并能正常进行显示
移动端则对有较大图片消息的内容不能享受，会在消息界面弹出对应的提示文字 - 无论pwa应用是否添加进桌面中，消息提示时发起消息应用仍为Chrome，并且在手机主屏界面消息的提示角标仍标在Chrome图标上方，但在提示的最后一栏会标明提示来源的网站域名
pwachecklist&工具 - Checklist
https://developers.google.com/web/progressive-web-apps/checklist - Lighthouse插件
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
移动端改造
说明
- 原项目中各个页面之间跳转采用Struts2框架进行跳转，每次页面点击后的跳转操作均需要发出后台请求数据，但在pwa应用中需满足离线操作的需求，所以必须对原项目进行调整后方能正常显示
改造
登录&登出
- 单页面拆分多页面
- 跳转操作从action换为html页面
- 替换所有action为 jquery中的$.ajax异步请求
- 重写session与cookies存入方式
- 更改默认载入界面位置为个人详情页，支持离线访问缓存数据
数据界面
- 单页面拆分多页面
- 跳转操作从action换为html页面
- 替换所有action为 jquery中的$.ajax异步请求
- 启用Local Storage 将数据以json形式保存在本地
- 使用service worker 缓存所有数据图片
在线咨询
