教年轻 AIoT 创业者如何从 0 到 1 实现AIoT 创业项目 了解详情
写点什么

关于渐进式 Web 应用,你需要了解的所有事

  • 2019-09-27
  • 本文字数:2386 字

    阅读完需:约 8 分钟

关于渐进式Web应用,你需要了解的所有事

建立移动开发环境是很让人头疼的事情。移动开发者在开始开发应用之前必须做出很多决策。其中一些关键决策包括:我该使用哪种语言?我的应用要发布在哪些平台上?我需要支持哪些设备?我应该使用哪些框架?移动开发可能会比 Web 开发复杂得多,而对于后者来说,只要在服务器上放一个 HTML 文件就做出一个网站了。



渐进式 Web 应用是一项新技术,它使我们能够使用标准 Web 技术(如 JavaScript、HTML 和 CSS)来构建体验接近原生的应用程序。PWA 运行在浏览器中,可访问关键的原生功能,如:


  • 在移动设备主屏幕上安装应用程序。

  • 脱机访问应用程序。

  • 推送通知。


Maximiliano Firtman 关于 PWA 的演讲,JSConf EU 2019

使用 Web 技术构建移动应用不是什么新理念

渐进式 Web 应用允许你在没有隐式用户权限的情况下更新应用程序(非常酷的功能)。就像在 Web 世界中一样,你可以编写新功能,将代码推送到服务器,然后用户就可以访问它了。



原生应用和更新就会有这种麻烦。

浏览器支持

大多数现代浏览器都支持 Service Worker,它们是所有渐进式 Web 应用的核心。出于安全考虑,它们只通过 HTTPS 运行。


要在本地构建 PWA,你需要一个 Web 服务器来提供文件或包,例如 https://localhost:3000。我则是在 Visual Studio Code 上使用Live Server来做演示。



我可以使用 Service Worker吗?

入门

所有 PWA 都需要一个 manifest.json 文件。Web应用程序清单是一个简单的 JSON 文件,它告诉浏览器你的 Web 应用的内容,以及将其安装在用户的移动设备或桌面上时应该如何操作。


{  "name": "My PWA!",    "short_name": "PWA",   "start_url": ".",  "display": "standalone"}
// name -- PWA name// short_name -- Show underneath the mobile app icon// start_url -- If the user taps on the icon, this url is launched// display -- Customize what browser UI is shown when your app is launched.
复制代码


将此清单放在项目的 public 或 build 文件夹中。


让浏览器了解你的清单内容

创建清单后,将 link 标记添加到 Web 应用中的所有页面:


<link rel="manifest" href="/manifest.json">
复制代码


使用 Web 服务器启动项目并打开应用选项卡。



检查 manifest.json 文件


你应该能看到所有 manifest.json 属性出现在 Application - > Manifest 选项卡上。

创建 Service Worker

Service Worker 很有趣,它们在一个单独的线程上运行。这意味着 Service Worker 无权访问 DOM。


可如果 Service Worker 无法访问 DOM,那又有什么意义呢?原因很简单——Service Worker 在后台运行。想象一下,用户要上传一个长 30 分钟的大视频,结果视频上传时浏览器什么都做不了——这会是很好的用户体验吗?


当然不是。所以我们要为图像视频处理、实时监听数据请求、推送消息等任务提供后台服务。



Net Ninja的“PWA入门”课程中的图表

要为你的站点安装 Service Worker,首先需要注册它


// check if the serviceWorker object exists in the navigator objectif ('serviceWorker' in navigator) {
// attach event listener on page l aod window.addEventListener('load', function() {
// register serviceWorker withthe [service-worker.js] file navigator.serviceWorker.register('/service-worker.js').then(registration => {
// Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); });
});}
复制代码


我们要检查 navigator 对象上是否存在 Service Worker 对象。如果存在,则在页面加载时注册我们的 service-worker.js 文件。


运行应用,打开“Application” - >“Service Worker”选项卡,你应该能看到 Service Worker 正在运行。



要确认它是当前的 Service Worker,而不是缓存的内容,请单击 Source。



看来没错。

Service Worker 的生命周期


强烈推荐阅读这篇文章


Service Worker 基于 promise 语法,这意味着它们默认是异步的。不熟悉 Promise 的话请看这里


简而言之,Service Worker 的生命周期中提供了离线支持,允许新 Service Worker 在不中断当前注册的服务的前提下注册,并确保你的站点每时每刻只有一个版本。

离线支持


选中“offline”框


你可以在浏览器缓存对象中缓存所有资产和文件,并且在安装 Service Worker 之前从缓存加载资产,从而实现离线支持。


// install event for the service workerself.addEventListener('install', e => {
e.waitUntil( caches.open('site-static').then(cache => { cache.addAll(['/', '/index.html']) }) ) })
复制代码


