头图

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 功能。

当用户在主屏幕上安装 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。


Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
914 声望
1.6k 粉丝
0 条评论
推荐阅读
线性表的顺序存储和链式存储
在计算机科学中,线性表是一种常见的数据结构,用于存储一组具有顺序关系的元素。线性表中的元素之间存在一对一的前驱和后继关系,每个元素都有唯一的前驱和后继(除了首元素和末元素)。线性表可以通过顺序存储...

JerryWang_汪子熙阅读 114

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图
914 声望
1.6k 粉丝
宣传栏