词条 | Progressive web applications | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
释义 |
}}Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.[1] BackgroundSince around 2005 web development technologies have shifted from static to dynamic web pages driven by server (PHP, ASP.NET) or client side (Ajax[2]) tools, and responsive web design.[3] Despite apps based on these technologies on devices such as the 2007 iPhone, attempts at web apps failed by comparison to native apps. Native apps provided a better user experience and booted faster compared to having to load in a browser at runtime. Packaged resources and direct access to hardware allowed native apps to perform much faster to provide more features. By mid 2010, however, continued enhancements in HTML5, CSS3, and JavaScript, significantly more capable and standard-compliant web browsers, along with powerful processors such as the Apple A10 and Snapdragon 820 made hybrid-apps a viable alternative. CharacteristicsIn 2015, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web apps"[4] to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests, that let users upgrade web apps to progressive web applications in their native operating system (OS). According to Google Developers,[4][5][6] these characteristics are:
Progressive web apps are an enhancement of existing web technology. As such, they do not require separate bundling or distribution. Publication of a progressive web app is as it would be for any other web page. PWAs work in any browser, but "app-like" features such as being independent of connectivity, install to home screen & push messaging depend on browser support. As of April 2018, those features are supported to varying degrees by the Microsoft Edge, Google Chrome, Mozilla Firefox and Safari browsers, but more browsers may support the features needed in the future.[8][9] The technical baseline criteria for a site to be considered a progressive web app by browsers were described by Russell in a follow-up post:[10]
TechnologiesCommonly used technologies serve to create progressive web apps in the broad sense[11][12][13] are the following: ManifestThe web app manifest is a W3C specification defining a JSON-based manifest[7] to provide developers a centralized place to put metadata associated with a web application including:
This metadata is crucial for an app to be added to a home screen or otherwise listed alongside native apps. AppCache (obsolete)An earlier technology to support offline use of the web.[14] It works adequately for the use case it was designed for (single-page application), but fails in problematic ways for wikis and other multi-page apps.[15] Currently supported by major browsers and in use for years by some sites, but will eventually be removed. Service workersNative mobile apps deliver rich experiences and high performance, purchased at the expense of storage space, lack of real-time updates, and low search engine visibility. Traditional web apps suffer from the inverse set of factors: lack of a native compiled executable, along with dependence on unreliable and potentially slow web connectivity. Service workers are used in an attempt to give progressive web apps the best of both these worlds.[16] Technically, service workers provide a scriptable network proxy in the web browser to manage the web/HTTP requests programmatically. The service workers lie between the network and device to supply the content. They are capable of using the cache mechanisms efficiently and allow error-free behavior during offline periods. Properties of service workers:
Benefits of service workers:
WebWorkersAllows a web app to run multiple threads of (JavaScript) code simultaneously[17] Thus, long activities can be moved off the user-interface thread, keeping responses snappy. They have a close relationship with Service Workers, but are more widely supported. WebAssemblyAllows precompiled code to run in a web browser, at near-native speed. [18]Thus, libraries written in languages such as C can be added to web apps. Due to the cost of passing data from JavaScript to WebAssembly, near-term uses will be mainly number-crunching (such as voice recognition and computer vision), rather than whole applications. Indexed Database (IDB)A NoSQL database built into modern browsers[19] Allows a PWA to immediately display content, regardless of connection status or speed. LocalStorage & SessionStorageKey-Value stores that largely make cookies obsolete.[20] Application shell architectureSome progressive web apps use an architectural approach called the App Shell Model.[21] For rapid loading, service workers store the Basic User Interface or "shell" of the responsive web design web application. This shell provides an initial static frame, a layout or architecture into which content can be loaded progressively as well as dynamically, allowing users to engage with the app despite varying degrees of web connectivity. The shell can be stored locally in the browser cache of the mobile device.[22] Directories and examples
The following list includes progressive web apps together with their scores from Google Chrome's PWA audit powered by Lighthouse.[23] The audit validates the aspects of a PWA, as specified by Google's [https://developers.google.com/web/progressive-web-apps/checklist baseline PWA Checklist] and ranges from 0 (worst) to 100 (best).
The following apps are or were claimed to be PWAs but fail to register an obligatory service worker:
References1. ^{{cite web|url=https://www.topsinfosolutions.com/blog/progressive-web-apps-web-mobile-apps/|title=Progressive Web Apps - Blurring the Lines between Web and Mobile Apps|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=}} 2. ^{{cite web|url=http://adaptivepath.org/ideas/ajax-new-approach-web-applications/|title=Ajax: A New Approach to Web Applications|ref=1|last1=Garrett|first1=Jesse James|accessdate=February 18, 2005|archivedate=January 29, 2016}} 3. ^{{cite web|url=http://alistapart.com/article/responsive-web-design|title=Responsive Web Design|ref=2|last1=Marcotte|first1=Ethan|accessdate=May 25, 2010|archivedate=January 29, 2016}} 4. ^1 {{cite web|last1=Russell|first1=Alex|title=Progressive Web Apps: Escaping Tabs Without Losing Our Soul|url=https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/|accessdate=June 15, 2015|ref=4|archivedate=January 29, 2016}} 5. ^{{Cite web|url=https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en|title=Your First Progressive Web App {{!}} Web Fundamentals - Google Developers|website=Your First Progressive Web App {{!}} Web Fundamentals - Google Developers|access-date=2016-07-17}} 6. ^{{cite web|last1=Google Developers|title=Progressive Web App|url=https://developers.google.com/web/progressive-web-apps|accessdate=June 15, 2015|ref=3|archivedate=January 29, 2016}} 7. ^1 W3C [https://www.w3.org/TR/appmanifest/ “Web App Manifest”, Working Draft], retrieved 12 September 2016 8. ^{{cite web |url=https://caniuse.com/#search=pwa | title = Can I use pwa? | website=CanIUse |accessdate=14 August 2018}} 9. ^{{cite web |title=Is Service Worker Ready? |url=https://jakearchibald.github.io/isserviceworkerready/ |publisher=Jake Archibald}} 10. ^{{cite web|last1=Russell|first1=Alex|title=What, Exactly, Makes a Progressive Web App|url=https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/|accessdate=October 18, 2016|ref=4}} 11. ^{{Cite web|url=https://developer.mozilla.org/en-US/Apps/Progressive/Discoverable|title=Discoverable|website=Mozilla Developer Network|language=en-US|access-date=2017-04-24}} 12. ^{{Cite web|url=https://developer.mozilla.org/en-US/Apps/Progressive/Network_independent|title=Network independent|website=Mozilla Developer Network|language=en-US|access-date=2017-04-24}} 13. ^{{Cite web|url=https://developers.google.com/web/updates/2015/11/app-shell|title=Instant Loading Web Apps with an Application Shell Architecture|last=|first=|date=|website=Google Developers|language=en|archive-url=|archive-date=|dead-url=|access-date=2017-04-24}} 14. ^{{cite web |title=Using the application cache |url=https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache |website=MDN |publisher=Mozilla |accessdate=14 August 2018}} 15. ^{{cite web |title=Application Cache is a Douchebag |url=https://alistapart.com/article/application-cache-is-a-douchebag |website=A List Apart |accessdate=14 August 2018}} 16. ^{{Cite web|url=http://www.htmlpanda.com/blog/learn-everything-about-progressive-web-apps/|title=Learn Everything About Progressive Web Apps|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=}} 17. ^{{cite web |title=Worker |url=https://developer.mozilla.org/en-US/docs/Web/API/Worker |website=MDN |accessdate=14 August 2018}} 18. ^{{cite web |title=WebAssembly Concepts |url=https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts |website=MDN |accessdate=14 August 2018}} 19. ^{{cite web |title=Concepts behind IndexedDB |url=https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB |website=MDN |accessdate=14 August 2018}} 20. ^{{cite web |title=Web Storage API |url=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API |website=MDN |accessdate=14 August 2018}} 21. ^{{Cite web|url=https://developers.google.com/web/fundamentals/architecture/app-shell|title=The App Shell Model|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=}} 22. ^{{Cite web|url=https://indylogix.com/progressive-web-apps/|title=Progressive Web Apps – a Quality Mix of Web and Mobile|last=|first=|date=|website=|archive-url=|archive-date=|dead-url=|access-date=}} 23. ^1 {{cite web |url=https://developers.google.com/web/tools/lighthouse/ |title= Lighthouse - Google Developers |author=}} 2 : Web applications|Words and phrases introduced in 2015 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
随便看 |
|
开放百科全书收录14589846条英语、德语、日语等多语种百科知识,基本涵盖了大多数领域的百科知识,是一部内容自由、开放的电子版国际百科全书。