PWA 缓存

已于 2023-01-12 22:24:22 修改
阅读量870 收藏 5
点赞数
分类专栏： 代码优化之道 计算机与网络 文章标签： 前端缓存 PWA
于 2022-07-30 20:50:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mChales_Liu/article/details/126076869
版权

目录

一、PWA

1、认识 PWA

【原生应用、Web App 与 PWA 的对比】
原生应用（Native app）：

  • 好处：
    - 更高的安全性。
    - 更强的计算能力。
    - 更好的 UX（用户体验）。
    - 更少的电池消耗。
  • 不足：
    - 开发成本高（iOS 和 安卓）、速度慢。
    - 版本更新需要将新版本上传到不同的应用商店；
    - 必须去下载才能使用 app。

    网页应用（Web App）:
  • 好处：
    - 开发成本低、速度快。
    - 版本更新时上传最新的资源到服务器即可。
    - 应用的加载速度更快。
  • 不足：
    - 缺少离线使用能力。在离线或者在弱网环境下基本上是无法使用的。
    - 缺少了消息推送的能力。
    - 桌面入口不够便捷，想要进入一个页面每次都需要通过浏览器来打开。

    渐进式网页应用（PWA）：针对以上 Web App 的缺陷，PWA 进行了查缺补漏。
  • 可以添加至主屏幕。
  • 实现启动动画以及隐藏地址栏。
  • 实现离线缓存功能。即使用户手机没有网络，依然可以使用一些离线功能。
  • 实现消息推送。
  • 实现秒开优化。
  • 兼容性良好：现在 IE 退出了，iOS 也兼容 PWA 了。
  • 其余的优点继承 Web App。

    这些特性将使得 PWA 应用非常接近原生 App，在加载速度方便甚至超越了原生 App。

PWA（Progressive Web App）是渐进式 web app。它实现了网页应用的安装、离线缓存 和 消息推送等功能。

PWA 的功能：

  • 通过引入 Manifest 将 web 应用 添加至主屏幕。
  • 通过引入 Service Worker 实现了 离线缓存 和 消息推送。

2、用 Manifest 将 web 应用添加至主屏幕

如果需要赋予该 web app 添加至主屏幕（能够作为独立应用独立安装）的能力，则需要 2 步：

  • 在 index.html 中注入 manifest。
  • 实现 manifest.json 文件。

在 index.html 中注入 manifest：

<head>
  <link rel="manifest" href="/manifest.json" />
</head>

实现 manifest.json 文件：

