改造网站支持 Progressive Web Apps (PWA),改善移动端体验。

主要分成一下几步:

  1. 开启全站 HTTPS
  2. Service Worker
  3. Web App Manifest

Service Worker

检测当前的浏览器是否支持 Service Worker

调试 Service Worker,可以在 Chrome 开发者选项 Application 看到 Service Worker.

创建 sw.js 并注册

  <script>
	  if ('serviceWorker' in navigator) {
		  window.addEventListener('load', function () {
			  navigator.serviceWorker.register('/sw.js');

			  //navigator.serviceWorker.ready always resolve
			  navigator.serviceWorker.ready.then(function (registration) {
				  console.log('Service worker successfully registered on scope', registration.scope);
			  });
		  });
	  }
  </script>

关于 sw.js 比较复杂, 可以参考文末 Google 的文档。

Manifest

manifest 属性

  • name —— 网页显示给用户的完整名称
  • short_name —— 当空间不足以显示全名时的网站缩写名称
  • description —— 关于网站的详细描述
  • start_url —— 网页的初始 相对 URL(比如 /)
  • scope —— 导航范围。比如,/app/ 的 scope 就限制 app 在这个文件夹里。
  • background-color —— 启动屏和浏览器的背景颜色
  • theme_color —— 网站的主题颜色,一般都与背景颜色相同,它可以影响网站的显示
  • orientation —— 首选的显示方向:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, 和 portrait-secondary。
  • display —— 首选的显示方式:fullscreen, standalone (看起来像是 native app),minimal-ui (有简化的浏览器控制选项) 和 browser (常规的浏览器 tab)
  • icons —— 定义了 src URL, sizes 和 type 的图片对象数组,用来定义 PWA 的 icon。

页面中添加 manifest.json 使之生效。

<link rel="manifest" href="/manifest.json">

这里 可以生成 manifest 和不同尺寸的 icon

Test

部署后可以测试一下

reference