zoukankan      html  css  js  c++  java
  • PWA 基础学习

    1、PWA 是什么?

      PWA 是 Progressive Web App 的缩写,从字面翻译过来就是 渐进式 Web App。

      渐进式翻译过来就是慢慢的,不是一蹴而就的。这里的指的是 Wab App 更安全、性能更好,体验更完善。

      总结的说,PWA 就是应用了新的一些技术对 Web App 进行改进,使得它在安全、性能、体验三个方面有更好的提升,

      PWA 就是一个概念。用技术使 Web App 应用更好。

      特定:

      可靠 -- 在不稳定的网络环境中,也可以瞬间加载并展示

      体验 -- 加载速度快,可以先给展示页面

      粘性 -- 可以在桌面创建入口,并不需要去下载

          可以借助缓存,是体验更好

          可以给用户发送离线通知。

      新技术 :

      App Manifest -- 描述应用的相关信息,实现添加入口到桌面

      Service Worker -- 使得 javascript 可以开启一个独立的线程

      Notifications API -- 给用户提送信息展示在桌面

      Push APi  --  允许web应用接收服务推送的消息

      Background Sync --  后台同步,属于 service worker 的功能。网站关闭的时候,在后台执行。

    2、Service Worker 

      浏览器中 javascript 运行在一个线程上,同一时间只能做一件事情。

      Service Worker 可以脱离主线程,在一个独立的线程中工作。完成一些复杂的事情。

      特点:

      拥有一个独立的线程,可以和主线程交互

      一点被创建拥有存在,除非被终止

      需要的时候直接可以唤起,不需要的时候睡眠

      可以拦截代理请求和返回、缓存文件

      可以接收服务端推送的消息

      

      使用

     

      // 注册一个 serviceWorker
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('/sw.js', {scope: '/'})
          .then(function (registration) {
            // 注册成功
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          })
          .catch(function (err) {
            // 注册失败:(
            console.log('ServiceWorker registration failed: ', err);
          });
      });
    

      

      1、serviceWorker.register 方法注册一个 Service Worker 。

      参数 /sw.js :在 /sw.js  注册一个 Service Worker

      scope : 需要拦截操作的的作用域

  • 相关阅读:
    C/C++中变量的作用域和存储类型简介
    Java与JavaScript的区别你明白吗?
    js-2018-11-09 关于Array中的srot()方法和compare()方法
    js-2018-11-01 关于break和continue语句
    0427表格学习
    0426基础标签学习
    css3部分整理
    img图片占不满整个div
    基于google protobuf 的 socket udp 通信
    微信小程序echarts学习记录
  • 原文地址:https://www.cnblogs.com/jiebba/p/10131224.html
Copyright © 2011-2022 走看看