{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Progressive Web Applications, Part 1: the New Pack Mule of the Internet |Digital.gov",
    "description": "Progressive Web Applications, Part 1: the New Pack Mule of the Internet",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/09/20/progressive-web-applications-part-1-the-new-pack-mule-of-the-internet/index.json","item" : [
    {"title" :"Progressive Web Applications, Part 1: the New Pack Mule of the Internet","summary" : "A mule is the hybrid offspring of a male donkey and a horse. This new species is stronger and better equipped than the species from which it comes. Overall, mules tend to be healthier, more sound, and live longer than horses. They are favored over horses in mountainous terrain because the mule has a reputation for being more surefooted than their equine cousins.","date" : "2016-09-20T11:00:19-04:00","date_modified" : "2025-01-27T19:42:55-05:00","authors" : {"david-fern" : "David Fern"},"topics" : {
        
            "content-strategy" : "Content strategy",
            "design" : "Design",
            "innovation" : "Innovation",
            "mobile" : "Mobile",
            "product-and-project-management" : "Product and project management",
            "software-engineering" : "Software engineering",
            "user-experience" : "User experience"
            },"branch" : "bc-archive-content-3",
      "filename" :"2016-09-20-progressive-web-applications-part-1-the-new-pack-mule-of-the-internet.md",
      
      "filepath" :"news/2016/09/2016-09-20-progressive-web-applications-part-1-the-new-pack-mule-of-the-internet.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/news/2016/09/2016-09-20-progressive-web-applications-part-1-the-new-pack-mule-of-the-internet.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/news/2016/09/2016-09-20-progressive-web-applications-part-1-the-new-pack-mule-of-the-internet.md","slug" : "progressive-web-applications-part-1-the-new-pack-mule-of-the-internet","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/09/20/progressive-web-applications-part-1-the-new-pack-mule-of-the-internet/","content" :"\u003cp\u003eA mule is the hybrid offspring of a male donkey and a horse. This new species is stronger and better equipped than the species from which it comes. Overall, mules tend to be healthier, more sound, and live longer than horses. They are favored over horses in mountainous terrain because the mule has a reputation for being more surefooted than their equine cousins. Finally, mules do not require expensive grains, eat less and don’t tend to overeat as horses do.\u003c/p\u003e\n\u003cp\u003eProgressive Web Applications are the new hybrid mules of the Internet!\u003c/p\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2016/09/600-x-400-Pack-Mule-cartoon-toonerman-iStock-Thinkstock-454943937.jpg\"\n    alt=\"A cartoon illustration of a pack mule.\"/\u003e\u003cp\u003etoonerman/iStock/Thinkstock\u003c/p\u003e\u003c/div\u003e\n\n\n\u003ch2 id=\"what-are-progressive-web-applications-pwa\"\u003eWhat Are Progressive Web Applications (PWA)?\u003c/h2\u003e\n\u003cp\u003eWith PWAs (again, think hybrid mule), developers take the best of native applications and the best of Web applications, and combine them into a “new” and “better“ user experience. As mobile devices became more popular, the choice has been native or web mobile applications, with the goal being to create the best user experience at an acceptable price.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eNative Applications\u003c/strong\u003e – Designed in a native language for a single operating system, native apps are the most customizable and take advantage of the device’s hardware, (the device’s “native” features) with high performance. However, mobile native applications are expensive to build, test and support as they are OS- and (in many cases) device-specific and are often required to be released through an app store.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWeb Applications\u003c/strong\u003e – Web apps are built to be used in a common browser and delivered in real time via the Internet. They are built using standard HTML, CSS and JavaScript. However, they have limited access to a device’s features, such as the camera and GPS. Additionally, network performance can adversely affect the application’s performance, and there are user interface limitations due to HTML/CSS/JavaScript.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eProgressive Web Applications\u003c/strong\u003e – PWAs have been able to take the best of both worlds and combine them into a hybrid application that is fast (with or without a fast network connection), can work across devices, and does not need to be distributed through a store as it is as linkable and shareable as a web page.\u003c/p\u003e\n\u003ch2 id=\"how-do-pwas-work\"\u003eHow do PWAs Work?\u003c/h2\u003e\n\u003cp\u003ePWAs can be thought of as a single web page or a set of web pages that are rendered on a device browser using common Web technologies such as HTML, HTML5, CSS3, media queries, and JavaScript that simulate the retrieval of data from a mock API, all in a shell like architecture. To make the application appear as a native application experience, a Web manifest is used to describe the application, and a service worker is used similar to the cache, keeping the pages up to date on the device.\u003c/p\u003e\n\u003cp\u003eThe best analogy for a PWA was given by Aaron Gustafson, where he compared it to a peanut M\u0026amp;M (a self-contained unit) with the peanut being the content, the chocolate coating the presentation layer, and the JavaScript is the hard candy shell that comes in different colors and is experienced differently depending on the browser used.\u003c/p\u003e\n\u003cp\u003eThese three components create a browser wrapper for PWAs:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003ePeanut/Content\u003c/strong\u003e – This is the core Web HTML page content.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eChocolate/Presentation\u003c/strong\u003e – This is the middle tier that contains the CSS\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eHard Candy Shell/Client Side Scripting\u003c/strong\u003e – JavaScript that works with the service worker to increase speed, loading times, and functionality to create the user experience.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2016/09/600-x-400-Sweet-candy-AppleZoomZoom-iStock-Thinkstock-496973541.jpg\"\n    alt=\"Peanut M\u0026amp;M candies.\"/\u003e\u003cp\u003eAppleZoomZoom/iStock/Thinkstock\u003c/p\u003e\u003c/div\u003e\n\n\n\u003cp\u003eTo pull the PWA together we need to add in the service worker and the web App manifest.\u003c/p\u003e\n\u003ch3 id=\"the-service-worker\"\u003eThe Service Worker\u003c/h3\u003e\n\u003cp\u003eThe key to PWAs is the service worker, a JavaScript background task that replaces the traditional web cache with a cache API. The API wakes up when needed and listens to network requests and saves or caches the static resources from the visited sites. This enables the PWA to function even when offline, making the app “always available.”\u003c/p\u003e\n\u003cp\u003eTo save these resources, the Web page registers the service worker with the browser; then, the web page no longer goes to the web server but instead goes to the service worker for updates. Additionally, the service worker responds to push notifications from the Web Server and maintains cached data to the application.\u003c/p\u003e\n\u003ch3 id=\"the-web-app-manifest\"\u003eThe Web App Manifest\u003c/h3\u003e\n\u003cp\u003eThe Web Application Manifest is a JSON script that makes it possible for the Web application to assign a home screen icon, theme and background color to the app, define a \u003ca href=\"https://developers.google.com/web/updates/2015/10/splashscreen?hl=en\"\u003esplash screen\u003c/a\u003e, and run the web app in full-screen mode as a standalone application.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eIn the coming weeks, we’ll explore some of the \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/2016/10/13/progressive-web-applications-part-2-pros-cons-and-looking-ahead/\"\u003ebenefits and challenges of using PWAs\u003c/a\u003e and some real world examples. Stay tuned!\u003c/em\u003e\u003c/p\u003e\n"}
  ]
}