7.1 PWA 使用和配置说明

大雨倾城

已于 2023-01-30 19:12:14 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2021-02-25 10:13:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38918953/article/details/114063676

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

本文围绕PWA展开，介绍其是渐进式WEB应用。说明了实现PWA需添加App Manifest和Service Worker，能实现站点添加到主屏幕、离线缓存、消息推送等功能。还讲解了将网页添加到手机屏幕的方法、manifest.json配置，以及通过Service Worker实现离线缓存的做法和开发步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PWA 使用和配置说明

文章目录

PWA 使用和配置说明

什么是pwa?

progressive web app,即渐进式WEB应用，简称PWA。

如何实现pwa?

在网页添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能,可以实现PWA应用封装。

pwa能做什么？

站点可添加至主屏幕（通过manifest.json配置）
支持离线缓存（使用技术Service Worker）
实现消息推送

如何将网页添加到手机屏幕上？

在web应用的头部文件中添加一个link标签，引入manifest.json文件

<link rel="manifest" href="/manifest.json">   // manifest后缀名可更改，如manifest.webmanifest

manifest.json的具体配置

{
"name": "GreandStream PWA ",     //显示的插件名称
"short_name": "GS_PWA",          // 在APP launcher和新的tab页显示，如果没有设置，则使用name
"description": "The app that helps you understand PWA", //用于描述应用
"theme_color": "#2196f3",   // 桌面图标的背景色
"background_color": "#2196f3",
"display": "standalone",   // 定义开发人员对Web应用程序的首选显示模式。
"icon": [          // 桌面图标，是一个数组，注意图片大小和格式
        {
         "src": "icon/like-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
       },         
      {
         "src": "icon/like-512x512.png",
          "sizes": "512x512",
           "type": "image/png",
       }
   ],
   "start_url": "index.html"    // 应用启动时的url
}

manifest.json具体实现的功能有哪些？

能够将你浏览的网页添加到你的手机屏幕上
在 Android 上能够全屏启动，不显示地址栏（由于 Iphone 手机的浏览器是 Safari ，所以不支持）
控制屏幕横屏 / 竖屏展示
定义启动画面
可以设置你的应用启动是从主屏幕启动还是从 URL 启动
可以设置你添加屏幕上的应用程序图标、名字、图标大小

兼容注意点

1.safari浏览器，icons需要特殊处理，需要在html页面中单独添加：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="PWA test">
<link rel="shortcut icon" sizes="152x152" href="./icon/like-152x152.png">
<link rel="shortcut icon" sizes="512x512" href="./icon/like-512x512.png">
<link rel="apple-touch-icon" sizes="152x152" href="./icon/like-152x152.png" />
<link rel="apple-touch-icon" sizes="512x512" href="./icon/like-512x512.png" />

icon的图标配置有一定的要求，建议使用152x152或512x512 png
demo完成配置后需要确保给个JS文件访问路径正常，控制台-》application-》service workers 下勾选offline，刷线页面，查看文件请求是否成功，如果失败，说明sw.js里面的cache路径配置不正确，cache没有成功。

如何实现离线缓存？

通过Service Worker，它的本质是一个脚本文件，例如sw.js，通常 sw.js 文件是处于项目的根目录，并且需要保证能直接通过 https: //yourshost/sw.js 这种形式直接被访问到才行。

Service Worker实现离线缓存的做法？

当有网络时，发送请求，如果命中Service Worker的缓存，浏览器会先从缓存中读取，然后再次发送请求，将缓存更新。所以在有网络的情况下，在控制台的network里面看会有两次请求记录。
如果无网络，只会有一次请求记录，如果命中缓存，显示从Service Worker中取，如果没有命中，会显示正常报错消息。

Service Worker的开发步骤

// Register service worker to control making site work offline
if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js').then(function() { console.log('Service Worker Registered'); });
}

2.在sw.js 中添加安装处理，将需要缓存的路径提前添加到sw.js中

1.知识点：cache的方法

// requests[]是要获取并添加到缓存的字符串URL数组
cache.addAll(requests[]).then(function() {
//requests have been added to the cache
});
// 将requests作为key，返回的response对象作为value值存到缓存中

self.addEventListener('install', function (e) {
    console.warn("install")
    e.waitUntil(
        caches.open('fox-store').then(function (cache) {
            console.log('Opened cache');
            // 注：注意cache文件路径，是sw.js的相对路径
            return cache.addAll([
                './',
                './index.html',
                './index.js',
                './style.css',
                "./icon/fox-icon.png",
                "./icon/like-152x152.png",
                "./icon/like-512x512.png",
                "./video/yewen4.mp4",
                './images/fox1.jpg',
                './images/fox2.jpg',
                './images/fox3.jpg',
                './images/fox4.jpg',
                './src/jquery.min.js',
                './src/db.js',
                './src/webSocket.js'
            ]);
        })
    );
});

在没有命中缓存时，Service Worker需要用fetch发送网络请求，判断请求回来的数据是否需要缓存起来

self.addEventListener('fetch', function(e) {
    console.log(e.request.url);
    e.respondWith(
        caches.match(e.request).then(function(response) {
            return response || fetch(e.request);
        })
    );
});

参考文章

PWA 说明