---
title: Re-engageable
slug: conflicting/Web/Progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67
tags:
  - Modern web apps
  - Notifications API
  - Progressive web apps
  - Push API
  - Service Workers
translation_of: Web/Progressive_web_apps
translation_of_original: Web/Progressive_web_apps/Re-engageable
original_slug: Web/Progressive_web_apps/Re-engageable
---
<div class="column-container summary">
<div class="column-11">原生平台一个主要优势是，用户可以轻松通过更新或加载新内容，即使用户没有正在查看应用程序或者使用他们的设备。现在的Web应用程序现在也可以使用Web Push API等技术实现这样的功能。</div>

<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div>
</div>

<h2 id="核心指南">核心指南</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a></dt>
 <dd>A simple guide for those new to the Service Worker API.</dd>
 <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API</a></dt>
 <dd>Learn the essentials behind the Web Push API.</dd>
 <dt><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></dt>
 <dd>Web notifications in a nutshell.</dd>
</dl>

<h2 id="技术">技术</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">技术</th>
   <th scope="col">描述</th>
   <th scope="col">浏览器支持</th>
   <th scope="col">最新规范</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a></td>
   <td>JavaScript running in a special worker context that is run by the browser under certain circumstances such as <em>fetch</em> or <em>push</em> events. These allow the service worker to intercept responses and customise them in any way you want, for example caching assets for offline use before they are served.</td>
   <td>Experimental: Chrome and Firefox (<a href="/en-US/docs/Web/API/Service_Worker_API#Browser_compatibility">more detail</a>)</td>
   <td>{{SpecName('Service Workers')}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/API/Push_API">Push API</a></td>
   <td>When subscribed to, the push service provides an endpoint that can be used by a server to send a push message to a web app under the control of a particular service worker.</td>
   <td>Experimental: chrome and Firefox (<a href="/en-US/docs/Web/API/Push_API#Browser_Compatibility">more detail</a>)</td>
   <td>{{SpecName("Push API")}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></td>
   <td>Fires system notifications directly from web applications.</td>
   <td>Widespreadin modern browsers (<a href="/en-US/docs/Web/API/Notifications_API#Browser_compatibility">more detail</a>)</td>
   <td>{{SpecName('Web Notifications')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="工具">工具</h2>

<dl>
 <dt><a href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
 <dd>An <em>Express-like</em> microframework for easy Service Worker development.</dd>
 <dt><a href="https://github.com/mozilla/oghliner">oghliner</a></dt>
 <dd>Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</dd>
 <dt><a href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
 <dd>A node module to generate service worker code that will precache specific resources.</dd>
</dl>

<h2 id="参见">参见</h2>

<dl>
 <dt><a href="https://serviceworke.rs/">The service worker cookbook</a></dt>
 <dd>A series of excellent service worker recipes, showing how to implement an offline app, but also much more.</dd>
</dl>