1 files changed, 59 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html
new file mode 100644
index 0000000000..a84a3e5421
--- /dev/null
+++ b/files/zh-cn/conflicting/web/progressive_web_apps/introduction/index.html
@@ -0,0 +1,59 @@
+---
+title: 渐进式webApp优势
+slug: conflicting/Web/Progressive_web_apps/Introduction
+translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications
+translation_of_original: Web/Progressive_web_apps/Advantages
+original_slug: Web/Progressive_web_apps/优势
+---
+<p class="summary">以下是渐进式webApp所有的优势清单</p>
+
+<h2 id="Discoverable">Discoverable<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>The eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.</p>
+
+<p>Some of the capabilities have already been enabled on certain web-based platforms by proprietary technologies like <a href="http://ogp.me/">Open Graph</a>, which provides a format for specifying similar metadata in the HTML <code>&lt;head&gt;</code> using meta tags.</p>
+
+<p>The relevant web standard here is the <a href="/en-US/docs/Web/Manifest">Web app manifest</a>, which defines features of an app such as name, icon, splash screen, and theme colors in a JSON-formatted manifest file. This is for use in contexts such as app listings and device home screens.</p>
+
+<ul>
+</ul>
+
+<h2 id="Installable">Installable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>A core part of the apps experience is for users to have app icons on their home screen, and be able to tap to open apps into their own native container that feels nicely integrated with the underlying platform.</p>
+
+<p>Modern web apps can have this native app feel via properties set inside the Web app manifest, and via a feature available in modern smartphone browsers called <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen</a>.</p>
+
+<h2 id="Linkable">Linkable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>One of the most powerful features of the Web is to be able to link to an app at a specific URL — no app store needed, no complex installation process. This is how it has always been.</p>
+
+<h2 id="Network_independent">Network independent<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Modern web apps can work when the network is unreliable, or even non-existent. 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>
+
+<p>This is achieved by a combination of technologies — <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> to control page requests (for example storing them offline), the <a href="/en-US/docs/Web/API/Cache">Cache API</a> for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store application data offline.</p>
+
+<h2 id="Progressive">Progressive<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Modern web apps can be developed to provide a super cool experience to fully capable browsers, and an acceptable (although not quite as shiny) experience to less capable browsers. We've been doing this for years with best practices such as <a href="/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>.</p>
+
+<h2 id="Re-engageable">Re-engageable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>One major advantage of native platforms is the ease with which users can be re-engaged by updates and new content, even when they aren't looking at the app or using their devices. Modern web apps can now do this too, using new technologies such as <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> for controlling pages, the <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> for sending updates straight from server to app via a service worker, and the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> for generating system notifications to help engage users when they're not in the browser.</p>
+
+<h2 id="Responsive">Responsive<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2>
+
+<p>Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.</p>
+
+<h2 id="Safe">Safe<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2>
+
+<p>The web platform provides a secure delivery mechanism that prevents snooping and ensures content hasn’t been tampered with — as long as you take advantage of HTTPS and develop your apps with security in mind. In addition, you can verify the true nature of a PWA by confirming that it is at the correct URL, whereas apps in apps stores can often look like one thing, but be another (<a href="https://twitter.com/andreasbovens/status/926965095296651264">example</a>).</p>
+
+<p> </p>