PWA 改造已有项目

Wesley13
• 阅读 537

原文链接: PWA 改造已有项目

在已有项目中使用pwa

PWA 改造已有项目

只需要在index.html 中注册 引入注册脚本和manifest.json

PWA 改造已有项目

manifest.json

{
  "name": "fast-style",
  "short_name": "fast-style",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

 registerServiceWorker.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    console.log("registerServiceWorker.js");
    navigator.serviceWorker.register("./service-worker.js").then(
      function(registration) {
        console.log(
          "ServiceWorker registration successful with scope: ",
          registration.scope
        );
      },
      function(err) {
        console.log("ServiceWorker registration failed: ", err);
      }
    );
  });
}

service-worker.js

需要对url做校验,

github 有时会自动请求这样的东西...

// chrome-extension://jdbnofccmhefkmjbkkdkfiicjkgofkdh/img/icon-bookmark.svg

console.log("service-worker.js");

self.addEventListener("install", function (event) {
  console.log("install");
});
const CACHE_NAME = "cache-v1"
let immutableData = new Set(
  [
    "/",
    "/css",
    "/js",
    "/img",
    "/style_image",
    "/style_model",
  ]
)

let mutableData = new Set(
  []
)
const HOST = "github"
self.addEventListener("install", function (event) {
  // Perform install steps
  console.log("install");
  self.skipWaiting()
});


self.addEventListener("fetch", event => {
  // console.log('event', event)
  let url = new URL(event.request.url)
  
  // 缓存策略过滤
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
    console.log("url cached", url, event)
    return
  }
  
  // 本地域名过滤,只缓存自己域名下的文件
  if (!url.host.includes(HOST) ||
    !url.href ||
    !url.href.startsWith("http") ||
    !url.href.startsWith("https")) {
    console.log("url", url, event)
    event.respondWith(fetch(event.request))
    return
  }
  
  // url 过滤, 确保herf存在,并且是域名下
  // 避免加载chrome的拓展出现的问题
  if (url.host.includes(HOST))
    event.respondWith(
      caches.open(CACHE_NAME).then(cache =>
        cache.match(event.request).then(cacheResponse => {
          let fetchPromise = fetch(event.request).then(networkResponse => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
          return cacheResponse || fetchPromise;
        })
      )
    );
});

sw.js 设置缓存策略和更新策略的另外实现

console.log("service-worker.js");

// 一个网站可以设置多个版本的缓存
let CACHE_NAME = "my-site-cache-v1";
// let urlsToCache = ["/", "/styles/main.css", "/script/main.js"];
// let urlsToCache = ["/index.html","/js/*", "/css/*", "/img/*", "/style_image/*", "/style_model/*"];
let urlsToCache = ["/", "/js/", "/css/", "/img/", "/style_image/", "/style_model/"];

// let urlsToCache =  ['/style_image/candy.jpg','/js/']
self.addEventListener("install", function (event) {

  // Perform install steps
  event.waitUntil(
    // open 会打开缓存并返回,如果没有就创建
    caches.open(CACHE_NAME).then(function (cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});
// 浏览器缓存问题
// 如果文件设置缓存为一个月,即使在sw中添加到cache中
// 当重新使用fetch获取最新的文件时,依然会是旧的版本
self.addEventListener("fetch", function (event) {
  // console.log('fetch ', event, event.request.url)
  event.respondWith(
    // match在缓存中寻找资源,无论是否找到都会返回
    // 不会被reject,所以需要自己判断是否找到
    // 找到后就返回缓存,没有找到就重新下载

    // 忽略查询参数 /a?s=1和/a?v=2 是一样的
    // 默认两个url是不一样的
    // caches.match(event.request,{ignoreSearch:true})

    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }

      // 没有缓存则重新请求,如果请求失败,返回失败消息
      return fetch(event.request).then(
        response => response
      ).catch(
        // 如果请求的是网页, 并且没有找到, 返回失败消息
        () => event.request.headers.get('accept').includes('text/html') || caches.match('/index-offline.html')
      )
      // return fetch(event.request);
    })
  );
});

self.addEventListener("activate", function (event) {
  console.log("activate", event);
  caches.keys().then(console.log);
  event.waitUntil(
    caches.keys().then(cacheNames =>
      Promise.all(
        cacheNames.map(cacheName => {
          // 删除旧的缓存,避免删除新的缓存
          if (
            CACHE_NAME !== cacheName &&
            cacheName.startsWith("my-cache-old-v1")
          )
            return caches.delete(cacheName);
        })
      )
    )
  );
});
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这