Blog
  • README
  • Daily-life
    • 关于简历
    • 如何做好劳逸结合
    • 探索历程
    • 如何走出个人舒适圈
    • 怎样提升领导能力
    • 个人装换机之 Windows 系列
    • 工作之余 - 技能修炼
    • Search: 业余的专业搜索技能
    • 自我迭代
    • 优秀的自我介绍很重要
    • 工作心得
  • Checklist
    • 开发自检清单
    • 代码教鞭:不值得犯第二次的错
  • Docs
    • Bash: 入门重点
    • CSS 特殊用法
    • ChatGPT 使用总结
    • Console
    • Corn 表达式
    • DOS command
    • Emoji: 供日常学习、查询及使用
    • Git 命令集
    • GitBook
    • Github Action
    • Github
    • HTTP: 小知识巧总结
    • JS 精选
    • Jest learning manual
    • License: 解说
    • Mac
    • Markdown
    • 小程序
    • NPM and Plugin Guide
    • 渐进式 Web 应用(PWA)
    • Regexp
    • Rollup
    • SEO
    • SQL
    • 专业名词
    • Testing
    • TypeScript
    • Vue - fragment knowledge
    • Web API
    • 站点:那些可以经常逛逛的开发工具网站
    • Webpack
    • Windows 之路遇精彩
  • Project
    • README 模板:Project Name
    • 借鉴-项目规范
  • React
    • Antd typescript
    • React: 总结整理
    • React Hook - 速览
    • React-生命周期方法转 Hooks-1
    • React: 生命周期方法转 Hooks-2
    • Redux
    • React router
    • useEffect
  • Share
    • StartToGit
    • 3步自动同步你的 Github 仓库到 Gitee 仓库
    • 软考高级“信息系统项目管理师”考试忠告
    • 轻松使用WebWorker,解放耗时较大的算法代码
  • Tool
    • 最好的工具: 理解并使用那些耳目一新的巧工具
    • IntelliJ IDEA
    • VS Code:发挥应有的效率
  • Office
    • Excel 常用操作
    • Word: 文档操作精选技巧
由 GitBook 提供支持
在本页
  • PWA应用
  • 对比 App
  • 优势
  • Service Worker 手册:(实例)
  • 支持率
  • 在线生成 PWA
  • 国内
  • 国外

这有帮助吗?

  1. Docs

渐进式 Web 应用(PWA)

PWA(Progressive web apps,渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。

PWA应用

指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和原生应用的特性。

对比 App

  • web应用更加易于发现——相比于安装应用,访问一个网站显然更加容易和迅速,并且你可以通过一个链接来分享web应用。

  • 原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行,并且相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

优势

可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的。

  • 减少应用安装后的加载时间, 多亏了 Service Workers来进行缓存, 以此来节省带宽和时间。

  • 当应用有可用的更新时,可以仅仅去更新发生改变的那部分内容。与之相反,对于一个原生应用而言,即便是最微小的改动也需要强制用户去再次下载整个应用。

  • 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上,应用可以全屏运行,等。

  • 凭借系统通知和推送消息与用户保持连接,对用户产生更多的吸引力,并且提高转换效率。

Service Worker 手册:(实例)

https://serviceworke.rs/

支持率

  • https://jakearchibald.github.io/isserviceworkerready/

  • https://caniuse.com/#search=serviceworker

在线生成 PWA

可以使用 PWABuilder 网站在线生成 PWA。

国内

国外

上一页NPM and Plugin Guide下一页Regexp

最后更新于3年前

这有帮助吗?

:第一个支持PWA的

:

:

:一个简单的APP

App Structure
简单实例
Offline_Service_workers
饿了么
微博
哔哩哔哩
豆瓣
飞猪
天气(baidu)
糯米电影·演出
腾讯新闻
人人FED
基于 Vue 的 PWA 解决方案
Wikipedia
Twitter
Google Contacts
Google Photos
Google Plus
The Weather Channel
Telegram
Forbes
The Guardian
FT
DuckDuckGo
Vice
Omni Calculator
ET