{"id":2075,"date":"2022-06-07T08:56:09","date_gmt":"2022-06-07T08:56:09","guid":{"rendered":"http:\/\/magemart.com\/blog\/?p=2075"},"modified":"2022-09-02T11:10:41","modified_gmt":"2022-09-02T11:10:41","slug":"can-pwa-access-hardware-features","status":"publish","type":"post","link":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/","title":{"rendered":"Can PWA Access Hardware Features?"},"content":{"rendered":"<div class=\"blog_detail\">\n<div class=\"para_top\">\n<p>The progressive web app is a buzzword among developers. It is not a new technology. PWA is the best way to improve your online business revenue and increase conversion rates. You can <a href=\"https:\/\/magemart.com\/blog\/6-popular-pwa-frameworks-to-develop-apps-in-2022\/\">build apps with engaging content<\/a> to attract more visitors.<\/p>\n<p>Progressive web apps are websites that deliver app-like features, such as offline functionality, push notifications, etc. Merchants can rip several benefits to expand and improve their business ROI. However, it has limited hardware capabilities. <\/p>\n<p class=\"txt_clr_hl\">\ud83d\udd25 Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features the same as native apps do?<\/p>\n<p>Let us see which features PWA can access or not!<\/p>\n<\/div>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_23 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Understanding_PWA_and_Hardware_Access\" title=\"Understanding PWA and Hardware Access\">Understanding PWA and Hardware Access<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Top_Hardware_Features_PWA_can_Access\" title=\"Top Hardware Features PWA can Access \">Top Hardware Features PWA can Access <\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Camera_and_Microphone\" title=\"Camera and Microphone\">Camera and Microphone<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#GPS\" title=\"GPS\">GPS<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Screen_and_Output\" title=\"Screen and Output\">Screen and Output<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Vibration\" title=\"Vibration\">Vibration<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#Device_Orientation_and_Motion\" title=\"Device Orientation and Motion\">Device Orientation and Motion<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#What_PWA_cannot_still_Access\" title=\"What PWA cannot still Access?\">What PWA cannot still Access?<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#The_Bottom_Line\" title=\"The Bottom Line\">The Bottom Line<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Understanding_PWA_and_Hardware_Access\"><\/span>Understanding PWA and Hardware Access<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\" txt_bck_hl\">Hardware Access means permission to use device features. Mobile applications may ask for permission to access the camera and other features. In the same way, PWA relies on APIs to access hardware features.<\/p>\n<p>But PWA cannot access them as it depends on web browsers. A PWA app can fully function like a native app if your browser supports all Web Application Programming Interfaces ( Web APIs ).<\/p>\n<p>Today, I will share the list of features that PWA can now access, which were previously exclusive to native apps.<\/p>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Top_Hardware_Features_PWA_can_Access\"><\/span>Top Hardware Features PWA can Access <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul class=\"ul_list\">\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Camera_and_Microphone\"><\/span>Camera and Microphone<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"bottom_h4\"> PWAs can access the camera and microphone of devices running Chrome browsers. Besides that, <a href=\"https:\/\/magemart.com\/blog\/how-service-workers-support-pwa\/\">PWA can use advanced features<\/a>, such as shape detection, speech recognition, and other camera controls.\n<\/div>\n<\/li>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"GPS\"><\/span>GPS<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"bottom_h4\">PWA can capture the location using Wi-Fi, GPS, or GSM. All web browsers support GPS features. Users can easily be located using PWA. It allows sending requests to the users to access their geolocation. <\/div>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Screen_and_Output\"><\/span>Screen and Output<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"bottom_h4\">Progressive mobile web apps use <a href=\"https:\/\/www.w3.org\/TR\/webxr\/\">WebXR Device API<\/a> to access augmented reality (AR) and virtual reality (VR) features. You can use more screen features, such as Fullscreen, orientation, and presentation. <\/div>\n<\/li>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Vibration\"><\/span>Vibration<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"bottom_h4\">All modern web browsers support this feature and make it easier for developers to implement. You can use this command: <\/p>\n<p class=\"box_hl\">var vibrate = navigator.vibrate || navigator.mozVibrate;<br \/>\n\/\/ 2-second vibration<br \/>\nVibrate (2000);<br \/>\n\/\/ 2-second vibration next is a half-second pause, and then another 2-second vibration.<br \/>\nvibrate ([2000, 500, 2000]);<\/p>\n<\/div>\n<\/li>\n<li>\n<h5><span class=\"ez-toc-section\" id=\"Device_Orientation_and_Motion\"><\/span>Device Orientation and Motion<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div class=\"bottom_h4\">PWA can also capture the device orientation with the right implementation of API. It can manage the device&#8217;s motion in 3D. These two APIs control orientation and motion:  DeviceOrientationEvent and DeviceMotionEvent.<\/p>\n<p><span class=\"sub_label_bold\">Other Advanced Features that Progressive Websites offers:<\/span><\/p>\n<ul>\n<li>Local Notifications and Push Messages<\/li>\n<li>Able to Schedule Tasks<\/li>\n<li>Can work on Offline mode<\/li>\n<li>Home Screen Installation<\/li>\n<li>Audio and Video Capture<\/li>\n<li>File Access<\/li>\n<li>Inter-App Sharing.<\/li>\n<\/ul>\n<\/div>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"What_PWA_cannot_still_Access\"><\/span>What PWA cannot still Access?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"bottom_h4\">PWAs are built with web technologies that help them gain more potential hardware capabilities. Progressive application technology is growing but a little slow. However, it has some hardware limitations, which are.:<\/p>\n<ul>\n<li><span class=\"sub_label_bold\">System-Level:<\/span>Web applications cannot make all changes at the system level, including system settings, logs, ambient light, etc.<\/li>\n<li><span class=\"sub_label_bold\">Low-level APIs:<\/span>Not all APIs are improved enough to access devices. PWA cannot access hardware features without an API. For example, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_NFC_API\">Web NFC API<\/a> can work on Google Chrome. By using it, websites may face some cyber threats and raise privacy concerns. <\/li>\n<li><span class=\"sub_label_bold\">Contact-Level:<\/span> PWA has the inability to deal with phone calls and SMS\/MMS. It is not an issue for most developers, as a simple Web OTP API should be enough for most use cases.<\/li>\n<\/ul>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"The_Bottom_Line\"><\/span>The Bottom Line<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"final_para\">\n<p>PWA development costs you less than developing a native app. If you have a low budget and want a decent alternative to the mobile app, progressive web apps are the best choice. It can present you with almost all mobile-friendly and responsive features. Also, it offers cross-browser compatibility that reduces the burden of installing it.<\/p>\n<p>If you want to create an app that integrates deeply with the user&#8217;s device, go for mobile apps. For developing apps, you should have enough budget and also business goals.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The progressive web app is a buzzword among developers. It is not a new technology. PWA is the best way to improve your online business revenue and increase conversion rates. You can build apps with engaging content to attract more&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2584,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[322,70],"tags":[147,268,223,143,409,428,429,149,430,431],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Can PWA Access Hardware Features?<\/title>\n<meta name=\"description\" content=\"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Can PWA Access Hardware Features?\" \/>\n<meta property=\"og:description\" content=\"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/\" \/>\n<meta property=\"og:site_name\" content=\"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-07T08:56:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-02T11:10:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Any Atkinson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/magemart.com\/blog\/#website\",\"url\":\"https:\/\/magemart.com\/blog\/\",\"name\":\"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups\",\"description\":\"Magento 2 Blog - Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/magemart.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#primaryimage\",\"url\":\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg\",\"contentUrl\":\"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#webpage\",\"url\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/\",\"name\":\"Can PWA Access Hardware Features?\",\"isPartOf\":{\"@id\":\"https:\/\/magemart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#primaryimage\"},\"datePublished\":\"2022-06-07T08:56:09+00:00\",\"dateModified\":\"2022-09-02T11:10:41+00:00\",\"author\":{\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300\"},\"description\":\"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?\",\"breadcrumb\":{\"@id\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/magemart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Can PWA Access Hardware Features?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300\",\"name\":\"Any Atkinson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/magemart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g\",\"caption\":\"Any Atkinson\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Can PWA Access Hardware Features?","description":"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?","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:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/","og_locale":"en_US","og_type":"article","og_title":"Can PWA Access Hardware Features?","og_description":"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?","og_url":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/","og_site_name":"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups","article_published_time":"2022-06-07T08:56:09+00:00","article_modified_time":"2022-09-02T11:10:41+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Any Atkinson","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/magemart.com\/blog\/#website","url":"https:\/\/magemart.com\/blog\/","name":"Magento 2 Blog - Tutorials \/ Devdocs | Magemart-AheadGroups","description":"Magento 2 Blog - Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/magemart.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#primaryimage","url":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg","contentUrl":"https:\/\/magemart.com\/blog\/wp-content\/uploads\/2022\/06\/63.jpg","width":1200,"height":630},{"@type":"WebPage","@id":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#webpage","url":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/","name":"Can PWA Access Hardware Features?","isPartOf":{"@id":"https:\/\/magemart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#primaryimage"},"datePublished":"2022-06-07T08:56:09+00:00","dateModified":"2022-09-02T11:10:41+00:00","author":{"@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300"},"description":"Native apps can use all device hardware features, such as camera, GPS, Bluetooth, etc. But, can PWA access device features?","breadcrumb":{"@id":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/magemart.com\/blog\/can-pwa-access-hardware-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/magemart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Can PWA Access Hardware Features?"}]},{"@type":"Person","@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/1a93ce9f4356af9a8637e9ee970a4300","name":"Any Atkinson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/magemart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a0a5aa37ea9188eac65d593ca5e6b99?s=96&d=mm&r=g","caption":"Any Atkinson"}}]}},"_links":{"self":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/2075"}],"collection":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/comments?post=2075"}],"version-history":[{"count":12,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/2075\/revisions"}],"predecessor-version":[{"id":2761,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/posts\/2075\/revisions\/2761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/media\/2584"}],"wp:attachment":[{"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/media?parent=2075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/categories?post=2075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magemart.com\/blog\/wp-json\/wp\/v2\/tags?post=2075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}