{
  // 复制后需要把注释删除掉
  "name": "My PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示，如果没有设置，则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标，是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}

Manifest参考文档

3、Service Worker

（1）、什么是 Service worker

Service Worker 是一个在页面和网络之间的拦截器。是基于 HTML5 API 实现的。也是 PWA 的核心。

Service Worker 能够 拦截请求 并 缓存资源，从而完全控制你的网站。

Service Worker 的结构如下图：
在这里插入图片描述
Service Worker 的实现原理：

  • Service Worker 的是基于 Web Worker 的功能来实现的。不同之处在于，Service Worker 具有存储功能，并且 Service Worker 是与浏览器的生命周期相关联的而非某个页面。

【拓展】Web Worker
Web Worker 让 JavaScript 能够运行在页面主线程之外，不过由于 Web Worker 中是没有当前页面的 DOM 环境的，所以在 Web Worker 中只能执行一些和 DOM 无关的 JavaScript 脚本，并通过 postMessage 方法将执行的结果返回给主线程。所以说在 Chrome 中， Web Worker 其实就是在渲染进程中开启的一个新线程，它的生命周期是和页面关联的。

Service Worker 的特点：

  • 一个独立的执行线程，单独的运行环境——会在浏览器的渲染进程中，开启一个新的事件驱动型服务线程，运行于浏览器后台，与整个浏览器的生命周期绑定在一起。
  • 单独的作用域范围，能够为作用域范围内的页面请求提供服务。
  • 处于安全性考虑，必须在 HTTPS 环境下才能工作。在本地调试时，使用 localhost 则不受 HTTPS 限制——service worker 的权限太大，能拦截所有页面的请求，若对 HTTP 的请求做拦截处理，很容易受到网络攻击。
  • 由于是独立线程，Service Worker 不能操作页面 DOM。但可以通过事件机制来将执行的结果返回给浏览器主线程，例如使用：postMessage 方法。
  • 一旦被 install 就永远存在，除非被手动 unregister。即使Chrome（浏览器）关闭也会在后台运行。利用这个特性可以实现离线消息推送功能。
  • 一旦请求被 Service Worker 拦截接管，意味着任何请求都由你来控制，一定要做好容错机制，保证页面的正常运行。

【拓展】目前 Service Worker 的各大浏览器的兼容情况：请戳这里。

（2）、Service Worker 缓存

service worker 技术实现离线缓存，可以将一些不经常改变的静态文件放到缓存中，提升用户体验。

Service Worker 缓存的实现步骤：

  • 在 index.html 文件中启用 ServiceWorker。
  • 编写 service-worker.js 的缓存脚本。

index.html 中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Caching World!</title>
  </head>
  <body>
    <!-- Image -->
    <img src="/images/hello.png" />                 
    <!-- JavaScript -->
    <script async src="/js/script.js"></script>     
    <script>
      // 注册 service worker
      if ('serviceWorker' in navigator) {           
        navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) {
          // 注册成功
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function (err) {                   
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>

上述代码中，Service Worker 的注册路径决定了其 scope 默认作用页面的范围：

  • 如果 service-worker.js 是在 /sw/ 页面路径下，这使得该 Service Worker 默认只会收到 页面 /sw/ 路径下的 fetch 事件。
  • 如果存放在网站的根路径下，则将会收到该网站的所有 fetch 事件。
  • 如果希望改变它的作用域，可在第二个参数设置 scope 范围。示例中将其改为了根目录，即对整个站点生效。

service-worker.js 中：

var cacheName = 'helloWorld';     // 缓存的名称  
// install 事件，它发生在浏览器安装并注册 Service Worker 时        
self.addEventListener('install', event => { 
/* event.waitUtil 用于在安装成功之前执行一些预装逻辑
 但是建议只做一些轻量级和非常重要资源的缓存，减少安装失败的概率
 安装成功后 ServiceWorker 状态会从 installing 变为 installed */
  event.waitUntil(
    caches.open(cacheName)                  
    .then(cache => cache.addAll([    // 如果所有的文件都成功缓存了，便会安装完成。如果任何文件下载失败了，那么安装过程也会随之失败。        
      '/js/script.js',
      '/images/hello.png'
    ]))
  );
});
  
/**
为 fetch 事件添加一个事件监听器。接下来，使用 caches.match() 函数来检查传入的请求 URL 是否匹配当前缓存中存在的任何内容。如果存在的话，返回缓存的资源。
如果资源并不存在于缓存当中，通过网络来获取资源，并将获取到的资源添加到缓存中。
*/
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)                  
    .then(function (response) {
      if (response) {                            
        return response;                         
      }
      var requestToCache = event.request.clone();  //          
      return fetch(requestToCache).then(                   
        function (response) {
          if (!response || response.status !== 200) {      
            return response;
          }
          var responseToCache = response.clone();          
          caches.open(cacheName)                           
            .then(function (cache) {
              cache.put(requestToCache, responseToCache);  
            });
          return response;             
    })
  );
});

上述代码中，为什么要用 request.clone() 和 response.clone() 呢？

因为 request 和 response 是一个流，它只能消耗一次。我们已经通过缓存消耗了一次，然后发起 HTTP 请求还要再消耗一次，所以我们需要在此时克隆请求。

（3）、Service Worker 实现消息推送

service worker 一旦被 install 就永远存在，除非被手动 unregister。即使Chrome（浏览器）关闭也会在后台运行。利用这个特性可以实现离线消息推送功能。

Service Worker 实现消息推送的步骤：

  • 提示用户并获得他们的订阅详细信息。
  • 将这些详细信息保存在服务器上。
  • 在需要时发送任何消息。

【拓展】不同浏览器需要用不同的推送消息服务器。以 Chrome 上使用 Google Cloud Messaging 作为推送服务为例，第一步是注册 applicationServerKey(通过 GCM 注册获取)，并在页面上进行订阅或发起订阅。每一个会话会有一个独立的端点（endpoint），订阅对象的属性(PushSubscription.endpoint) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 Service Worker （通过 GCM 与浏览器客户端沟通）。

具体实现如下：

①、index.html 文件中：实现提示用户并获得他们的订阅详细信息，并将这些详细信息保存在服务器上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
    <link rel="manifest" href="/manifest.json">                                      
  </head>
  <body>
    <script>
      var endpoint;
      var key;
      var authSecret;
      var vapidPublicKey = 'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY';
      // 方法很复杂，但是可以不用具体看，知识用来转化vapidPublicKey用
      function urlBase64ToUint8Array(base64String) {                                  
        const padding = '='.repeat((4 - base64String.length % 4) % 4);
        const base64 = (base64String + padding)
          .replace(/\-/g, '+')
          .replace(/_/g, '/');
        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);
        for (let i = 0; i < rawData.length; ++i) {
          outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
      }
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
          return registration.pushManager.getSubscription()                            
            .then(function (subscription) {
              if (subscription) {                                                      
                return;
              }
              return registration.pushManager.subscribe({                              
                  userVisibleOnly: true,
                  applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                })
                .then(function (subscription) {
                  var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
                  key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
                  var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
                  authSecret = rawAuthSecret ?
                    btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
                  endpoint = subscription.endpoint;
                  return fetch('./register', {                                         
                    method: 'post',
                    headers: new Headers({
                      'content-type': 'application/json'
                    }),
                    body: JSON.stringify({
                      endpoint: subscription.endpoint,
                      key: key,
                      authSecret: authSecret,
                    }),
                  });
                });
            });
        }).catch(function (err) {
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>

②、app.js 文件中：实现服务器发送消息给 service worker。

const webpush = require('web-push');                 
const express = require('express');
var bodyParser = require('body-parser');
const app = express();
webpush.setVapidDetails(                             
  'mailto:contact@163.com',
  'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
  'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
);
app.post('/register', function (req, res) {           
  var endpoint = req.body.endpoint;
  saveRegistrationDetails(endpoint, key, authSecret); 
  const pushSubscription = {                          
    endpoint: req.body.endpoint,
    keys: {
      auth: req.body.authSecret,
      p256dh: req.body.key
    }
  };
  var body = 'Thank you for registering';
  var iconUrl = 'https://example.com/images/homescreen.png';
  // 发送 Web 推送消息
  webpush.sendNotification(pushSubscription,          
      JSON.stringify({
        msg: body,
        url: 'http://localhost:3111/',
        icon: iconUrl
      }))
    .then(result => res.sendStatus(200))
    .catch(err => {
      console.log(err);
    });
});
app.listen(3000, function () {
  console.log('Web push app listening on port 3111!')
});
// service worker监听push事件，将通知详情推送给用户
// service-worker.js
self.addEventListener('push', function (event) {
 // 检查服务端是否发来了任何有效载荷数据
  var payload = event.data ? JSON.parse(event.data.text()) : 'no payload';
  var title = 'Progressive Times';
  event.waitUntil(
    // 使用提供的信息来显示 Web 推送通知
    self.registration.showNotification(title, {                           
      body: payload.msg,
      url: payload.url,
      icon: payload.icon
    })
  );
});

4、结合 webpack 实现 PWA

结合 webpack 实现 PWA 的步骤：

  • 在 index.html 文件中启用 ServiceWorker。
  • 在 webpack 配置文件中使用 workbox-webpack-plugin 插件。
  • 编写 service-worker.js 脚本。

（1）、在 index.html 文件中启用 ServiceWorker

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker
        .register('/service-worker.js') // 这里无需传入第二个参数 scope 指定 serviceWorker 的作用域，会在 webpack 里通过 urlPattern 来实现。
        .then((registration) => {
          // console.log('ServiceWorker registered: ', registration);
        })
        .catch((err) => {
          console.log('ServiceWorker registration failed: ', err);
        });
    });
  }
