Difference between revisions of "Progressive Web App"
From MgmtWiki
(→Solution) |
(→Other Reference Material) |
||
| (35 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
==Full Title or Meme== | ==Full Title or Meme== | ||
| − | Progressive Web App (PWA) | + | A [[Progressive Web App]]lication (PWA) runs in a browser on the user's device with the look and feel of a [[Native App]]. |
| + | |||
| + | There is also some earlier information on the [[Web App]] page. | ||
| + | |||
==Context== | ==Context== | ||
* Folks all around the world are increasing dependent on their mobile phone for a wide range of functionality. | * Folks all around the world are increasing dependent on their mobile phone for a wide range of functionality. | ||
* While all the newest [[Smart Phone]]s come with multiple gigabytes of memory, most of the world still depends on less expensive phones. These phones cannot load large [[Native App]]s nor can they store very many apps. | * While all the newest [[Smart Phone]]s come with multiple gigabytes of memory, most of the world still depends on less expensive phones. These phones cannot load large [[Native App]]s nor can they store very many apps. | ||
| + | *Out of scope of a PWA is any technology that needs to package executable files, whether it is a .apk, .exe, or any other that needs to be downloaded as a [[Native App]] and installed on the user’s device. | ||
==Problems== | ==Problems== | ||
| − | * Most | + | * Most [[Smart Phone]] users have some experience with accessing [[Web App]]s, and during this access you may have noticed that most of the time they were slow and heavy, making the experience frustrating and disheartening. |
| + | * Any app from the store needs to be native or hybrid, which means, you must install it on your device and accept terms and conditions before you even try it. Let’s face it, it can be very frustrating, after all, having to install and uninstall several apps, or even install it for just one time usage is not something very practical. We must also consider that mobile Internet can be expensive and somehow limited, so if you need to download a 30 MB app, it will take a while and you risk running out of available connection. | ||
| − | The | + | ===Some Down Sides to PWA=== |
| + | * Pay attention to browser support at the time you expect to deploy the web app. In early 2019, iOS did not support all features; in that case, you must find another solution, like the appCache missing, which should be used for offline access. You may verify the iOS ‘s full support for Service Workers here. | ||
| + | * The Service Worker does not have access to DOM, it runs on a different scope from the page, it is promise (task) based, and it must run with HTTPS protocol. <<<. May not be true in 2021. >>> | ||
| + | * The PWA offers considerable speed-up for parts of the [[Web Site]] including the home page. This can make display of some content out-of-date and this needs to be understood and perhaps mitigated by the [[Web App]] programmer. | ||
| − | + | ===Developers still seem to favor [[Native App]]s=== | |
| + | * Some APIs, like access to the [[Secure Enclave]], (in 2022) are not available to PWAs | ||
| + | * because they have no way to discover the PWA’s | ||
| + | * because some vendors are holding back the web by not allowing certain features (or whole engines for that matter) on their platform. | ||
| + | * Worker at reddit claims they get much higher retention in-app even controlling for things you would expect to confound. | ||
| + | *Data taken from this [https://areknawo.com/web-vs-native-make-the-right-choice-in-2021/ link] | ||
==Solution== | ==Solution== | ||
One solution to these problems is the [https://en.wikipedia.org/wiki/Progressive_web_applications Progressive Web App] ( PWA ). It is all about an app that uses resources from a modern Web Browser to present a similar experience the user would have with native/hybrid apps, but are built using HTML, CSS and JavaScript rather than with the native code for the platform from Apple, Android or Microsoft. (Note that TypeScript may also be used for a [[Web App]], but that just compiles into JavaScript.) | One solution to these problems is the [https://en.wikipedia.org/wiki/Progressive_web_applications Progressive Web App] ( PWA ). It is all about an app that uses resources from a modern Web Browser to present a similar experience the user would have with native/hybrid apps, but are built using HTML, CSS and JavaScript rather than with the native code for the platform from Apple, Android or Microsoft. (Note that TypeScript may also be used for a [[Web App]], but that just compiles into JavaScript.) | ||
| − | The [[Progressive Web App]] is a [[Web App]] that has an [[Web App Manifest]] and typically addresses these 10 key concepts, based on Google’s Patterns. | + | Many web developers already have been creating [[Web Site]]s that are well adapted to mobile devices and could already be considered to be constructed to look like [[Web App]]s. The extra work to enable these apps to be registered to display on the user's home screen (i.e. to become a PWA) is not large. |
| + | |||
| + | The [[Progressive Web App]] is a [[Web App]] that has an [[Web App Manifest]], to enable registration with the mobile device, and typically addresses these 10 key concepts, based on Google’s Patterns.<ref>Google, ''Introduction to Progressive Web App Architectures'' https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures</ref> | ||
#Safe – It must use the HTTPS protocol to protect the privacy and integrity of the exchanged data. | #Safe – It must use the HTTPS protocol to protect the privacy and integrity of the exchanged data. | ||
#Progressive – It must work for all the users, regardless of which browser is used, because the app should be built using progressive enhancement patterns. | #Progressive – It must work for all the users, regardless of which browser is used, because the app should be built using progressive enhancement patterns. | ||
#Responsible – It must fit on any screen size: desktop, mobile phones, tablets, etc. | #Responsible – It must fit on any screen size: desktop, mobile phones, tablets, etc. | ||
| − | #Internet-free – With | + | #Internet-free – With [[Service Worker]] (background task) technology it is possible to access the application on bad quality connections or even offline. |
#App-like – User should have the same experience as any other native/hybrid application; this is because of the app shell model. | #App-like – User should have the same experience as any other native/hybrid application; this is because of the app shell model. | ||
#Always up to date – User should not download any updates. Since it is a web site, all the updates must happen in the background. | #Always up to date – User should not download any updates. Since it is a web site, all the updates must happen in the background. | ||
| Line 28: | Line 43: | ||
Following those patterns, you will ensure that your application works very well, not only when accessed by a browser, but also by a shortcut icon. | Following those patterns, you will ensure that your application works very well, not only when accessed by a browser, but also by a shortcut icon. | ||
| − | + | PWA does not need any installation, you just need to access the web site and accept the "add to home screen" when indicated. It is not necessary to understand about the development and management of applications as you would for iOS, Android and Windows. | |
| − | |||
| − | + | This is enabled by a piece of JavaScript called Service Workers, which is installed by the browser, but runs in a separate thread. And for multiprocessor phones possibly on its own processor. Even with a site running offline, you will be receiving push notifications, geolocation, background updates, interceptions and images cache, JavaScript, CSS files, XHR, etc. This script works by intercepting requests, caching returned content and even handling events. The interaction with the user is sped up even while online because of the local caching. | |
| − | + | ===For Developers=== | |
| − | + | * The biggest advantage for developers is that you can generate a PWA with little more than a script editor. There is no need for a feature-rich developer tool kit and the same code works in all browsers. | |
| + | * [https://developers.google.com/web/fundamentals/app-install-banners/ Configuring apps for Google] is mostly about how to construct a manifest and service worker. | ||
| + | * [https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html Configuring apps for Apple] including the apple-touch-icon link to be included in the HTML page. | ||
| − | + | ===PWA initiators=== | |
| − | + | * Traditionally PWA were created by web sites that wanted to have some continuing presence on the browser even when the web connection was inoperable. If the web site was accessed, the service worker of the PWA would start up immediately and call out to the web site as needed for updates. | |
| − | + | * As new methods are being introduced they are being tracked on the wiki page [[PWA initiators]]. | |
| + | ===Declarative Links=== | ||
| + | almost all launch use cases can be covered by a handful of fixed rules (for example, "choose an existing window in the same app, focus it, and navigate it to the launched URL"). Thus, this proposal, "Declarative Link Capturing", allows sites to choose one of those fixed rules without having to implement custom launch event logic, which should satisfy most use cases, and simplify the implementation in the browser and in all the sites. | ||
| + | * [https://github.com/WICG/sw-launch/blob/main/declarative_link_capturing.md explainer] is evolving and seems to be settling down by the end of 2021. | ||
==References== | ==References== | ||
<references /> | <references /> | ||
| − | ===Other | + | ===Other Reference Material=== |
| + | * For secured versions of PWA see the wiki page [[Isolated Web App]]. | ||
| + | * The [https://trustregistry.us/ web site Trust Registry for the US] is constructed to load as a [[Progressive Web App]]. | ||
| + | * The [https://appsco.pe/ web site App Scope] attempts to list the [[Progressive Web App]]s but is always a little bit out of date. | ||
| + | * [https://www.actminds.com/blog/pwa/ Progressive Web Apps] on Act Minds is helpful for deciding if [[Progressive Web App]]s are for you. | ||
| + | |||
| − | + | [[Category: Profile]] | |
| + | [[Category: Web]] | ||
| + | [[Category: Attestation]] | ||
Latest revision as of 11:25, 25 October 2023
Contents
Full Title or Meme
A Progressive Web Application (PWA) runs in a browser on the user's device with the look and feel of a Native App.
There is also some earlier information on the Web App page.
Context
- Folks all around the world are increasing dependent on their mobile phone for a wide range of functionality.
- While all the newest Smart Phones come with multiple gigabytes of memory, most of the world still depends on less expensive phones. These phones cannot load large Native Apps nor can they store very many apps.
- Out of scope of a PWA is any technology that needs to package executable files, whether it is a .apk, .exe, or any other that needs to be downloaded as a Native App and installed on the user’s device.
Problems
- Most Smart Phone users have some experience with accessing Web Apps, and during this access you may have noticed that most of the time they were slow and heavy, making the experience frustrating and disheartening.
- Any app from the store needs to be native or hybrid, which means, you must install it on your device and accept terms and conditions before you even try it. Let’s face it, it can be very frustrating, after all, having to install and uninstall several apps, or even install it for just one time usage is not something very practical. We must also consider that mobile Internet can be expensive and somehow limited, so if you need to download a 30 MB app, it will take a while and you risk running out of available connection.
Some Down Sides to PWA
- Pay attention to browser support at the time you expect to deploy the web app. In early 2019, iOS did not support all features; in that case, you must find another solution, like the appCache missing, which should be used for offline access. You may verify the iOS ‘s full support for Service Workers here.
- The Service Worker does not have access to DOM, it runs on a different scope from the page, it is promise (task) based, and it must run with HTTPS protocol. <<<. May not be true in 2021. >>>
- The PWA offers considerable speed-up for parts of the Web Site including the home page. This can make display of some content out-of-date and this needs to be understood and perhaps mitigated by the Web App programmer.
Developers still seem to favor Native Apps
- Some APIs, like access to the Secure Enclave, (in 2022) are not available to PWAs
- because they have no way to discover the PWA’s
- because some vendors are holding back the web by not allowing certain features (or whole engines for that matter) on their platform.
- Worker at reddit claims they get much higher retention in-app even controlling for things you would expect to confound.
- Data taken from this link
Solution
One solution to these problems is the Progressive Web App ( PWA ). It is all about an app that uses resources from a modern Web Browser to present a similar experience the user would have with native/hybrid apps, but are built using HTML, CSS and JavaScript rather than with the native code for the platform from Apple, Android or Microsoft. (Note that TypeScript may also be used for a Web App, but that just compiles into JavaScript.)
Many web developers already have been creating Web Sites that are well adapted to mobile devices and could already be considered to be constructed to look like Web Apps. The extra work to enable these apps to be registered to display on the user's home screen (i.e. to become a PWA) is not large.
The Progressive Web App is a Web App that has an Web App Manifest, to enable registration with the mobile device, and typically addresses these 10 key concepts, based on Google’s Patterns.[1]
- Safe – It must use the HTTPS protocol to protect the privacy and integrity of the exchanged data.
- Progressive – It must work for all the users, regardless of which browser is used, because the app should be built using progressive enhancement patterns.
- Responsible – It must fit on any screen size: desktop, mobile phones, tablets, etc.
- Internet-free – With Service Worker (background task) technology it is possible to access the application on bad quality connections or even offline.
- App-like – User should have the same experience as any other native/hybrid application; this is because of the app shell model.
- Always up to date – User should not download any updates. Since it is a web site, all the updates must happen in the background.
- Detectable – It must be identified as “application”. Thanks to W3C manifest and a proper Service Worker registry it is possible to allow the search engines to find them.
- Re-engageble – It should increase the engagement by push notification to bring the user back.
- Installable – It must allow the user to create a shortcut on his initial desktop with a personalized icon, without any resources from the store.
- Shareable – It must be easy to be shared with only its URL to anybody and it must keep being easy to install.
Following those patterns, you will ensure that your application works very well, not only when accessed by a browser, but also by a shortcut icon.
PWA does not need any installation, you just need to access the web site and accept the "add to home screen" when indicated. It is not necessary to understand about the development and management of applications as you would for iOS, Android and Windows.
This is enabled by a piece of JavaScript called Service Workers, which is installed by the browser, but runs in a separate thread. And for multiprocessor phones possibly on its own processor. Even with a site running offline, you will be receiving push notifications, geolocation, background updates, interceptions and images cache, JavaScript, CSS files, XHR, etc. This script works by intercepting requests, caching returned content and even handling events. The interaction with the user is sped up even while online because of the local caching.
For Developers
- The biggest advantage for developers is that you can generate a PWA with little more than a script editor. There is no need for a feature-rich developer tool kit and the same code works in all browsers.
- Configuring apps for Google is mostly about how to construct a manifest and service worker.
- Configuring apps for Apple including the apple-touch-icon link to be included in the HTML page.
PWA initiators
- Traditionally PWA were created by web sites that wanted to have some continuing presence on the browser even when the web connection was inoperable. If the web site was accessed, the service worker of the PWA would start up immediately and call out to the web site as needed for updates.
- As new methods are being introduced they are being tracked on the wiki page PWA initiators.
Declarative Links
almost all launch use cases can be covered by a handful of fixed rules (for example, "choose an existing window in the same app, focus it, and navigate it to the launched URL"). Thus, this proposal, "Declarative Link Capturing", allows sites to choose one of those fixed rules without having to implement custom launch event logic, which should satisfy most use cases, and simplify the implementation in the browser and in all the sites.
- explainer is evolving and seems to be settling down by the end of 2021.
References
- ↑ Google, Introduction to Progressive Web App Architectures https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
Other Reference Material
- For secured versions of PWA see the wiki page Isolated Web App.
- The web site Trust Registry for the US is constructed to load as a Progressive Web App.
- The web site App Scope attempts to list the Progressive Web Apps but is always a little bit out of date.
- Progressive Web Apps on Act Minds is helpful for deciding if Progressive Web Apps are for you.