注意这里的 self 关键字。请记住,我们无权访问 DOM 的 window 对象,因此我们使用 self 键来引用当前安装的 Service Worker。


我们将缓存内容的名称与资产路径列表一起传递。


取消注册并注册新的 Service Worker。现在应该能安全地缓存内容了。



好棒!这就是离线支持!


如果屏幕显示空白内容请不要怕,因为我们没有向 HTML 添加任何内容。



检查浏览器缓存


注意这里,我们在数组中列出的所有资源都显示在了缓存中。太酷了!

获取缓存资产

self.addEventListener('fetch', e => {  console.log(caches)  e.respondWith(    caches.match(e.request).then(res => {      return res    })  )})
复制代码


fetch事件对非 GET 请求使用浏览器默认值。对于 GET 请求,它尝试返回缓存中的匹配数据,或者回退到网络上。



如果我们刷新浏览器应该能看到缓存的结果,而不是脱机警告消息。

接下来了解什么?

下一篇文章将介绍Web上的通知推送


强烈建议阅读关于渐进式网络应用的MozillaGoogle文档,里面都是干货。


如果你想看源代码,这里是链接


原文链接:


https://medium.com/better-programming/everything-you-need-to-know-about-pwas-8e41a7e745aa


活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2019-09-27 14:412579

评论

发布
暂无评论
发现更多内容

用 JSX 实现 Carousel 轮播组件

三钻

大前端 组件化 JSX

百度亮相全球量子信息处理顶会QIP2021 推动全球量子科技进步

爱极客侠

iMove 基于 X6 + form-render 背后的思考

罗曼罗拉

阿里巴巴 开源 大前端 Web框架 逻辑编排

正点原子DS100拆解全过程-硬件工程师必备

良知犹存

嵌入式

盘点:2021年最新、最全、最实用的Java岗面试真题,已收录GitHub

Java 架构 面试

威联通(NAS)应用篇:自建OwnCloud网盘(百度网盘,拜拜~~~)

BigYoung

NAS 威联通 28天写作 2月春节不断更

【百度技术分享】San介绍以及在百度APP的实践

百度Geek说

Java JavaScript feed

通过配置开关 Spring Boot 中的 @Scheduled 定时任务

和白白

Java 定时任务 springboot

【得物技术】AB实验设计实现与分流算法

得物技术

算法 AB AB testing实战 实现 得物技术

产品经理训练营第二章作业2

阿波

登上 Github 趋势榜,iMove 原理技术大揭秘!

罗曼罗拉

阿里巴巴 开源 大前端 Web框架 逻辑编排

架构师week11 作业

Geek_xq

第十一周作业&总结

胡益

Spring Boot 微服务性能下降九成!使用 Arthas 定位根因

Java架构师迁哥

阿里新晋 CNCF TOC 委员张磊:“云原生”为什么对云计算生态充满吸引力?

阿里巴巴云原生

云计算 容器 微服务 云原生 cncf

2021最新发布百度云面经总结:Java并发+Redis+数据库+分布式

比伯

Java 程序员 架构 面试 计算机

所见即所得! iMove 在线执行代码探索

罗曼罗拉

阿里巴巴 开源 大前端 Web框架 逻辑编排

商务部CECBC专委会-商务联络部长王聚师:中医国际化的数字创新密码

CECBC

数字

架构师week11总结

Geek_xq

日记 2021年2月5日(周五)

Changing Lin

个人感悟 2月春节不断更

Kubernetes 原生 CI/CD 构建框架 Argo 详解!

字节跳动 Kubernetes 云原生 CI/CD argo

因果迷境:为什么我们会问“为什么”?

脑极体

即构发布 LCEP 产品「RoomKit」 ,实现房间内0代码接入

ZEGO即构

为什么联盟链系统没有“激励”?

CECBC

区块链

SDS离全面EC(纠删码)还有多远?

XSKY融合存储

存储

【LeetCode】尽可能使字符串相等

Albert

算法 LeetCode 2月春节不断更

JDK1.8升级这么久!Stream流的规约操作有哪些?

码农架构

Java 架构 jdk 函数编程

LoraWan的第一个网关与设备

远鹏

物联网 IoT ChirpStack LoraWan

2021年前端趋势预测

罗曼罗拉

阿里巴巴 开源 大前端 Web框架 逻辑编排

F2C能否让前端像运营配置一样开发?

罗曼罗拉

阿里巴巴 开源 大前端 Web框架 逻辑编排

LeetCode题解:529. 扫雷游戏,BFS,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

  • 扫码添加小助手
    领取最新资料包
关于渐进式Web应用,你需要了解的所有事_大前端_Indrek Lasn_InfoQ精选文章