zoukankan      html  css  js  c++  java
  • PWA小记

    前言

    • 中国有不一样的MobileFirst战略,重原生应用,轻移动网页;
    • 移动网页的弱势:页面设计优化有限,用户体验受网络环境影响,网页开启不方便;
    • web优势是产品分发
    • app优势是产品使用和交互

    一. PWA带来的特性

    • 能够显著提高应用加载速度,快速响应,并且有平滑的动画响应用户的操作
    • 甚至让 web 应用可以在离线环境使用 (Service Worker & Cache API),即使在不稳定的网络环境下,也能瞬间加载并展现
    • web 应用能够像原生应用一样被添加到主屏、全屏执行 (Web App Manifest),具有沉浸式的用户体验
    • 进一步提高 web 应用与操作系统集成能力,让 web 应用能在未被激活时发起推送通知 (Push API 与 Notification API) 

    二. 相关技术

    • Service Worker
    • App Manifest(将APP安装至主屏幕)
    • Push API(服务端消息推送,ios目前不支持)
    • Notifications API(允许App向用户显示系统通知,目前201808移动端不支持)
    • Background Sync(延迟发动用户行为,直至网络稳定)
    • IndexedDB(本地nosql数据库)

    三. Service Worker生命周期(下图来自https://bitsofco.de/the-service-worker-lifecycle/

    • install 事件中一般会将 cacheList(注册成功后要立即缓存的资源列表) 中要缓存的内容通过 addAll 方法,请求一遍放入 caches 中
    • active 事件中通常做一些过期资源释放的工作,匹配到就从 caches 中删除
    • fetch事件中编写缓存策略

    四. 注销所有Service Worker,可以用getRegistrations

    let sw = navigator.serviceWorker;
    sw.getRegistrations ? sw.getRegistrations().then(function(sws) {
      sws.forEach(function(s) {
        s.unregister();
      });
    }) : sw.getRegistration && sw.getRegistration().then(function(s) {
      s && s.unregister();
    });

    五. 一些关于Service Worker的特点

    • 要求https或本地localhost;
    • 运行在它自己的全局脚本上下文中(self);不绑定到具体的网页,无法访问dom等对象;
    • 一旦被 install,就永远存在,除非被手动 unregister;
    • 异步实现基于 Promise和fetch;
    • Service Worker 的缓存机制是依赖 Cache API实现的;
    • 注销了Service Worker,cache还是要手动delete的;
    • event.waitUntil() 传入一个 Promise 为参数,等到该 Promise 为 resolve 状态为止;
    • self.skipWaiting() 执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态;
    • self.clients.claim() 在 activate 事件回调中执行该方法表示取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面,之后会被停止;
    • 为保证首屏渲染性能,可以把Service Worker放在页面onload回调函数里注册;

    六. Manifest

    • 支持 HTTPS 访问
    • 注册 Service Worker
    • 部署 manifest.json (<link rel='manifest' href='./manifest.json'>)

    七. Workbox

          GoogleChrome 团队推出的一套 Web App 静态资源和请求结果的本地存储的解决方案,该解决方案包含一些 Js 库和构建工具

  • 相关阅读:
    CSS中position小解
    position
    mac默认安装postgresql, 如何让postgresql可以远程访问
    The data directory was initialized by PostgreSQL version 9.6, which is not compatible with this version 10.0.
    active admin gem error
    psql 无法添加超级用户
    ubuntu 15.04 安装Balsamiq Mockups 3
    Rails html 写public里图片的路径
    rails c 历史命令
    undefined local variable or method `per' for []:ActiveRecord::Relation
  • 原文地址:https://www.cnblogs.com/colima/p/9304491.html
Copyright © 2011-2022 走看看