PWA应用总结

一、Manifest配置

  • 1、name: Web App的名称
  • 2、short_name: Web App的名称,当没有足够空间展示应用的name时,会使用short_name
  • 3、start_url: 初始打开Web App时的启动路由
  • 4、display: standalone 独立应用模式,隐藏浏览器地址栏
  • 5、icons: 应用的桌面图标
  • 6、background_color: 开屏背景色
  • 7、theme_color: 状态栏颜色

二、Manifest示例

json 复制代码
{
    "name": "AMS",
    "short_name": "AMS",
    "start_url": "/",
    "theme_color": "#ede5e0",
    "background_color": "#fff",
    "description": "描述信息",
    "display": "standalone",
    "lang": "cn",
    "orientation": "portrait",
    "icons": [
        {
            "src": "manifest-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "manifest-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "manifest-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "manifest-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "manifest-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "manifest-36x36.png",
            "sizes": "36x36",
            "type": "image/png"
        }
    ]
}

三、注意事项

  • 1、manifest.json中的 icons.<type> 使用 image/png ,即时你的图片是jpg格式
  • 2、manifest.json中的 icons.<sizes> 至少存在大于等于144*144的尺寸
  • 3、manifest.json中的 icons.<sizes> 必须长宽相等
  • 4、html中配置 <meta name="theme-color" content="#EDE5E0"> 可设置ios端PWA状态栏的颜色,等价于manifest.json中的theme_color
  • 5、html中配置 <link rel="apple-touch-icon" href="image.png"> 可设置ios端PWA图标图片,等价于manifest.json中144尺寸的icons
  • 6、beforeinstallprompt事件,仅会在manifest.json中的 start_url 与当前路由一致时才会触发
  • 7、appinstalled事件,似乎无法正常工作?

四、可安装应用的前置条件

  • 1、拥有一个 manifest.json 配置文件,且该配置文件必须包含name、short_name、start_url、icons
  • 2、拥有一个注册了的 Service Worker
  • 3、网络需要使用 HTTPSlocalhost服务

五、Workbox的使用

· vue.config.js:
  • 1、const { InjectManifest } = require('workbox-webpack-plugin') 引入插件
  • 2、使用插件:
javascript 复制代码
new InjectManifest({
    swSrc: './sw.js',
    swDest: 'sw.js',
    importWorkboxFrom: 'disabled', // 关闭自动注入workbox-sw.js
})
· sw.js:
javascript 复制代码
workbox.setConfig({
    debug: false,
    modulePathPrefix: 'https://yourdomain.com/workbox-v4.3.1'
})
  • 4、workbox提供了便利的方法,可直接调用预缓存和路由匹配,若无特殊需求,使用以下方法即可:
javascript 复制代码
workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

六、个性化路由匹配

  • 1、workbox提供了常见的缓存策略,缓存优先:workbox.strategies.CacheFirst,网络优先:workbox.strategies.NetworkFirst,仅使用缓存:workbox.strategies.CacheOnly,仅使用网络:workbox.strategies.NetworkOnly,先缓存后网络:workbox.strategies.StaleWhileRevalidate
  • 2、以下为图片路由匹配缓存示例:
javascript 复制代码
var cacheFirstOptions = {
    requestWillFetch: function(_ref2) {
        var request = _ref2.request
        request = new Request(request.url)
        return request
    },
    cachedResponseWillBeUsed: function(e) {
        if (e.cachedResponse && e.cachedResponse.type === 'opaque') {
            caches.delete(e.cacheName)
            return null
        }
        return e.cachedResponse
    }
}
workbox.routing.registerRoute(
    new RegExp(eval('/^https?:\/\/' + location.host + '(.*).(png|gif|jpg|webp)$/')), 
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxAgeSeconds: 365 * 24 * 60 * 60,
                maxEntries: 300 // 缓存条数(FIFO)
            }),
            new workbox.cacheableResponse.Plugin({
                statuses: [0, 200] // 可被缓存的状态码
            }), 
            cacheFirstOptions,
        ]
    })
)

References

[1] Google Developers

[2] 深入浅出 PWA

[3] 微博Web App

相关推荐
开心工作室_kaic4 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js