</script>

【注意】尽量把这段 js 放在其他资源引入之前。

（2）、修改 webpack 的配置文件

workbox-webpack-plugin 插件是 workbox 的构建工具的实现之一。

①、了解 workbox

workbox 是 GoogleChrome 团队推出的一套 Web App 静态资源本地存储（静态资源离线缓存）的解决方案，该解决方案包含一些 Js 库和构建工具。

workbox 的 5 种缓存模式：

  • stateWhileRevalidate：
    • 允许你使用缓存的内容尽快响应请求（如果可用），如果未缓存，则回退到网络请求。 然后，网络请求用于更新缓存。
    • 这是一种相当常见的策略，适合更新频率很高但重要性要求不高（至少允许一次缓存 读取）的内容。在有缓存的情况下，该模式保证了客户端第一时间拿到数据的同时，也会去请求网络资源更新缓存， 保证下次客户端从缓存中读取的数据是最新的。因此该模式不能减轻后台服务器的访问压力，但却能给前端用户提供 快速响应的体验。
  • networkFirst（网络回落到缓存）：
    • 默认情况下，它将尝试从网络获 取最新请求。 如果请求成功，它会将响应放入缓存中。 如果网络无法返回响应，则将使用缓存响应
    • 这意味着只要当 第一次请求成功时，service worker 就会缓存一份请求结果。当后续重复请求时，缓存也会每次更新。若网络请求失 败时，只要缓存里有内容，就能让前端获取一个响应（从service worker的缓存里）。
    • 因此，此种模式提高了前端页 面的稳固性，即使在网络请求失败的情况下，页面也能从上次的缓存中读取到数据展示，而不是粗鲁的告诉用户网络请 求失败的一个响应。
    • 这种策略一般适用于返回结果不太固定或对实时性有要求的请求，为网络请求失败进行兜底。对于经常更新且关键（由业务判断出来）的请求，网络优先策略是理想的解决方案。
  • cacheFirst（缓存优先，缓存回落到网络）：
    • 如果缓存中有响应，则将使用缓存的响应来完成请求，根本不会使用网络。 如果没有缓存的响应，则将通过网络请求 来满足请求，并且将缓存响应，以便直接从缓存提供下一个请求。
    • 该模式可以在为前端提供快速响应的同时，减轻后 台服务器的访问压力。但是数据的时效性就需要开发者通过设置缓存过期时间或更改sw.js里面的修订标识来完成缓 存文件的更新。一般需要结合实际的业务场景来判断数据的时效性。
  • networkOnly：强制使用正常的网络请求，并将结果返回给客户端，这种策略比较适合对实时性要求非常高的请求。（不建议使用）
  • cacheOnly：直接使用 Cache 缓存的结果，并将结果返回给客户端，这种策略比较适合一上线就不会变的静态资源请求。（不建议使用）
