pwa 让你的网页可以像本地程序一样安装到电脑上，Youtube网站使用的也是当前方法（chrome版本）

iml6yu

已于 2022-11-28 13:51:05 修改

阅读量2.5k

点赞数 2

分类专栏： html5 文章标签： chrome 前端 javascript

于 2021-11-13 20:25:27 首次发布

本文链接：https://blog.csdn.net/iml6yu/article/details/121309146

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了渐进式Web应用（PWA）和ServiceWorker的关键概念，展示了如何使用它们创建离线可用的Web应用。通过创建特定的目录结构、编写manifest.json和sw.js文件，实现离线缓存与图标桌面化。提供了测试网址和GitHub源码下载，详细解释了manifest.json的内容，并给出了安装和运行效果。

摘要由CSDN通过智能技术生成

关键技术

- pwa
- service works

简介

pwa

首先说明我是通过youtube发现的这个东西，上网一搜，居然是14 15年就出现的技术了。

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。这组文档和指南告诉您有关 PWA 的所有信息。

service works (简称sw)

Service Worker 是浏览器和网络之间的虚拟代理。它们终于解决了前端开发人员多年来一直在努力解决的一些问题，其中最值得关注的是，解决了如何正确缓存网站资源并使其在离线时可用的问题。

Service Worker 运行在一个与页面 JavaScript 主线程独立的线程上，并且无权访问 DOM 结构。这引入了一种与传统 Web 编程不同的方式：它的 API 是非阻塞的，并且可以在不同的上下文之间发送和接收信息。您可分配给 Service Worker 一些任务，并通过基于 Promise 的方法在任务完成时收到结果。

它不仅仅提供离线功能，还可以做包括处理通知、在单独的线程上执行繁重的计算等事务。Service workers 非常强大，因为他们可以控制网络请求、修改网络请求、返回缓存的自定义响应，或者合成响应。

看效果

当打开这个网址https://www.190otc.com/pwa/index.html 的时候，chrome浏览器会有一个安装的图标，点击后，可以进行安装。
可以通过chrome://apps查看已经安装的apps，并且进行卸载。
这个网址是我做测试使用的，可能有一天打不开了，可以去我的github上下载源码，放到任何一个支持https协议的网站上部署一下。重点，一定要支持https协议。
在这里插入图片描述

安装后的效果
桌面图标效果：
在这里插入图片描述

启动后的效果
在这里插入图片描述

实现方法：

方法1：你是一个懒惰的人，不想看代码，只想先看看实现效果，那就去github上下载源码，直接发布到支持https的网站上就可以了。
方法二：看我下面的内容一点点介绍吧。

创建目录结构如下

我们先创建一个关于 PWA 的项目文件夹，
进入文件夹下我们准备一张 256x256的图片一张，作为我们的应用程序图标。

创建一个 index.html 文件
创建一个 main.css 文件
创建一个 manifest.json 文件
创建一个 sw.js 文件

在这里插入图片描述

重点介绍manifest.json内容

{
  "short_name": "190桌面系统",
  "name": "190桌面系统",
  "description": "这是一个测试网页 ©iml6yu", 
  "icons": [
    {
      "src": "logo.png",
      "type": "image/png",
      "sizes": "256x256"
    } 
  ],
  "start_url": "index.html",
  "background_color": "#3f51b5",
  "display": "standalone", 
  "theme_color": "#3f51b5" 
}

其他代码

存储在https://github.com/iml6yu/pwa_demo上，支持下载。

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Offline_Service_workers
https://blog.csdn.net/lecepin/article/details/64906620?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163680249516780262574797%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163680249516780262574797&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-3-64906620.pc_search_result_control_group&utm_term=pwa&spm=1018.2226.3001.4187
https://blog.csdn.net/qq_32447301/article/details/82907632?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163680249516780262574797%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163680249516780262574797&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-82907632.pc_search_result_control_group&utm_term=pwa&spm=1018.2226.3001.4187