files/zh-tw/web/progressive_web_apps/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

---
title: 漸進式網絡應用程式
slug: Web/Progressive_web_apps
tags:
  - Apps
  - Modern web apps
  - NeedsTranslation
  - Progressive web apps
  - TopicStub
translation_of: Web/Progressive_web_apps
---
<p class="summary">漸進式網絡應用程式（Progressive web app）使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。 這些程式提供了能讓用戶體驗，逼近於原生程式的功能。這套文件將講述你需要知道的一切。</p>

<h2 id="PWA_優勢">PWA 優勢</h2>

<p>PWA 應該要可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、以及安全（discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, safe）。需要有關這方面的理解，請參閱<a href="/zh-TW/docs/Web/Apps/Progressive/Advantages">漸進式網絡應用程式的優勢</a>。如果需要實作細節，請參考以下章節表列的教學。</p>

<h2 id="PWA_核心教學">PWA 核心教學</h2>

<p>以下教學將以簡單例子告訴你，在實作 PWA 時所需要的東西，並講述一切如何運行。</p>

<ol>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Introduction">漸進式網絡應用程式簡介</a></li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/App_structure">漸進式網絡應用程式架構</a></li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Offline_Service_workers">使用 Service worker 讓 PWA 能離線工作</a></li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Installable_PWAs">如何令 PWA 可安裝</a></li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push">如何使用 Notifications 與 Push 令 PWA 可重連線</a></li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Loading">漸進式載入</a></li>
</ol>

<div class="column-container">
<div class="column-half">
<h2 id="技術教學">技術教學</h2>

<ul>
 <li><a href="/zh-TW/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">用戶端儲存</a>：展示如何與何時使用 web storage、IndexedDB、service worker 的長篇教學。</li>
 <li><a href="/zh-TW/docs/Web/API/Service_Worker_API/Using_Service_Workers">使用 service worker</a>：涵蓋 Service Worker API 的深入教學</li>
 <li><a href="/zh-TW/docs/Web/API/IndexedDB_API/Using_IndexedDB">使用 IndexedDB</a>：詳細解釋 IndexedDB 的基礎。</li>
 <li><a href="/zh-TW/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a>：讓 Web storage API 變得簡單。</li>
 <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a>：使用 App Shell 程式模式加快 app 的載入速度。</li>
 <li><a href="/zh-TW/docs/Web/API/Push_API/Using_the_Push_API">使用 Push API</a>：了解 Web Push API 所需的一切。</li>
 <li><a href="/zh-TW/docs/Web/API/Notifications_API/Using_the_Notifications_API">使用 Notifications API</a>：web notification 簡介。</li>
 <li><a href="/zh-TW/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">構建響應式設計</a>：了解當今 app 佈局的關鍵——響應式設計——的基本。</li>
 <li><a href="/zh-TW/docs/Web/Apps/Modern/Responsive/Mobile_first">行動優先</a>：建立響應式設計很常見，預設以行動裝置的佈局優先、接著設計更寬廣的佈局，是相當合理的。</li>
 <li><a href="/zh-TW/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — learn how your apps can take advantage of Add to home screen (A2HS).</li>
</ul>
</div>

<div class="column-half">
<h2 id="工具">工具</h2>

<ul>
 <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a>：讓用戶端儲存變簡單的輕量化 JavaScript 函式庫。預設上使用 IndexedDB，必要時則改用 SQL/Web 儲存。</li>
 <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — an <em>Express-like</em> microframework for easy Service Worker development.</li>
 <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li>
 <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — a node module to generate service worker code that will precache specific resources.</li>
 <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li>
 <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — a tiny script that makes sure your site is always there for your users.</li>
 <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li>
</ul>
</div>
</div>

<h2 id="參見">參見</h2>

<ul>
 <li>Google Developers 的 <a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a></li>
 <li>Alex Russell 寫的 <a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a></li>
 <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
 <li>Google 的 <a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk">The Lighthouse Tool</a></li>
 <li><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
 <li><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
 <li><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
 <li class="graf--h3 graf--first">
  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a></p>
 </li>
</ul>