mjzhang1993的博客

使用 workbox 协助构建 PWA 应用1. 说明 workbox 是 GoogleChrome 团队推出的一套解决方案，提供站点离线访问能力，可以更方便、更简单的解决 Service Workers 绝大多数问题重要文件版本workbox-build ‘3.0.0’2. workbox 简单使用 workbox 是协助 Service wo...

webpack 中使用 workbox 实现 PWA说明 重要文件版本“workbox-webpack-plugin”: “^3.0.0”“webpack”: “^3.11.0” webpack 提供了 workbox 插件 workbox-webpack-pluginwebpack 中使用 在 production 版本配置中使用1...

PWA 渐进式网络应用 - 1 - 简介及调试方法1. 说明 PWA (Progressive Web App) 渐进式网络应用，它具有以下特点可靠，即使在不稳定的网络环境下，也能瞬间加载并展现体验，快速响应，平滑动画响应用户操作粘性，体验上更接近原生应用，可以被添加到桌面 PWA 的渐进式体现在它的渐进式增强：即使在不兼容 WPA 的老旧浏览器上，它依然可以...

PWA 渐进式网络应用 - 2 - 使用 Service Workers1. 简介 释放 PWA 力量的关键在于 Service Workers， Service Workers 可以在浏览器后台挂起新线程，并且可以拦截网络请求进行本地缓存或请求转发，相当于充当 Web 应用程序与浏览器间的代理服务器，也可以在网络可用时，作为浏览器和网络间的代理 Service Work...

PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面简介 WEB 应用清单 manifest.json web 应用清单是一个简单的 json 文件，其中包含 short_name 以及 icons 字段，目的是提供将应用添加至桌面的功能，从而使用户可以无需下载如同原生应用一般从桌面打开 web 应用，只要在 service worker 基础上添加一个描...

PWA 渐进式网络应用 - 4 - 推送通知说明 推送通知可以很好的与用户进行互动，尤其是当他们关闭了标签页或访问其他网页的时候，体验类似于原生应用，要给用户发送通知，需要首先通过用户授权Notification h5 中用来给用户发送通知push API 获取服务器推送，然后通过 Service Workers 调用 Notification 发送通知 发送通...