②、在 webpack 配置文件中使用 workbox-webpack-plugin 插件。
const { GenerateSW } = require('workbox-webpack-plugin');
const id = new Date().getTime();

// 在 plugins 数组中添加以下配置
new GenerateSW({
  clientsClaim: true,
  skipWaiting: true,
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
  cacheId: `${id}-gsw`,
  exclude: ['service-worker.js'],
  // mode: 'development',
  runtimeCaching: [
  // 根据实际情况配置符合条件资源的缓存
    {
      urlPattern: /^https:\/\/test.ceshi.com\/static/,
      handler: 'CacheFirst', // 采用“缓存优先”的缓存模式
      options: {
        cacheName: `${id}-test-cdn`,
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
        },
        cacheableResponse: {
          statuses: [0, 200],
        },
      },
    },
  ],
}),

5、使用 Chrome Devtools 调试 Service Worker

这是一个实现了 service worker 离线缓存功能的网站，打开调试工具，调试 service worker。

在这里插入图片描述





【推荐阅读】
渐进式 Web 应用（PWA）——MDN
PWA 技术解析及爱奇艺 PC 端的实践


【参考文章】
PWA Builder Blog
讲讲 PWA
PWA 构建器博客
第一本 PWA 中文书
PWA 英文书
网站渐进式增强体验(PWA)改造：Service Worker 应用详解
Basic Service Worker Sample
【翻译】Service Worker 入门
Web App Manifest
Service Workers: an Introduction
The Offline Cookbook
微信小程序和PWA对比分析
使用workbox-webpack-plugin实现PWA
npm 之 workbox-webpack-plugin
workbox-webpack-plugin创建pwa
Webpack 插件扫盲系列（四） WorkboxWebpackPlugin
深入浅出 PWA
前端缓存-workbox缓存策略

