待花开花谢的博客

Chrome目前使用Firebase云消息传递（FCM）作为其推送服务。 FCM最近采用了Web Push协议。 FCM是Google云消息传递（GCM）的后续产品，支持相同的功能和更多功能。要使用Firebase云消息传递，您需要在Firebase上设置项目（请参阅VAPID部分以绕过此步骤）。 大致流程如下：1、在Firebase控制台中，选择创建新项目。 2、提供项目名称，然后单击...

PWA的推送是基于Notifications API 和 Push API，Notifications API让应用程序向用户显示系统通知。 Push API允许service worker处理来自服务器的推送消息，即使应用程序处于不活动状态。推送通知术语通知 - 在应用的普通用户界面（即浏览器）之外向用户显示的消息，推送消息 - 从服务器发送到客户端的消息推送通知 - 为响应推送消...

在使用的过程中我们通常使用cache缓存html、css、js等文件信息，但是一些特殊的数据需要我们借助数据库的支持，这里推荐使用IndexedDB。IndexedDB是一个大型的noSQL存储系统。 它使您可以在用户的浏览器中存储任何内容。 除了通常的搜索，获取和存储操作之外，IndexedDB还支持事务。检查浏览器是否支持IndexedDBif (!('indexedDB' i...

简单来说Fetch API就是一个请求资源的接口，比XMLHttpRequest更简单。 Fetch支持跨源资源共享（CORS），正式环境需要HTTPS。请求示例：fetch('examples/example.json').then(function(response) { if (!response.ok) { throw Error(response.status...

上篇文章介绍了文件的缓存，这里我们介绍一下Cache API的属性和方法。检查浏览器是否支持Cache APIif('caches' in window){ //支持}创建缓存caches.open('example-cache').then(function(cache) { //创建一个名为example-cache的缓存并返回一个cache对象...

Service Worker API带有一个Cache接口，可以让您创建按请求键入的响应存储。 缓存资源的常见模式有：service worker安装、用户交互、网络响应。1、在service worker安装的时候缓存应用程序脚本 我们可以在这里缓存Html、css、js等一些静态资源。self.addEventListener('install', function(event)...

Progressive Web App的介绍：Progressive Web Apps（PWA）是一个结合了最好的web和app经验的渐进式网络应用程序。它对用户来说是非常有用的，它不需要安装，只需要从浏览器标签开始访问。随着用户与app建立的关系，它变得越来越强大。即使在片状网络上，它也可以实现快速加载，并发送相关推送通知。它可以在主屏幕上创建图标，并加载为顶级全屏体验。Prog

这篇文章主要介绍怎么创建一个PWA程序。首先听说bootstrap4非常好，那我们就把bootstarp4项目变成我们的PWA程序。顺便推荐一个node插件live-server，用来当做本地服务器运行你的项目。Vs Code也可以安装此插件。第一步：拥有一个web页面为了展示效果我们从https://startbootstrap.com/下载一个模板。随便下载一个模板，修改项目名称为...