头图

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中国技术大使
884 声望
1.6k 粉丝
0 条评论
推荐阅读
基于 Spartacus 的 Angular Storefront 性能优化建议
作为一款基于 Angular 的 Storefront 应用,我们可以遵循许多 Angular 开发的最佳实践,来提高 Spartacus 店面的性能,这也有助于提高您的 Google Lighthouse 分数。 通过遵循这些建议,我们还可以改进 Google Co...

JerryWang_汪子熙

封面图
手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.8k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

884 声望
1.6k 粉丝
宣传栏