文章目录

关键技术
简介
- pwa
- service works (简称sw)
- 看效果
实现方法：
- 创建目录结构如下
- 重点介绍manifest.json内容
- 其他代码

关键技术

- 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

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

html打开浏览器协议,通过私有协议在Chrome浏览器网页中打开本地程序
最近甲方有这样一个需求:两套系统,一套基于Chrome开发,一套基于IE开发,想要在Chrome中增加一个链接,然后进入IE开发的系统.也就是说,想要在Chrome中创建链接跳转到IE浏览器指定页面, ...
远程桌面拷贝数据到远程计算机,远程桌面如何复制本地文件远程桌面拷贝电脑上的文件方法...
我们知道一般我们连接远程桌面,比如服务器等等上传电脑上的数据,都会用到FTP上传工具,那么有没什么方法实现远程桌面如何复制本地电脑上的文件呢?下面小编与大家分享下,实现方法,其实很简单,只需要简单设置 ...
php制作本地程序,PHP安装程序制作
header("Content-type:text/html;charset=gb2312"); //看你用的是什么编码,要保持一致. $files="config.ph ...
【某网页在手机上可以打开，但用电脑上所有浏览器都打不开】的解决办法
前言今天下午老师通知大家去学校系统修改个人信息,然而我却怎么也登不上学校的门户了:( 中间我试过把浏览器从火狐换到 IE 再到谷歌,都不能登陆学校门户,甚至我还把浏览器都更新到最新版了emmm- 自 ...
html中如何让网页不失真,制作好的网页在不同分辨率的电脑上浏览时大小不同，我该怎么办？怎么设置？...
制作好的网页在不同分辨率的电脑上浏览时大小不同,我该怎么办?怎么设置?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! ...
如何用python创建一个下载网站-用Python下载一个网页保存为本地的HTML文件实例...
我们可以用Python来将一个网页保存为本地的HTML文件,这需要用到urllib库. 比如我们要下载山东大学新闻网的一个页面,该网页如下: 实现代码如下: import urllib.request ...
怎么在python下载网站内容-用Python下载一个网页保存为本地的HTML文件实例
我们可以用Python来将一个网页保存为本地的HTML文件,这需要用到urllib库. 比如我们要下载山东大学新闻网的一个页面,该网页如下: 实现代码如下: import urllib.request ...
在网页中调用本地的应用程序
在网页中调用本地的应用程序例子: <script> function exec (command) { window.oldOnError = window.onerror; ...
python下载网页上的文件_用Python下载一个网页保存为本地的HTML文件实例
Python打开网页并另存为静态html怎么实现如何用python把网页上的文本内容保存下来那一世的长情,谱一首长相思,冷了多少凄凉,漫了多少青丝,化作多少烟雨,吹散多少世间情!徒悲,奈何,这一世, ...

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

文章目录

关键技术

简介

pwa

service works (简称sw)

看效果

实现方法：

创建目录结构如下

重点介绍manifest.json内容

其他代码

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

最新文章

热门文章

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

文章目录

关键技术

简介

pwa

service works (简称sw)

看效果

实现方法：

创建目录结构如下

重点介绍manifest.json内容

其他代码

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

最新文章

热门文章

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

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