---
title: 网络独立
slug: Web/Progressive_web_apps/Network_independent
tags:
  - Application Shell
  - IndexedDB
  - PWA
  - Progressive web apps
  - Service Workers
  - Web Storage
  - localStorage
translation_of: Web/Progressive_web_apps
---
<div class="column-container summary">
<div class="column-11">当网络不可靠，甚至不存在时，现代网络应用程序仍可以工作。没有更多的空白连接错误页面或恐龙穿过沙漠。除了离线高速缓存和服务工作者之外，UI和内容之间的一个明确的分隔可让您存储应用程序的数据和核心资产，以备将来使用。</div>

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

<p>The basic ideas behind network independence are to be able to:</p>

<ul>
 <li>Revisit a site and get its contents even if no network is available.</li>
 <li>Browse any kind of content the user has previously visited at least once, even under situations of poor connectivity.</li>
 <li>Control what is shown to the user in situations where there is no connectivity.</li>
</ul>

<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/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></dt>
 <dd>The basics of IndexedDB, explained in detail.</dd>
 <dt><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></dt>
 <dd>The Web storage API made simple.</dd>
 <dt><a href="https://developers.google.com/web/updates/2015/11/app-shell">Instant Loading Web Apps with An Application Shell Architecture</a></dt>
 <dd>A guide to using the App Shell coding pattern to create apps that load quickly.</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/IndexedDB_API">IndexedDB</a></td>
   <td>A transactional database system that allows complex client-side data storage to be controlled via JavaScript.</td>
   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/API/IndexedDB_API#Browser_compatibility">more detail</a>)</td>
   <td>{{SpecName('IndexedDB')}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a></td>
   <td>A simple API for storing name-value pairs on the client-side.</td>
   <td>Widespread (<a href="/en-US/docs/Web/API/Web_Storage_API#Browser_compatibility">more detail</a>)</td>
   <td>{{SpecName('Web Storage')}}</td>
  </tr>
 </tbody>
</table>

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

<dl>
 <dt><a href="http://mozilla.github.io/localForage/">localForage</a></dt>
 <dd>A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default, and falls back to Web SQL/Web Storage if necessary.</dd>
 <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>
 <dt><a href="https://www.talater.com/upup/">upup</a></dt>
 <dd>A tiny script that makes sure your site is always there for your users.</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>