\n A progressive web app, or PWA for short, is a web app that uses modern web APIs to enable a true app-like experience delivered over the web. PWAs, through the usage of standard web APIs, can also tie into the same features as any other app on Android and Windows from using the built-in sharing UI all the way to Bluetooth, background data sync, push notifications, and more! Finally, because your PWA is still delivered through the web just like any other web app, you still retain all the benefits of being a web app, such as fast updates and being totally cross-platform. \n<\/p>\n \n While web app functionality may have been limited in the past, with initiatives such as Project Fugu<\/a> from the Chromium community, the list of things PWAs CAN\u2019T do has become much shorter. For example, PWAs on both Android and Windows have access to the following APIs:\n<\/p>\n \n And many, many more! Because of this, we recommend taking a second look if you were not able to achieve certain functionality in the past on the web. Chances are, the web CAN do that now! For example, the SimpleEdit<\/strong> site lets the user take a photo, open a file from the device, and trigger the share sheet. It also uses the CSS media query for screen-spanning<\/a> to make dual-screen layout adjustments<\/a> for Surface Duo.\n<\/p>\n \n Before we dive into how PWABuilder helps you build great dual-screen enabled PWAs and package them for app stores, let\u2019s first discuss why we might want to ship our web app to an app store. First, it is important to remember that because your app is a PWA, your main delivery channel will always be the open web! Every PWA still has a URL (eg. webboard-app.web.app<\/a>) and therefore, your users can still get to your app without having to download the app from an app store. However, it is also important to remember that most users are accustomed to getting their apps from an app store, especially on mobile, and therefore you may be missing out on a large portion of potential users by not being in an app store. This is a big part of the magic of PWAs, with only one app and one codebase you can target a wide range of users on a wide range of operating systems, even if that user prefers to just stay in their web browser!\n<\/p>\n PWABuilder<\/a> is an open-source project from Microsoft that enables you to easily package your PWA for app stores like Google Play and the Microsoft Store. Microsoft also provides a PWA starter kit<\/a> that can make it easier to build high quality, store ready PWAs with a tech stack that the PWABuilder team itself uses to build PWAs. Today however, we are going to focus on the packaging abilities of PWABuilder. Let\u2019s take a PWA I have built, SimpleEdit<\/strong> (available on the web<\/a>) and use PWABuilder to generate both a dual-screen ready package for the Google Play Store and a Windows package for the Microsoft Store.\n<\/p>\n \n And just like that, you can now publish your PWA to Google Play! SimpleEdit<\/strong> is already available<\/a> to install on your Android device:\n<\/p>\n \n For publishing to the Microsoft Store, the steps are very much the same. Check out this tutorial<\/a> for more information on shipping your PWA to the Microsoft Store!\n<\/p>\n \n Here\u2019s the link for SimpleEdit<\/strong> on the Microsoft Store<\/a> for you to try out.\n<\/p>\n \n Source code is available on GitHub for both SimpleEdit<\/a> and webboard<\/a> PWAs mentioned in the post.\n<\/p>\n \n We’re excited to see more web apps come to Surface Duo. Ask questions or tell us about your projects using our feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\n Finally, join us at 11am PST tomorrow on twitch.tv\/surfaceduodev<\/a> to discuss progressive web apps and how you can enhance them for dual-screens and publish to app stores. You can also check out past streams on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello web developers, We’ve posted previously about using dual-screen media queries and JavaScript to adapt web apps for Microsoft Surface Duo. Today\u2019s post is about how you can use those dual-screen capabilities in your progressive web app (PWA) and deploy to both the Google Play Store AND the Microsoft Store using PWABuilder! We\u2019ll share a […]<\/p>\n","protected":false},"author":56669,"featured_media":1476,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[412,716,530],"class_list":["post-1466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-javascript","tag-progress-web-apps","tag-web"],"acf":[],"blog_post_summary":" Hello web developers, We’ve posted previously about using dual-screen media queries and JavaScript to adapt web apps for Microsoft Surface Duo. Today\u2019s post is about how you can use those dual-screen capabilities in your progressive web app (PWA) and deploy to both the Google Play Store AND the Microsoft Store using PWABuilder! We\u2019ll share a […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/56669"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1466"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1476"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/simpleedit-web-800.png\")
<\/a>Figure 1: Screenshot of the SimpleEdit website being used on Surface Duo<\/em>\n<\/p>\nWhat is a progressive web app?<\/h2>\n
But wait, what if web apps can\u2019t do something my app needs? <\/h2>\n
\n
Web and app stores?<\/h2>\n
How to use PWABuilder<\/h2>\n
\n
\n ![\"Input](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/pwa-image-3.png\")
<\/a>\n<\/li>\n
\n ![\"Build](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/pwa-image-4.png\")
<\/a>\n<\/li>\n
\n ![\"Android](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/pwa-image-5.png\")
<\/a>\n<\/li>\n
\n ![\"Choose](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/word-image-6.png\")
<\/a>\n<\/li>\n
\n ![\"README](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/word-image-7.png\")
<\/a>\n<\/li>\n<\/ol>\n![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/04\/simpleedit-pwa-800.png\")
<\/a>Figure 2: Screenshot of SimpleEdit as a progressive web app on Surface Duo<\/em>\n<\/p>\nPublishing for Windows<\/h2>\n
Resources and feedback<\/h2>\n