PWA之 workbox 学习

zhangyucha0 发布于2019-08-26 13:55 / 2767人阅读

摘要：另一部分属于进程，它重新在后台起了一个进程，它和应用的主进程互不影响，可以同时执行。其中一般作为应用程序浏览器和网络如果可用之间的代理服务。他们还将允许访问推送通知和后台同步。然后开始在进程中通过事件，来监听请求，并对请求和响应进行缓存。

前言:
我们的应用可以分为两部分，一部分是属于主进程的(包括js(同步,异步)，以及dom渲染等等)，在一个时刻点，只能执行一个，要么先去渲染dom，完了再去执行js；要么执行完js，在去渲染dom，而不能同时执行js和dom渲染。另一部分属于worker进程，它重新在后台起了一个进程，它和应用的主进程互不影响，可以同时执行。

常见的worker有，web worker， service worker， shared worker等等。

其中service worker一般作为web应用程序、浏览器和网络（如果可用）之间的代理服务。他们旨在创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。用来构建PWA 应用

使用service-worker前，我们必须要先在主进程中注册它，然后才能在service-worker进程中编写逻辑。

主进程

//index.js
if ("serviceWorker" in navigator) {
    // Use the window load event to keep the page load performant
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("/service-worker.js").then(registration=>{
        console.log("register succces...")
      }, err=>{
        console.log("register error...",err)
      });
    });
  }

service-worker进程

//service-worker.js
console.log("Hello from service-worker.js");

service-worker的语法简介

在service-worker.js中，self/this 表示 ServiceWorkerGlobalScope，即全局的serviceworker工作环境，相当于在主进程中的window。在此文件中，js的其他api无法使用，如DOM，BOM操作等，但是大部分的js api可用，同时ES6也可以使用。

在service-worker中可以定义监听事件，然后在对应事件中进行逻辑处理。

具体api可查看 service worker MDN

service-worker进程的执行流程

首先在主进程中开始注册，调用register方法，进入sw进程，在sw进程中判断如果还没有安装service worker.js，则触发install事件。开始安装

一旦sw进程安装完成，会通知主进程register成功。

接着在sw进程触发到activate事件。

如果已经安装过service-worker.js文件，则在注册时会发现并跳过install事件，直接进入注册成功，然后触发activate事件。

然后开始在sw进程中通过fetch事件，来监听http请求，并对请求和响应进行缓存。

//在service worker中监听install
this.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open("v1").then(function(cache) {
      return cache.addAll([
        "/sw-test/",
        "/sw-test/index.html",
        "/sw-test/style.css",
        "/sw-test/app.js",
        "/sw-test/image-list.js",
        "/sw-test/star-wars-logo.jpg",
        "/sw-test/gallery/",
        "/sw-test/gallery/bountyHunters.jpg",
        "/sw-test/gallery/myLittleVader.jpg",
        "/sw-test/gallery/snowTroopers.jpg"
      ]);
    })
  );
});

除了 install之外，还有 activate，message，fetch，sync，push等事件。

打开chrome浏览器的application->service workers，会看到

可以看到status为 actived and is running，表明service-worker已经安装成功了。

在service-worker中通过监听事件，然后编写对应的逻辑并不是一件容易的事，尤其对于文件缓存，可能npm run build后，名称随时会变。

所以chrome官方推出了wokbox框架

wokbox 是用于向web应用程序添加离线支持的JavaScript库。

要使用wokbox，只需在service-worker.js文件中引入workbox-sw.js即可，然后会自动的在service-worker.js中创建workbox对象，

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

if (workbox) {
  console.log(`Yay! Workbox is loaded

GPU云服务器云服务器 workbox PWA 机器学习入门之深度学习入门之pytorch

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109806.html

Service worker (@nuxtjs/workbox) 采坑记

摘要：实际上是指的为简化开发而开源的第三方库。首先安装依赖然后再配置文件中启用就完成了使用采坑官网上线后发现，启用后不能播放视频了。把当成了失败请求，导致请求视频文件失败。 PWA（Progressive Web App）是前端的大趋势，它能极大的加快前端页面的加载速度，得到近乎原生 app 的展示效果（其实难说）。PWA 其实是多种前端技术的组合，其中最重要的一个技术就是 service ...

ISherry 2019-08-23 12:04 评论0 收藏0
PWA之Workbox缓存策略分析

摘要：最后用把缓存的路径凭证信息存在中。缓存策略现在来看看提供的缓存策略，主要有这几种。自定义缓存配置回到在缓存策略里提到的，讲讲和缓存策略的参数。作者：陈达孚香港中文大学研究生,《移动Web前端高效开发实战》作者之一，《前端开发者指南2017》译者之一，在中国前端开发者大会,中生代技术大会等技术会议发表过主题演讲, 专注于新技术的调研和使用. 本文为原创文章，转载请注明作者及出处 ...

lewif 2019-08-21 17:57 评论0 收藏0
hexo博客简单支持PWA

摘要：文章首次发表在博客支持了前言使用插件使博客支持功能，目前我所知道的有两种插件均可实现该功能前提全站支持目前本人使用的是腾讯云的免费证书网站配置已经有很多文章写了配置过程本篇文章不在赘述使用安装修改配置文件的配置文件采用语言想要文章首次发表在: 博客支持PWA了~ 前言使用hexo插件使博客支持pwa功能，目前我所知道的有两种插件均可实现该功能 hexo-pwa hexo-off...

nicercode 2019-08-23 11:46 评论0 收藏0
Service Workers （PWA 初体验）

摘要：是一个注册在指定源和路径下的事件驱动。可以提供有效有效的离线体验，拦截网络请求。出于安全原因，要求必须在下才能运行。返回一个对象，的结果是对象值对象组成的数组。当事件的处理程序执行完毕后，可以认为安装完成了。在前端越来越重的这个时代，页面加载速度成为了一个重要的指标。对于这个问题，业界也有一些解决方案。浏览器缓存、协议缓存、强缓存懒加载（首屏） CDN 多域名突破下载并发限制。...

twohappy 2019-08-02 15:23 评论0 收藏0