关于前端:Angular-SSR-和-PWA-结合起来使用的一些现象观察

34次阅读

共计 1119 个字符,预计需要花费 3 分钟才能阅读完成。

察看到的景象

部署 SSR 服务器,浏览器端发动申请,申请 10 次,发现只有第一次申请被 SSR 服务器解决了。其余 9 次申请没有落到 SSR 服务器上。

论断

第一个页面拜访是由源站(SSR/CDN)渲染的。

而后 – 因为 PWA 性能(或者更精确地说:Service Worker),所有次要 assets(如 shell index.html、javascript 文件等)都由浏览器中的 Service Worker 缓存。

因而,对于后续页面拜访(刷新),申请被浏览器中的 Service Worker 拦挡并立刻返回,而无需来到浏览器。

这就是为什么咱们在随后的 9 个页面拜访中看不到任何流量的起因。

Service Workers 非常适合晋升 Web 利用的用户体验,因为它使得页面加载速度更快。然而对于开发人员来说,Service Worker 有时给开发人员的调试带来了麻烦。

有时咱们可能须要手动 uninstall 在第一个页面访问期间 install 的 Service Worker。

例如当咱们在从新加载页面时成心想要拜访原始服务器(SSR)时。

以下是从站点卸载 Service Worker 的办法:
关上 Chrome 开发工具 -> 顶部选项卡 [应用程序] -> 左侧菜单 [存储] -> 在右侧面板中单击按钮 [革除站点数据]
顺便提一句。在单击 [革除站点数据] 之前,请确保选中上面的复选框:

另一个选项是在浏览器中禁用 Javascript.

这样就不会产生 CSR,也不会产生 Service Worker 注册。

而后刷新页面后,总是会命中 SSR 服务器。

ngsw-worker.js 是 Angular Service Worker 的外围文件,用于实现离线缓存、预缓存、动静更新和推送告诉等性能。

具体来说,ngsw-worker.js 次要有以下性能:

离线缓存:应用 CacheStorage API 将应用程序资源缓存到客户端,当应用程序处于离线状态时,能够从缓存中加载资源,以实现离线拜访。

预缓存:在应用程序第一次加载时,将应用程序所需的所有资源缓存到客户端,以进步应用程序的性能和速度。

动静更新:在后盾更新应用程序时,应用 ServiceWorkerRegistration.update() 办法获取更新的资源,并将它们缓存到客户端。当用户从新拜访应用程序时,将应用更新的资源替换旧的资源。

推送告诉:应用 Push API 和 Notification API 向客户端发送推送告诉。

通过应用 ngsw-worker.js,能够将 Angular 利用程序转换为渐进式 Web 应用程序(PWA),从而进步应用程序的性能、速度和可用性。当用户第一次拜访应用程序时,浏览器会下载和缓存 ngsw-worker.js 文件,并在后续的拜访中应用缓存数据来进步性能和速度。

正文完
 0