PWA-缓存

基础

PWA强大的离线能力就在于Service Worker拦截请求及提供缓存的能力，Service Worker的缓存能力比较强大，它能够赋予你更加精确控制缓存的能力。示例页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>缓存</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

    <h1></h1>

    <img src="1.jpg" alt="1" />

    <script>

        navigator

            .serviceWorker

            .register('sw.js')

            .then(function (reg) {

                console.log(reg.scope)

            })

            .catch(function (err) {

                console.log(err)

            })

    </script>

</body>

</html>

安装预缓存

在SW安装阶段，可以获取资源并为下次访问准备好缓存，示例

var cacheName = 'test'

self.addEventListener('install', event => {

    event.waitUntil(

        caches.open(cacheName)

            .then(cache => cache.addAll(['1.jpg']))

    )

})

self.addEventListener('fetch', event => {

    event.respondWith(

        caches.match(event.request)

            .then(resp => {

                if (resp) {

                    return resp;

                }

                return fetch(event.request)

            })

    )

})

拦截并缓存

安装预缓存适用于知道缓存的内容的情况，当预先不知道到缓存的内容的情况下可以拦截请求并进行缓存，方便下次使用

self.addEventListener('fetch', event => {

    event.respondWith(

        caches.match(event.request)

            .then(resp => {

                if (resp) {

                    return resp;

                }

                var requestToCache = event.request.clone();

                return fetch(requestToCache).then(

                    (response) => {

                        if (!response || response.status != 200) {

                            return response;

                        }

                        var responseToCache = response.clone();

                        caches.open(cacheName).then(cache => {

                            cache.put(requestToCache, requestToCache)

                        })

                        return response;

                    }

                )

            })

    )

})

其他

  1. 缓存版本控制(hash)
  2. workbox

PWA-缓存的更多相关文章

  1. ServiceWorker pwa缓存

    index.js if ( navigator.serviceWorker ) { console.log("cache index") window.addEventListen ...

  2. pwa 总结

    概述 前几天了解并按照官方文档,成功实现了一个小型的 pwa demo,现在把总结记录下来,供以后开发时参考,相信对其他人也有用. pwa pwa 包括很多内容,我这里只介绍一部分,因为比如 Push ...

  3. 浏览器缓存 All In One

    浏览器缓存 All In One HTTP 缓存 强缓存 expired Cache-Control max-age s-maxage 协商缓存 E-tag last-modified 本地缓存 co ...

  4. 让老板虎躯一震的前端技术，KPI杀手

    本文由云+社区发表 作者:思衍Jax 天下武功,唯 (wei) 快(fu) 不(bu) 破(po). 随着近几年的前端技术的高速发展,越来越多的团队使用 React.Vue 等 SPA 框架作为其主要 ...

  5. 极致 Web 性能 —— SPA 性能指南

    前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...

  6. 极致Web性能 —— SPA性能指南

    前言 前端框架时代,为开发体验.效率与页面性能带来,非常大的革命.大家纷纷拿起一系列打包工具(webpack/parcel etc.),配合一系列加载器快速搭建起一个 SPA 页面. SPA 应用带来 ...

  7. 缓存&PWA实践

    缓存&PWA 实践 一.背景 从上一篇<前端动画实现与原理分析>,我们从 Performance 进行动画的性能分析,并根据 Performance 分析来优化动画.但,前端不仅仅 ...

  8. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  9. 轻松把你的项目升级到PWA

    什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...

  10. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

随机推荐

  1. 《C++ Primer Plus》读书笔记之二—复合类型

    二.第四章 复合类型  1.C-风格字符串:C-风格字符串具有一种特殊的性质:以空字符结尾,空字符被写成\0,其ASC||编码为0,用来标记字符串的结尾.例如: char dog[5]={'b','e ...

  2. SAP CRM One Order跟踪和日志工具CRMD_TRACE_SET

    事务码CRMD_TRACE_SET激活跟踪模式: 在跟踪模式下运行One Order场景.运行完毕后,使用事务码CRMD_TRACE_EVAL: 双击参数,就能看到参数明细: 点Callstack也能 ...

  3. D3——绘制SVG图形-直方图

    1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...

  4. Webpack笔记（一）——从这里入门Webpack

    准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...

  5. Redis客户端 Spring Data Redis（未完）

    官网:http://projects.spring.io/spring-data-redis/ 1.0  参考之前的一片文章:Gradle入门实战(Windows版) 构建java applicati ...

  6. Monad新解-FRP对比——ReactiveCocoa、RxSwift、Bacon以及背后的Functional

    ReactiveX Rx的Observable的本质就是一个Event Monad,即上下文(就是图文教程中包裹的盒子)为Event的一个Monad,这里的Event定义,可以对应语言的struct或 ...

  7. PHP-----文件-----目录操作

    目录操作 [1]创建目录(文件夹) mkdir("路径"); 例子: mkdir("./test"); 显示的结果:   [2]删除目录(文件夹)只能删除空的文 ...

  8. mybatis实现最简单的增删改查

    1.数据库设计 2.项目结构(针对User不用管Blogger) User.java package com.yunqing.mybatis.bean; public class User { pri ...

  9. UDP and TCP

    UDP unreliable, just add de-multiplexing and error checking on data than IP. Best effort datagram(数据 ...

  10. OC中对象的description方法

    周所周知,我们在做项目时, 可以在类的.m文件中重写该类的对象的描述description方法: 示例: -(NSString *)description{    NSString *str = [N ...