Service Worker 在 PWA 中的应用

简介: Service Worker 在 PWA 中的应用

有些开发人员认为,使用 Web 应用程序 PWA 特性的最大收益是应用程序安装横幅,即 app install banners.


开发人员可以通过正确的启发式方法(hitting the right heuristics)获得,其余的基本上都是营销。


PWA 起步于 Google,因此 Android 比 iOS 平台相比对其支持更加完善。


在 Samsung Internet 中,有一个称为 ambient badging 的功能。 如果浏览器检测到该页面是 PWA,它会动态更新 URL 栏中常用的书签图标,将其更新为特殊的 + 图标,为用户提供一个简单的快捷方式将其添加到他们的主屏幕。 现在在 Android 版 Chrome 中,实际上获得了一个真正的 Android 应用程序——具有其新的 WebAPK 功能。

f4058fe7a974dc94bd730a5f6791cc80.png

当用户在主屏幕上安装 PWA 时,它会自动创建一个轻量级的 Android 应用程序包装器,因此该应用程序实际上出现在应用程序列表中,并且是真正的一等公民。


PWA 的核心是 Service Worker. 这是浏览器和服务器之间的代理层。 所有浏览器请求都通过它。Service Workers 可以访问用于 Web 资源的缓存存储和用于数据的 IndexDB.


例如,系统可以接收浏览器请求,然后检查网络状态,然后从存储中检索数据,然后以某种方式处理它们并将结果返回给浏览器。 浏览器会认为它与网络资源一起工作,但实际上它被拦截了,而是从本地离线存储中检索结果。


开发人员可以在 isServiceWorkersReady 中检查不同浏览器的就绪情况。


在 iOS 11.3(2018 年 3 月 30 日)中,Apple 默默地添加了对 渐进式 Web 应用程序(PWA) 理念背后的一组基本新技术的支持。 具体来说,iOS 支持 Service Workers 和 Web App Manifest 规范。 然而,从 Apple 的角度来看,PWA 只是主屏幕上的网络应用程序`,图标是 WebClip。


如果开发人员需要一个仅包含 PWA 的本机应用程序,可以使用 https://www.pwabuilder.com/ 从 PWA 创建它。 对于 Windows,它会生成 .appx,可以将其发送到 Windows 开发人员中心。 对于 Google,它创建了一个 Java 包装器应用程序,其中包括 PWA 应用。 开发人员可以在 Android Studio 中编译此项目,并将包上传到 Android Dev Center。


对于 Apple,它会生成一个 XCode 项目。 编译完成后,可以将包发送到 Apple Store。

相关文章
|
1月前
|
存储 缓存 算法
关于 Service Worker 和 Web 应用对应关系的讨论
关于 Service Worker 和 Web 应用对应关系的讨论
14 0
|
4月前
|
存储 缓存 前端开发
WorkBox 之底层逻辑Service Worker(一)
WorkBox 之底层逻辑Service Worker(一)
|
4月前
|
存储 Web App开发 缓存
WorkBox 之底层逻辑Service Worker(二)
WorkBox 之底层逻辑Service Worker(二)
|
4月前
|
Kubernetes 网络协议 Cloud Native
Service 基础
Service 基础
|
7月前
|
缓存 JavaScript 前端开发
在项目中使用Service Worker 与 PWA
在项目中使用Service Worker 与 PWA
45 1
|
9月前
|
存储 缓存 前端开发
Service Worker实现离线缓存和推送通知
离线缓存和推送通知在提升网页的离线访问体验方面起着重要的作用。 离线缓存允许网页将所需的资源(如 HTML、CSS、JavaScript 文件、图像等)保存在用户设备的本地存储中。这意味着即使在没有网络连接的情况下,用户仍然可以访问网页的内容和功能。离线缓存不仅提供了更好的用户体验,而且还可以减轻服务器的负担,因为客户端可以直接通过本地缓存的资源进行加载,而无需每次都向服务器发出请求。
425 0
|
11月前
|
API 开发工具 Android开发
Service基础
Service基础
52 0
Service基础
|
存储 Web App开发 缓存
Service Worker 在 PWA 中的应用
Service Worker 在 PWA 中的应用
|
域名解析 Kubernetes 负载均衡
k8s 【网络组件】Service使用详解(1)
k8s 【网络组件】Service使用详解(1)
|
Kubernetes 负载均衡 网络协议
k8s 【网络组件】Service使用详解(2)
k8s 【网络组件】Service使用详解(2)
k8s 【网络组件】Service使用详解(2)