PWA 即刻上手

应用元数据

一个渐进式 Web 应用首先要声明一下自己的基本信息:

index.html

<head>
  <link rel="manifest" href="index.webmanifest" />
</head>

index.webmanifest

{
  "name": "应用全名(启动页)",
  "short_name": "应用短名(桌面图标)",
  "start_url": "https://example.dev/",
  "description": "应用简介",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "lang": "zh-CN",
  "dir": "ltr",
  "theme_color": "rgba(0,0,0,0.5)",
  "background_color": "transparent",
  "icons": [{ "src": "logo.png", "type": "image/png", "sizes": "144x144" }]
}

后台服务

一个 PWA 能真正安装到用户系统中,还需要一个 Service Worker。但它的工作原理对初学者直接手写有些困难,亲爹 Google 已经做好了开发框架 Workbox,还配了 Workbox CLI,几行命令就能生成一个基本的 ServiceWorker,简直不要太贴心:

npm install workbox-cli --global

cd your_project/

npm run build  # 先执行你项目的构建脚本,生成生产环境目录

workbox wizard

跟着向导执行完上述命令,会生成一个名为 workbox-config.js 的配置文件,但须稍加修改来适应“天朝国情”:

module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{jpg,png,jpeg,ico,html,css,js}'],
  swDest: 'dist/sw.js',
  // 禁用 Google Cloud CDN
  importWorkboxFrom: 'disabled',
  // 启用 第三方 CDN
  importScripts: ['https://cdn.jsdelivr.net/npm/workbox-sw']
};

然后就可以一键生成 ServiceWorker 了:

workbox generateSW

最后在 index.html 里引用一下即可:

<head>
  <link rel="manifest" href="index.webmanifest" />
  <script>
    if ('serviceWorker' in navigator)
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('sw.js');
      });
  </script>
</head>

工具链兼容性

虽然官方提供了 webpack 和 Rollup 的插件,但 0 配置、一键化Parcel 却还没有靠谱的相关插件。于是自己先踩了一遍坑,秘籍如下:

  1. 在源码目录新建一个上述的 sw.js,内容留空,只为 Parcel 这类面向资源的打包器不报错

  2. package.json 中的构建脚本修改如下:

{
  "scripts": {
    "build-sw": "rm -f dist/sw.js.map  &&  workbox generateSW",
    "build": "parcel build source/index.html --public-url .  &&  npm run build-sw"
  }
}

好了,马上重新部署你的 Web 应用,在手机 Chrome 上试试把它添加到桌面吧!


转载请注明: TechQuery PWA 即刻上手

本篇
PWA 即刻上手 PWA 即刻上手
应用元数据一个渐进式 Web 应用首先要声明一下自己的基本信息: index.html <head> <link rel="manifest" href="index.webmanifest" /> </head> i
2019-10-31
下一篇
Web 组件标准实践 Web 组件标准实践
水歌 —— WebCell 引擎作者 水歌其人 Web/JavaScript 全栈开发者 WebCell 等多个开源项目的作者 jQuery、Babel 等多个国际开源项目的贡献者 freeCodeCamp 成都社区负责人 开源社官网
2019-08-14