weixin79893765432...
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack：PWA离线缓存
yu923023913的博客
06-11 710
什么是 Service Worker？ Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程） 在web worker的基础上增加了离线缓存的能力 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->
pwa缓存
qq_33332184的博客
07-22 1032
用户代理缓存（浏览器缓存） manifest <!DOCTYPE html> <html lang='en' manifest="./deafult.cache"> <head> <meta charset="utf-8" /> <title></title> </head> <body&g...
PWA进阶：离线存储与推送通知的高级技巧
最新发布
天涯学馆
05-06 349
渐进式网页应用（Progressive Web App, PWA）通过离线存储和推送通知等功能，能够提供类似原生应用的体验。
PWA-缓存
weixin_30340617的博客
01-07 222
PWA-缓存 基础 PWA强大的离线能力就在于Service Worker拦截请求及提供缓存的能力，Service Worker的缓存能力比较强大，它能够赋予你更加精确控制缓存的能力。示例页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met...
PWA常见的缓存策略
weixin_34341229的博客
05-29 1581
技术背景 大家都知道H5相比原生应用，无论是加载速度和用户体验都会差很多,具体原因有如下几点： 留白时间过长。移动端网络非常不稳定，经常会出现弱网环境（如：电梯，地铁，大山里面），这样会导致资源加载速度非常慢，留白时间相对原生会慢很多。 无法离线访问。因为资源都在线上服务器,每次访问H5的页面强烈依赖网络，原生因为资源都在应用包里面,就算断网也会给一个相对友好的展示界面和用户提醒。 无法全屏访问...
PWA之Workbox缓存策略分析
weixin_33744854的博客
12-07 423
作者：陈达孚 香港中文大学研究生,《移动Web前端高效开发实战》作者之一，《前端开发者指南2017》译者之一，在中国前端开发者大会,中生代技术大会等技术会议发表过主题演讲, 专注于新技术的调研和使用. 本文为原创文章，转载请注明作者及出处 PWA之Workbox缓存策略分析 本文主要分析通过workbox(基于1.x和2.x版本，未来...
TWEB-企业级项目基于PWA缓存的最佳实践.pdf
08-21
TWEB-企业级项目基于PWA缓存的最佳实践.pdf
企业级项目基于PWA缓存的最佳实践.pptx
09-30
**企业级项目基于PWA缓存的最佳实践** 随着互联网技术的不断发展，渐进式网络应用（Progressive Web App，简称PWA）已经成为企业级项目优化用户体验的重要手段。PWA通过缓存策略，使得应用程序能够在离线或者网络不...
企业级项目基于PWA缓存的最佳实践.pdf
09-30
**企业级项目基于PWA缓存的最佳实践** 进步网页应用（Progressive Web App，简称PWA）是一种现代的Web开发模式，旨在提供接近原生应用的用户体验，同时保持Web的可访问性和便捷性。在企业级项目中，PWA缓存策略是...
pwa-ios-cookie:用于测试Cookie以使用PWA缓存存储的示例项目
04-07
PWA-IOS-COOKIE 一个简单的PWA，用于测试IOS上的Cookie <-> CacheStorage功能。特征设置饼干将所有cookie作为JSON添加到CacheStorage 从CacheStorage设置cookie结果CacheStorage和Cookie不会在主屏幕应用程序窗口...
TWEB-企业级项目基于PWA缓存的最佳实践.zip
10-25
TWEB-企业级项目基于PWA缓存的最佳实践
vue-offline：Vue PWA的离线状态和存储
02-05
Vue离线 该库使您可以增强Vue.js应用程序的脱机功能。 当您构建脱机优先的渐进式Web应用程序或仅想通知用户他们失去了互联网连接时，此功能特别有用。 TL;博士补充isOnline isOffline数据的属性， online ， offline通过全球混入事件，并允许通过离线存储Vue.$offlineStorage基于本地存储 最初为 安装 要将此软件包作为插件安装，只需键入： npm install vue-offline --save 并将其添加到您的应用程序中 import VueOffline from 'vue-offline' Vue . use ( VueOffli
PWA专题：第二章 服务器离线缓存技术
chongtuoyi8999的博客
03-17 391
最新的 Google Android 用户行为分析中，得到以下几个数据 – 如果站点加载时间超过3s，53%的用户会放弃等待 – 页面加载后，用户期望的平滑的体验，过渡动画和快速响应，并不喜欢不断的页面跳转 – 84%的移动端浏览器已经支持PWA – 50%的用户启用了通知...
pwa学习整理 使用cacheStorage在离线时访问缓存资源
zem
11-10 1087
cacheStorage 在pwa中，我们要实现访问一个断网的页面，显示上一次的数据的功能，就必须将上一次的数据存储到缓存中，具体的就是存储到cacheStorage中。 使用一个在service worker中使用cacheStorage的例子来讲述缓存的过程 初始化各文件 首先建立目录如下 <!-- index.html --> <!DOCTYPE html> &...
渐进式Web应用（PWA）的Service Worker缓存机制
Rain_Mic的博客
01-23 1321
目录一、前言二、渐进式 Web 应用（PWA）三、ServiceWorker四、ServiceWorker启动过程五、实现ServiceWorker5.1 注册5.2 安装六，借助VuePess的插件实现ServiceWorker 一、前言 近期在研究网页缓存机制的时候学习了一下渐进式 Web 应用（PWA）中了 ServiceWorkers，并在 AWTK在线帮助文档 中实践应用了一下，在此做个记录。 二、渐进式 Web 应用（PWA） PWA全称 Progressive Web App，即渐进式Web应
webpack实现web应用的离线缓存之pwa
jieyucx的博客
06-18 594
PWA（Progressive Web Apps）是一种可以将网站转变为类似于本地应用程序的技术，具有响应速度快、离线使用等优点。它采用渐进增强式开发技术，在不同浏览器中有不同程度的支持，可以实现许多类似于应用程序的特性，如推送通知、离线缓存、加速加载等。
svelte pwa应用缓存方案
MaiJi
12-29 519
const CACHE_NAME = 'maiji-pwa-1' const CACHELIST = [ '/', ] // const LEIBIE = ['image', 'font', 'script']; const LEIBIE = ['image', 'font']; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .
PWA缓存控制和版本升级实践
梅花寺
06-08 517
PWA是会注册一个service-worker的，每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的文档，和这些文档内引用的其他任何资源（比如 index.html 发起了一个跨域的请求来嵌入一个图片，这个也会通过 service worker 。）我们可以给 service worker 添加一个 fetch 的事件监听器，接着调用 event 上的 方法来劫持我们的 HTTP 响应，然后你用可以用自己的方法来更新他们。在任
PWA之前端项目，实现可安装、离线缓存、消息推送
weixin_34228662的博客
03-08 830
概念 Progressive Web Apps 是渐进式Web应用程序，运行在现代浏览器并展现出超级能力。支持可发现，可安装，离线运行，消息推送等APP特有的能力，本项目以最简单的方式封装了以上功能。 SIMPLE-PWA SIMPLE-PWA 是pwa搭载在vue的示例项目，pwa是一个渐进式web应用概念，不依赖任何框架，vue只是一个实现载体。 查看 PWA推送消息服务器实现 demo 请...
uniapp怎么使用pwa
04-30
在uni-app中使用PWA（Progressive Web App，渐进式网络应用程序）可以提升应用的离线使用能力、推送通知功能以及提供类似原生应用的体验。以下是如何在uni-app项目中使用PWA的步骤： 1. **注册Service Worker**: Service Worker是实现PWA的关键技术之一，它是一个运行在浏览器后台的独立线程，负责缓存资源、提供服务工作线程等。要在uni-app中使用PWA，首先需要在项目中注册Service Worker。 2. **配置manifest.json**: PWA通常需要一个配置文件`manifest.json`来定义应用的名称、图标、主题颜色等元数据，以及启动画面、显示模式等。这个文件对于将网页添加到主屏幕以及应用的安装和启动至关重要。 3. **优化离线体验**: 利用Service Worker的缓存机制，可以预先缓存应用的资源文件，包括HTML、CSS、JavaScript以及多媒体资源等，以便在没有网络连接的情况下依然能够加载和使用应用。 4. **添加推送通知功能**: PWA支持推送通知，可以在用户不打开应用的情况下发送消息提醒。这需要使用到Web Push API，并且通常还需要一个服务器来管理推送订阅和消息发送。 5. **测试和调试**: 由于Service Worker必须在HTTPS环境下工作，因此在本地测试时需要通过HTTPS服务器或者使用localhost来绕过这一限制。 6. **发布和部署**: 完成开发和测试后，需要将应用部署到支持HTTPS的服务器上，以便用户可以从网站安装PWA到他们的设备上。 此外，在使用uni-app开发PWA时，可以参考一些已有的案例和教程，这样可以更快地了解整个流程和最佳实践。同时，也要注意测试在不同设备和浏览器上的兼容性，确保应用能够在各种环境下都表现良好。 总之，通过上述步骤，您可以在uni-app项目中集成PWA，从而为用户提供更加丰富和便捷的应用体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值