Hello, PWA

Hello World

先根据官网的 Hello World 敲一遍代码，弄明白里面每个文件都是干什么的，明白实现一个 PWA 应用基本上包括如下：

• 在 index.html 的头部添加如下信息

  <link rel="manifest" href="/manifest.json">
  <!-- CODELAB: Add iOS meta tags and icons --> <!--ios移动端支持不是很好，所以需要加下面几个头部-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Weather PWA">
  <link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">
  <!-- CODELAB: Add description here --> <!--为了seo-->
  <meta name="description" content="A sample weather app">
  <!-- CODELAB: Add meta theme-color --> <!--为了应用更规范-->
  <meta name="theme-color" content="#2F3BA2" />

• 在 index.html 里面注册 Service Worker

    // CODELAB: Register service worker.
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then((reg) => {
              console.log('Service worker registered.', reg);
            });
      });
    }
  </script>

• 在 index.html 里面添加 install 逻辑，用户提示用户安装应用以及捕捉用户安装行为

  window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);
  window.addEventListener('appinstalled', logAppInstalled);

PWA主要功能梳理

1. 借助 Service Worker 提供资源以及数据离线化功能，因为要理解 Service Worker 是做什么的，具体看：https://developers.google.com...，看完之后再详细看一下 Service Worker 的生命周期，因为代码逻辑中如果想很好的借助它，就需要弄清楚它的生命周期，它不能直接操作 DOM ，只能通过事件通知网页对 DOM 进行操作, 基本生命周期：

   1. install: 在里面可以缓存资源，包括静态资源和数据。
   2. activate: 在里面清楚一些旧的缓存资源。
   3. fetch: 可以先从缓存拿数据，等线上新数据回来之后再次渲染新数据。

2. 消息实时推送功能，需要了解基本实现，具体看：https://developers.google.com...，官网解释的很好了，主要涉及到如下过程：

   1. 浏览器 subscribe 到 Push Service, 这两者有公钥和私钥维护两者关联。
   2. Push Service 将用私钥加密的信息给我们服务端。
   3. 我们服务端将消息推给 Push Service, Push Service 验证其数据准确性之后，再把要推送的数据传给浏览器端。
3. 借助 Manifest 里面的一些基本配置，实现接近 app 的体验，其中包括安装显示的名称，图标等，既然是可安装到桌面的，那能否捕捉用户安装行为呢？

开始开发

了解了 PWA 的基本功能，就可以开发了，有有两种方式：

1. 在 gitch 上注册一个账号，用 github 等三方登陆即可，然后借助线上编辑器新建一个项目，相关知识点：

   • gitch 是一个应用的集合，可以在别人的应用基础上开发自己的应用，称为 remix 应用。
   • 自己可以在线编辑代码，也可以创建一个 team，大家一起在线合作编辑同一个工程。
   • 不用自己部署服务端机器环境，直接在线运行即可。

2. 在 vscode 里面安装 gitch 插件，然后用 cmd + shift + p, 输入 gitch: xxx 新建工程进行开发，也可以直接打开 gitch 线上的工程，前提是需要一个 gitch 账号，或者提供一个邮箱，可能遇到的问题：

   1. 在 vscode 里面安装 gitch 插件，提示安装失败，需要手动下载 vsix 文件，然后 code --install-extension xxx.vsix，可能依然不成功，这时候看错误信息，会提示不兼容现在 vscode 版本，升级即可。

收获

1. 可以使用业界对外公开的 api 进行数据使用，比如 Dark Sky, 注册一个账号，然后把里面的 api secret_key 放到 PWA 应用中，然后进行数据获取。
2. 有空可以从 gitch 看看别人开发的应用，找一些点子。
3. 可以利用 chrome devtools 里面的 Audit 使用 Lighthouse 为web质量进行检查。
4. Chrome Devtools 里面的 Application 可以看 Service Worker 信息以及各种缓存信息。
5. WorkBox是一个 Service Worker lib 的集合和工具，借助 service api, 使构建离线pwa更容易。
6. 比对了下 Service Worker 和 web worker 的区别，前者主要是拦截行为进行离线化处理，后者用户处理复杂计算，后台运行逻辑，不影响主线程，运行完之后通过 postMessage 告诉主线程任务完了。