uniapp 使用 pwa

PWA

对于PWA的定义有很多，但实际上最通俗的理解就是可以离线发送通知，像app一样将h5网页在桌面上以图标的形式展示，并且可以在离线的时候做一些事情，通过 HTTPS 提供，以防止窥探和确保内容不被篡改的一个web App。

Service Worker

提到pwa就不得不提到service worker ,因为在使用pwa的前提是要注册 一个线程。
service worker 是Service Worker 是一个 基于HTML5 API ， 一个独立的执行线程，单独的作用域范围，单独的运行环境，必须在 HTTPS 环境下才能工作。当然在本地调试时，使用localhost则不受HTTPS限制。

使用

作者在uniapp中对pwa的使用其实主要是将h5页面快捷到桌面上。
但是在注册的这一环节就出了很大的问题，所以记录下来以免后续继续踩坑。
在使用的时候，发现了一个别人封装好的PWA builder，使用非常方便，链接：pwa builder,在使用的时候需要引入，这是为了方便通过script引入，这里很简单没有问题。
然后建立manifest.json，引入，这里报错：

Manifest: Line: 1, column: 1, Syntax error.

在注册service worker时

if ('serviceWorker' in navigator) {
				console.log('注册线程')
				  navigator.serviceWorker.register('service-worker.js')
				   .then(function (registration) {
				          console.log('ServiceWorker registration successful with scope: ', registration.scope)
				        })
				        .catch(function (err) {
				          console.log('ServiceWorker registration failed: ', err)
				        })
			}

也会报错：

The script has an unsupported MIME type ('text/html')

这里后面偶然发现，需要将上述的js 和 json文件放入到status，而不是放入网上随处可以查询到的public或者根目录中。
放入status中后，还需要最后一步：在status设置一个进入html文件，这里我叫做index.html。还需注意，json文件中start_url，需要设置进入文件入口，如果本地就用本地的localhaost,要到线上就要换成线上的地址，而且这个地址必须是https，否则无效。

兼容性

兼容性其实还算不错，但目前可知的qq浏览器不兼容，还有低版本浏览器（本身就不支持将h5页面生成到桌面的，浏览器里可以看到）不支持，还有苹果浏览器，它支持pwa但是不支持弹窗出现，需要在浏览器里手动添加，但是图标和名字可以人为控制，这一点的原因似乎是因为pwa会降低apply store的存在性和使用性，所以苹果不支持。剩余的高版本浏览器比如小米，百度，ie，谷歌，移动谷歌等，均可以弹出弹框。
that’s all。