{"id":57893,"date":"2021-10-27T18:01:16","date_gmt":"2021-10-27T10:01:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=57893"},"modified":"2021-12-02T21:18:49","modified_gmt":"2021-12-02T13:18:49","slug":"progressive-web-apps-explained","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/","title":{"rendered":"A Guide to Progressive Web Applications"},"content":{"rendered":"<p>Every business has a website or native <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/mobile-apps\/\">mobile app<\/a>, or even both. However, websites are limited in functionality, and native app development requires significant investment. So, where is the golden mean? The answer is <a href=\"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-future-of-modern-web\/\">Progressive Web Apps<\/a> (PWA). They cost less than native apps but support features like push notifications, offline mode, and others.<\/p>\n<p>This post will explain what PWA websites stand for, their core benefits, and what technology to use to turn a regular website into a progressive web app.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps\/\" class=\"ref-block__link\" title=\"Read More: An Introduction to Progressive Web Apps\" rel=\"bookmark\"><span class=\"screen-reader-text\">An Introduction to Progressive Web Apps<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/progressive-web-apps.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-30112 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/progressive-web-apps.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">An Introduction to Progressive Web Apps<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tMost developers have at least heard some buzz around Progressive Web Apps. These are widely supported by tech...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The Meaning of Progressive Web Apps (PWA)<\/h2>\n<p>Progressive web applications are one of the types of web application architecture that developers use to implement the client- and server sides of the product. They <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/pulse\/importance-benefits-pwas-businesses-krunal-vyas\">stand for websites<\/a> that deliver an experience indistinguishable native apps.<\/p>\n<p>They can be installed like native mobile applications, work without connection, interact with the device camera, or receive push notifications. Moreover, PWAs offer much better distribution than app stores and don\u2019t take a tidbit of your revenue.<\/p>\n<p>When progressive web apps first hit the scene in 2015, they were available on Android. Later, in 2018 they were accessed by iOS users.<\/p>\n<p>Alex Russell, a Google software developer, who introduced the PWA term, says: PWAs are just websites that take all the right vitamins.<\/p>\n<p>Progressive web applications are written to run on different browsers, so programmers use HTML, CSS, and JavaScript to make PWAs. If the users open PWA on a desktop browser, it will look like a traditional website. But in the mobile browser, they will experience native app features.<\/p>\n<h2>How PWA work?<\/h2>\n<p>When users are on a PWA website, they encounter a pop-up requesting to install the app on their smartphone. After the user installs the PWA, the app icon appears on the home screen. When a user opens a progressive web app, the browser will open a new window instead of a new tab.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg\" alt=\"1-pwa-pop-up\" width=\"800\" height=\"620\"><\/figure>\n<p>After it\u2019s installed, PWAs make a website cache. This contributes to increased speediness and offline availability.<\/p>\n<p>When using PWA on Android, users can experience almost all native app features, including payment, NFC, fingerprint authentication, speech recognition, and more.<\/p>\n<p>However, additional APIs are required to make the device\u2019s features available on PWA (e.g., NFC API, Bluetooth API, Geolocation API, etc.). Moreover, if you decide to place the PWA to Google Play, you\u2019ll need <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.pwabuilder.com\/posts\/building-pwas-with-web-components!\/\">PWABuilder<\/a>.<\/p>\n<p>The situation slightly differs for iOS users, though. Apple focuses more on native app development rather than progressive app one. It doesn\u2019t mean that PWAs don\u2019t run on iOS; there are only some limitations. For instance, Safari (Apple\u2019s browser) doesn\u2019t support PWA\u2019s push notifications.<\/p>\n<h3>Core Benefits of PWAs:<\/h3>\n<ul>\n<li>They can be added to the home screen without app marketplaces.<\/li>\n<li>Speedy, work in offline mode, support push notifications.<\/li>\n<li>Background sync availability when the user interacts with the app.<\/li>\n<li>They don\u2019t use URLs to provide a full-screen experience.<\/li>\n<li>Served via HTTPS to guarantee the security of private data.<\/li>\n<\/ul>\n<h2>How Businesses Can Benefit From PWAs<\/h2>\n<p>One of the core benefits of PWAs is their price. So even if you already have a website, you\u2019ll still spend less time and money to turn it into a progressive web app.<\/p>\n<p>Let\u2019s discuss the other advantages of PWAs:<\/p>\n<ul>\n<li><strong>It can be installed without Google Play or App Store.<\/strong> Progressive web apps don\u2019t need to be published on app marketplaces. Thus, you don\u2019t need to wait for their approval to promote your product to the customers or release a new version. Besides, you don\u2019t need to pay a fee of 30% to marketplaces.<\/li>\n<li><strong>Fast to develop.<\/strong> There is no need to create applications for different platforms or adjust the native code (if you want to build a Flutter-based app). PWAs work on iOS and Android, interact with various devices, and many features of native mobile applications can be implemented on Android.<\/li>\n<li><strong>Push notifications.<\/strong> For instance, using Google Duo PWA, a video calling app, users can receive a message to approve the call when their friends call them on Duo. Push notifications work for Windows, macOS (except Safari), Linux, and ChromeOS.<\/li>\n<li><strong>Easier to release updates.<\/strong> Users don\u2019t need to upgrade the app each time the new version is released. There are always up-to-date solutions available. PWAs allow companies to deal with software fragmentation when some users use the old product version while others use the new one. Previously, software engineers had to maintain the old version of applications to avoid losing a bulk of clients until they released the update.<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/2-Companies%20that%20adopted%20PWA.jpeg\" alt=\"2-Companies that adopted PWA\" width=\"800\" height=\"550\"><\/figure>\n<p>Companies like Starbucks, Uber, Tinder, Forbes, Pinterest had already <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pwastats.com\/\">gained<\/a> from PWA implementation. For example, Starbucks increased daily active users 2x. Orders on desktops are almost the same as on mobile apps. Pinterest has noted a 40% increase in time spent on the website. Tinder reduces load time from 11 to 4.69 seconds.<\/p>\n<h2>Tools Needed To Create a Progressive Web App<\/h2>\n<p>Progressive web applications don\u2019t require particular frameworks or any other development tool. PWA is a technology that can be implemented after completing some project requirements.<\/p>\n<p>In order to convert a traditional website into a progressive web app, you\u2019ll need to add a manifest.json file and a service worker.<\/p>\n<h3>Service Worker<\/h3>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/learn\/pwa\/service-workers\/#:~:text=the%20Service%20Worker-,What%20is%20a%20service%20worker%3F,cache%2C%20and%20delivering%20push%20messages\">Service worker<\/a> is a PWA technique that is utilized for resource caching and push notifications. It\u2019s a programmable mediator between your web app and the real world that gives you control over network queries.<\/p>\n<p>For instance, you can manage the caching behavior of queries, handle push notifications, enable offline mode and background synchronization.<\/p>\n<h3>Push messages<\/h3>\n<p>Since service workers\u2019 files run separately from the core browser, they don\u2019t depend on the connected app. That\u2019s why users can get notifications from a server when the web app is offline.<\/p>\n<h3>Offline mode<\/h3>\n<p>The server worker holds the resources for the app, allowing for retrieving data when the users are offline. The server refreshes dynamic content (images, videos, payment history, etc.) when the Internet connection is renewed. Users\u2019 actions on the page are delayed until the connection is stable.<\/p>\n<p>Let\u2019s say a user wants to send a message via PWA messenger. The website is still running; a message history is accessible. But they need Wi-Fi to complete the action \u2013 send and get a message.<\/p>\n<h3>Background syncs<\/h3>\n<p>When users have a website and Internet connectivity, they can fulfill different actions such as sending messages or making a transaction. Which you already know.<\/p>\n<p>The problem is when users don\u2019t have an Internet connection. In this case, they still have access to the app, but they can\u2019t continue working with the application. The service worker stores the information while customers are offline.<\/p>\n<p>Here is the picture of how progressive web applications interact with server workers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/3-pwa-interaction-server.jpeg\" alt=\"3-pwa-interaction-server\" width=\"800\" height=\"458\"><\/figure>\n<h3>Manifest File<\/h3>\n<p>Manifest implies a JSON file that determines the main PWA\u2019s parameters.<\/p>\n<p>Using the manifest, software engineers can control the following:<\/p>\n<ul>\n<li>How progressive web applications are launched<\/li>\n<li>The way the application is demonstrated to users (app\u2019s design)<\/li>\n<li>Can the app be added to the mobile home screen?<\/li>\n<\/ul>\n<p>The picture below shows what PWAs can do with the manifest file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/4-pwa-manifest-file.jpeg\" alt=\"4-pwa-manifest-file\" width=\"800\" height=\"620\"><\/figure>\n<h2>Summing Up<\/h2>\n<p>As you can see, progressive web applications bring significant advantages to all service-based businesses due to their usability and cost. They are easy to design, thus, budget-friendly. Even though such software solutions have some feature restrictions, especially for iOS users, they are still a good option to start with or extend your current website.<\/p>","protected":false},"excerpt":{"rendered":"<p>Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires significant investment. So, where is the golden mean? The answer is Progressive Web Apps (PWA). They cost less than native apps but support features like push notifications, offline mode, and others. This&hellip;<\/p>\n","protected":false},"author":497,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[4551],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Guide to Progressive Web Applications - Hongkiat<\/title>\n<meta name=\"description\" content=\"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to Progressive Web Applications\" \/>\n<meta property=\"og:description\" content=\"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-27T10:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-02T13:18:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg\" \/>\n<meta name=\"author\" content=\"Vitaly Kuprenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vitaly Kuprenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/\"},\"author\":{\"name\":\"Vitaly Kuprenko\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/879e9322b9bc0492bf044a686197dc78\"},\"headline\":\"A Guide to Progressive Web Applications\",\"datePublished\":\"2021-10-27T10:01:16+00:00\",\"dateModified\":\"2021-12-02T13:18:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/\"},\"wordCount\":1245,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-web-apps-explained\\\/1-pwa-pop-up.jpeg\",\"keywords\":[\"Progressive Web Apps\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/\",\"name\":\"A Guide to Progressive Web Applications - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-web-apps-explained\\\/1-pwa-pop-up.jpeg\",\"datePublished\":\"2021-10-27T10:01:16+00:00\",\"dateModified\":\"2021-12-02T13:18:49+00:00\",\"description\":\"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-web-apps-explained\\\/1-pwa-pop-up.jpeg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/progressive-web-apps-explained\\\/1-pwa-pop-up.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/progressive-web-apps-explained\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to Progressive Web Applications\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/879e9322b9bc0492bf044a686197dc78\",\"name\":\"Vitaly Kuprenko\",\"description\":\"Vitaly is a technical writer at Cleveroad, a web and mobile app development company in Ukraine. He enjoys writing about tech innovations and digital ways to boost businesses.\",\"sameAs\":[\"https:\\\/\\\/www.cleveroad.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/vitalykuprenko\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide to Progressive Web Applications - Hongkiat","description":"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to Progressive Web Applications","og_description":"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires","og_url":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-10-27T10:01:16+00:00","article_modified_time":"2021-12-02T13:18:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg","type":"","width":"","height":""}],"author":"Vitaly Kuprenko","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Vitaly Kuprenko","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/"},"author":{"name":"Vitaly Kuprenko","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/879e9322b9bc0492bf044a686197dc78"},"headline":"A Guide to Progressive Web Applications","datePublished":"2021-10-27T10:01:16+00:00","dateModified":"2021-12-02T13:18:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/"},"wordCount":1245,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg","keywords":["Progressive Web Apps"],"articleSection":["UI\/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/","url":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/","name":"A Guide to Progressive Web Applications - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg","datePublished":"2021-10-27T10:01:16+00:00","dateModified":"2021-12-02T13:18:49+00:00","description":"Every business has a website or native mobile app, or even both. However, websites are limited in functionality, and native app development requires","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/progressive-web-apps-explained\/1-pwa-pop-up.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/progressive-web-apps-explained\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to Progressive Web Applications"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/879e9322b9bc0492bf044a686197dc78","name":"Vitaly Kuprenko","description":"Vitaly is a technical writer at Cleveroad, a web and mobile app development company in Ukraine. He enjoys writing about tech innovations and digital ways to boost businesses.","sameAs":["https:\/\/www.cleveroad.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/vitalykuprenko\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-f3L","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/497"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=57893"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57893\/revisions"}],"predecessor-version":[{"id":57939,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/57893\/revisions\/57939"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=57893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=57893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=57893"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=57893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}