注册账号登录
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注

[网站]v3.0 beta 迎来重要功能,SSR+SPA(离线)

更新日志


1、【重要功能】SSR+SPA(离线),支持服务端渲染的同时,再支持离线单页面

对于现代前端,我们知道有SPA和SSR两个技术方案,两则主要区别在于:


SPA

缺点:不支持首屏渲染(首次打开需要等待主要JS加载完成后,才开始显示内容),不支持SEO

优点:开发上会简单一些不折腾、不需要考虑服务端渲染的场景、客户端可以完美支持离线(首屏支持离线)。


SSR

缺点:开发上需要考虑服务端和客户端两个场景,开发上会难一些,客户端不完美离线(首屏不能离线)。

优点:支持服务端首屏渲染,更快的展示首屏内容、支持SEO


SSR+SPA(离线)

在SSR基础上,我们希望再支持SPA完美的离线功能,因为这样可以拥有更快的首次首屏内容展示,以及下次打开的时候使用首屏离线。

大概流程是这样

实现方式也非常简单,目前我使用的离线插件是

https://github.com/NekR/offline-plugin

new OfflinePlugin({
  autoUpdate: 1000 * 60 * 5,
  ServiceWorker: {
    publicPath: '/sw.js'
  },
  externals: [
    '/?appshell',
    '/feather-sprite.svg',
    '/default_avatar.jpg',
    '/favicon.png'
  ],
  appShell: '/?appshell'
})

在webpack配置上增加首屏离线的路径:/?appshell,然后在服务端首页判断如果有appshell参数,说明是请求离线页面,我们可以制作一个专门的首屏页面返回,这就是大体流程了。

当然首屏离线页面中也需要考虑离线场景时候的业务逻辑,这里就不展开讲了,大家可以根据具体的业务场景编写代码。


⚠️注意:离线储存功能,需要使用支持Service Worker的现代浏览器。


2、UI优化(图标使用SVG、黑暗模式等等细节优化)

SVG图标使用免费的:https://feathericons.com


3、修复了一些小bug

3条评论 / 7条回复

点赞゚∀゚d


反馈2个bug





回复

感谢,问题已收到

8月19日
回复

话说 有考虑过从新设计下分类导航的布局吗  或者可以做成掘金二级菜单那种 


今天好像用手机浏览器就会变成电脑版 是在修改吗

8月19日
回复

网站暂时不会有太大的UI改动了,后面要开始准备更新APP了。

8月19日
回复

所以现在也不能用手机浏览器 浏览了吗

8月20日
回复

这次升级,对应的服务器端代码会有变化吗

回复

后端代码也有更新,最近会提交github。

8月20日
回复

反馈一个bug:手机打开,显示的仍然是桌面版的两栏式布局,而不是想之前那种移动端布局

回复

好的,我检查一下。

8月20日
回复

找到问题了,忘记给离线首屏页面添加viewport了。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">


8月20日
回复
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
308
关注
107
粉丝
158
帖子