initial commit

1 files changed, 77 insertions, 0 deletions

diff --git a/files/zh-tw/web/progressive_web_apps/index.html b/files/zh-tw/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..df63a8de90
--- /dev/null
+++ b/files/zh-tw/web/progressive_web_apps/index.html
@@ -0,0 +1,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>