JS PWA相关技术

JavaScript09

JS PWA相关技术,第1张

PWA 全称是渐进式 web 应用,它是用一系列前端技术来实现的,目标是提供类似原生APP一样的体验。主要解决的痛点是:

以下介绍 PWA 相关技术

PWA中最重要的一项技术,特点是:

2、主 js =>sw.js

caches 缓存库一般以request 为key , response为value

在项目根目录下准备一个 manifest.json 文件,可以实现用户首次访问网页时提示在桌面创建网页入口icon,以后直接通过桌面的icon就可以直接访问网页了。

注意:只有至少已经访问网站两次、访问至少间隔五分钟时才可以将网络应用添加到主屏幕上。

然后在 html 文件里引入该文件

sw.js

Progressive Web App, 即渐进式WEB应用,简称PWA。

一个网页添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能,就可以实现PWA应用封装。

作用

最主要的特点:

2.index.js添加beforeinstallprompt处理

通常 sw.js 文件是处于项目的根目录,并且需要保证能直接通过 https: //yourhost/sw.js 这种形式直接被访问到才行。

注:注意cache文件路径,是sw.js的相对路径