PWA

可安装

manifest.json

SW

  • 需要缓存资源
    • 应用核心 JS CSS
    • 字体
    • 图片
    • 关键 HTTP 请求

ios 12 支持情况

still force reload every time app is shown/hidden now retain cookies after being reloaded (i.e. login possible) forget deep links support localStorage don't support sessionStorage

解决: Switched to localStorage instead of sessionStorage when "standalone" and persist a custom history stack to restore deep links

饿了么的 PWA 升级实践 - 黄玄的博客 | Hux Blogopen in new windowLavas | 基于 Vue 的 PWA 完整解决方案open in new windowLavasopen in new windowBeyond SPAs: alternative architectures for your PWA  |  Web  |  Google Developersopen in new window

Trusted Web Activity

Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]open in new window

与小程序区别

小、快、轻,应对原生应用弊端,让 web 具有应用能力 两个生态: 开放、封闭

传统的 HttpCache,让资源在缓存时性能会很好,而 PWA 是让资源非常可靠地缓存起来,让页面性能一直都很好。

激活问题

默认、等待激活,需要等页面关闭,这么设计原因是渐近式

How to immediately activate a service worker with vanilla JS | Go Make Thingsopen in new windowvue.js - How to do skipwaiting with register-service-worker in vue app? - Stack Overflowopen in new window

// vue.config.js
    pwa: {
        ...
        workboxPluginMode: 'GenerateSW',
        workboxOptions: {
            skipWaiting: true
        }
    },

用 Vue 做 PWA (三):理解生命周期 - AC Dustbinopen in new windowVueJs PWA: Notify User about the App Update | skipWaiting ~ 360learntocodeopen in new window

离线包怎么更新?怎么知道需要打开哪个离线包?

后台更新:每次进入一个新页面,异步检查配置文件,是否需要更新。

通过版本号。

缓存策略

监听 fetch 事件

  1. 缓存优先——首先查看缓存,当缓存失效时再去访问网络。这一策略适用于资源文件,如字体、样式、图片等

  2. 网络优先:首先查看网络,当网络失败时应用本地缓存。这一策略适合实时数据,比如获取天气信息的 AJAX 请求。这样每次页面刷新都可以获得最新的天气信息,当离线时会降级到使用本地缓存。并给出离线的提示。

百度搜索对PWA的探索和初步实践open in new window

Issues

离线后只能从入口访问?不能从子页面

Last Updated:
Contributors: cyio