There are MANY ways to build great Progressive Web Apps, but today I wanted to share an approach that we have been exploring, building PWAs with Web Components based solutions! Specifically, we will be discussing the following technology stack:

• lit-element: Our framework. Lit-element gives us a way to write code that feels remarkably familiar to popular frameworks like React but that compiles down to browser native Web Components with a tiny runtime that provides things such as performant asynchronous rendering.
• Shadow DOM, CSS Variables, Shadow Parts: Modern CSS is incredibly powerful, especially when combining the Shadow DOM, CSS variables and the Shadow Parts APIs. We will discuss how this provides everything we normally were using a CSS pre-processor, but without the extra complication that a CSS pre-processor adds to your build steps!
• Rollup: Rollup is a “bundler” or build tool that will make working with NPM modules easy while also helping ensure our code is ready for production. It allows us to do things such as minify our code, run Workbox (another tool I will introduce next) and other build steps.
• Workbox: Workbox is a tool that makes working with Service Workers easy!
• TypeScript: TypeScript gives us features such as auto complete in our editors that helps make the development process easier, along with being perfect for working in a team because you can provide types for your APIs, making your code almost self-documenting.
• Project Fugu: Project Fugu is an initiative involving Microsoft, Google, Samsung and many others that aims to bring all the capabilities of native apps to the Web! The APIs that this project has already brought to browsers like Edge, such as the Wake Lock API, Web Bluetooth, the File System Access API and more act as our “native toolkit” in this tech stack. The cool thing though is that all of these APIs are built into the browser and work just like any other JavaScript API you may have used, such as the Geolocation API.
• PWABuilder: PWABuilder is there to help you get your PWA store ready and then easily ship your PWA to those stores! We provide easy ways to evaluate the quality (performance, security, Web Manifest content etc) of your PWA, improve if necessary (such as adding screenshots and other necessary content to your Web Manifest) and then easily package your PWA for app stores. For example, with just a few button clicks you can have a package that is ready to ship to both the Google Play Store and the Microsoft Store!

A quick note before we dive into the content: Our goal with sharing this with the community is not to say this is the only way to build web apps, or that it is even the absolute best way to build web apps, instead we wanted to share what works well for us in the hopes that it can help drive your team’s decisions around what works well for you and your application.

Setting our Goals

When you are going to build a new app (of any kind) there are a series of decisions that must be made up front. These decisions normally involve picking a technology stack based on some set of goals for the project. With PWAs this becomes even more important as there are many frameworks, libraries, build tools and more to choose from and these choices can have large impacts on your PWA as you develop it. For example, if loading performance is a key metric for your application then the framework that you choose to build the application in at the beginning can have a significant impact on loading performance farther down the road. For the PWABuilder team our key goals look something like the below:

• Performance: Our current tech stack and codebase produces large bundles which can take seconds to not only load over the network (before our service worker has cached anything) but also to be parsed by the browser, which must happen before code can start executing. This is not only not great for our users, but also is not a shining example of best practices on the web.
• Maintainability: Our current build is made up of multiple tools, a large WebPack config with many plugins, a CSS pre-processor, multiple CSS libraries and utilities, Polyfills, Redux for state management etc. This not only is a large reason of why we have the bundle size issues discussed above but also has had a substantial impact on development speed for the front end as we end up debugging our tooling or codebase more than building the quality features we know developers want. As we have rebuilt our backend over the last year, along with other PWAs we have built outside of pwabuilder.com we have seen that simplicity is key to maintainability.
• Quality: As with any software project, the harder the codebase is to work on, the buggier it tends to be. Because of the above two challenges, we have also had to deal with a fair bit of tech debt. We think with our new focus on simplicity we can move much faster while still maintaining a high level of quality.
• Developer experience: Maintaining a familiar developer experience is also incredibly important to us as it allows both community members and new members on the PWABuilder team to easily jump into the project and understand what is going on.

Based on the above we have found that browser native, Web Components based solutions combined with tooling that is focused on simplicity and sticking to web standards gives us the easiest path to meeting these goals. Let’s dive into the details of this approach!

Web Components? lit-element?

Web Components! How do I build a whole app with them? Don’t I need something like React or Angular to build the app? Let’s answer those questions and more!

What are Web Components?

First, let’s touch on what Web Components are. Web Components are a collection of Web APIs that allow you to build components. You can think of this as the same as components you build with something like React or Angular, but there are some key differences with Web Components. They are currently supported in all browsers besides Internet Explorer.

What is lit-element?

Lit-element is a library / framework that makes it easy to build Web Components. Lit-element gives us a way to write code that feels very familiar to popular frameworks like React but with Web Components. It also includes a tiny runtime that provides things such as performant asynchronous rendering. Also, lit-element is now only one of many Web Components based frameworks / libraries that are available. We also recommend checking out fast-element and Stencil!

Why Web Components?

- Performance

First, components built with either React or Angular are not native components understood by browsers. Because of this, you need to ship a large runtime (the core of both React and Angular) of some sort that can run these components in the browser. Note that this is a basic explanation of how these frameworks work, there are of course many details in the actual implementations, but these details are not truly relevant to our discussion today. This runtime cost is a huge part of the loading performance issues that apps built with these frameworks commonly have.

With Web Components based frameworks you avoid this large runtime cost as the browser natively understands Web Components, but without sacrificing developer experience. This enables frameworks to still ship features such as performant async rendering but without the code associated with just running the components. For example, let's use BundlePhobia ❘ cost of adding a npm package to evaluate the cost of React, Angular and lit-element:

React:

• minified: 121.1 kB
• minified + GZip: 39.4 kB
• Load time on a 3G connection (one of the most common network connections): 0.79s

Angular:

• Minified: 289.9 kB
• Minified + GZip: 88.7 kB
• Load time on a 3G connection (one of the most common network connections): 1.77s

and then lit-element, a Web Components based solution:

• Minified: 23.2 kB
• Minified + GZip: 7.4 kB
• Load time on a 3G connection (one of the most common network connections): 148ms

Lets now compare a Web Component built with lit-element to the same component built with React:

Lit-element:

React:

Based on this, you can see that the developer experience is extremely similar but with a much smaller bundle for the Web Component!

- Maintainability / Stability

Web Components, by their nature of being Web Standards, are inherently going to be more stable than any custom code. For example, the Geolocation API is a web standard and because of this, once it was implemented in a browser it has consistently worked since and we can count on it continuing to work far into the future because of the webs guarantee on not breaking existing websites. There are of course drawbacks with this approach, such as it taking longer for Web Standards to be implemented compared to the React team implementing a new feature in React. However, this is a tradeoff that we feel is fair in return for a good guarantee on long term stability.

Styling with Web Components

Continuing with our Web Standards first approach, modern CSS now has built in APIs / features in browsers that give us all the features we normally use a CSS pre-processor such as SASS for:

- Variables: CSS now has CSS variables! CSS variables work great with Web Components and work extremely similar to variables in SASS.

- Style Encapsulation: Shadow DOM is part of the Web Components spec and helps fix the classic CSS cascade issue. Shadow DOM enables you to encapsulate your styles “inside” of your component, ensuring that CSS elsewhere in your app does not accidentally override CSS in your component. However, using both CSS Variables and the Shadow Parts API we can enable specific pieces of our components to be style-able from outside of the component. This is helpful when you want a component to have certain styles customizable but still have default styles too.

Build Tools

Luckily, by basing the rest of our tech stack on Web Standards it also makes setting up our build tools easy!

Bundler

For our bundling we use Rollup which is described on the Rollup Website as:

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries.

As you can guess, lit-element also uses standard built-in ES modules and because of this it works seamlessly with Rollup! Rollup also runs other tasks that are important for our builds:

• Minification of our code
• Removing console logs
• We use the node-resolve plugin to ensure we can easily use modules from NPM that may not be distributed as an ES module.
• Workbox (covered below)

Workbox (Service Worker)

We use Workbox, which is a tool that makes working with Service Workers easy! Workbox enables you to build fully customized offline experiences for your app while also simplifying many of the complicated parts of Service Workers, such as pre-caching. We also use the Workbox Rollup plugin which makes it super easy to do pre-caching of our assets which not only is a huge part of the offline experience, but also ensures that our PWAs load even faster after the user has loaded the app at least once! Better performance AND an offline experience with only a few lines of code is always awesome!

Project Fugu

Native APIs! This is an area where PWAs (and Web Apps in general) have lacked in the past and because of this we saw the rise of awesome tools such as Cordova, Ionic Native, Electron and more! However, with the rise of Project Fugu web standard PWAs, with no native toolkit of any kind installed and using plain JavaScript APIs, can do almost all the same things a Native app can! For example, in the latest stable Edge and Chrome PWAs can:

• Share and receiving shared content: Using the Web Share API your PWA can tie into the native share UI of the users Operating System. Using the Share Target API your PWA can receive content shared from another app. For example, I can share an image straight from the native Photos app on Windows to a PWA.
• File System Access API: If you have built a hybrid Web App you are familiar with how hard it is to integrate with the file system, but no more! The File System Access API gives you all the functionality native apps have! With a permission grant from the user, you can then read or save changes directly to files and folders on the user’s device!
• Periodic Sync API: This allows PWAs to sync data in the background, just like a native app. This ensures that your users always have the latest data on their device.

And this is just a tiny bit of what's possible! For the full list check the Project Fugu status page! New capabilities status (web.dev)

Get started building a PWA with this tech stack!

If your goals are similar to ours and you want to give this tech stack a try you should check out the PWABuilder pwa-starter . This starter includes everything we discussed above and has everything set to what we think are good defaults. Also, if you are looking for a tutorial feel free to check out this video for a walk through on using the starter.

Alright, that is how we are building PWAs fully with web components! Remember to check out the starter above if this tech stack interests you and please feel free to add any feedback as an issue on the repo. And, once your PWA is ready to go don’t forget to come back to PWABuilder to get your PWA in the app stores! The PWABuilder team is going to be rebuilding PWABuilder with this tech stack for 2021, and we are very excited to show you the results when we are done! The web and the amazing community around it have us excited to see where PWAs go this year!

Building PWAs with Web Components! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Microsoft Store was the first app store to support Progressive Web Apps. PWAs have since become one of the leading ways to distribute apps to users on Windows. However, a lot has changed on the web platform since that original blog post, with modern technologies and APIs such as Web Assembly, Web Bluetooth, Web USB, Web Share, Web Shortcuts, and more enabling developers to ship increasingly advanced apps on the web. Also, Microsoft Edge itself has changed since that original blog post, including the announcement of the new Edge, which uses the the open source Chromium engine. We know that developers are excited to use the full power of the new Edge with their PWAs in the Microsoft Store and because of this, today we are extremely excited to announce the first Preview of the new PWABuilder Windows platform! This significant update enables you to easily start packaging your Progressive Web Apps, using the new Chromium based Edge, for the Microsoft Store!

The benefits of moving to the new Edge

PWAs work great on Windows! As with EdgeHTML PWAs in the store, the new Chromium Edge based PWAs also feel completely native to Windows!

Chromium Edge PWAs run in a Windows of their own, just like any other application on Windows. They also show up in your Start menu (complete with Icons for expanded tiles), in your taskbar(where they are also pinnable just like any other app on Windows) in your Apps & Features settings etc. The user can open your PWA without Edge having to be open and interact with it as they normally would with apps on Windows.

Web Standard APIs

Thanks to contributions from the Edge team and the broader Chromium community, PWAs on Windows can now utilize the latest Web APIs to enable a truly native feeling app. While we previously supported advanced functionality through the UWP APIs, we are now fully embracing Web Standards APIs and ensuring those APIs work great on Windows. Through initiatives such as Project Fugu, we have been able to bring all the common functionality developers used UWP APIs for before to standard Web APIs:

· Shortcuts (previously called Jumplists)

· Protocol handling

· URI handling

· File Type Associations

· Share Target

· Web Bluetooth

· Web Share

· File System Access API

· App Badging

· And many more!

The new Edge also has support for all your favorite web APIs such as Web Components, WebGL 2.0, the Clipboard API and more!

This is only a brief look at the capabilities available in the New Edge but as you can see, by just using standard web APIs your PWA is able to light up on Windows and provide the user with a familiar user experience.

Compatibility

No one likes writing code that is only supported on one browser or platform. Even worse, what if a browser does not support an API that is key to your app experience? While the UWP APIs we previously encouraged developers to use only worked on Windows, these new web standards-based APIs will also run great in the Edge browser, other Chromium based browsers, Android and even ChromeOS!

Always up-to-date

We also know that developers appreciate stable but fast update cycles, and we know that it is key for Edge to stay up to date so that you always have a secure and performant browser experience. Because PWAs in the Microsoft Store will now be using the new Edge, they will be updated with the Edge browser! This ensures that your PWA is always powered by an up-to-date version of Edge. We should also point out that this is a key advantage for PWAs over Electron or Webview based apps, as there is nothing the developer needs to do for their PWA to be running on a an up-to-date version of Edge.

This, along with the fact that your PWA in the store is also always up to date whenever you publish to the web, means that shipping an update to your app just means publishing an updated version to your web server as you would with any website! There is no change or update to the Microsoft Store package necessary, meaning users should always be on the latest version of your app.

Shared State!

Finally, state (such as Cookies, Local Storage, IndexedDB and more) are shared between the Edge browser on the user’s Windows device and your PWA from the Microsoft Store. So, if a user has already logged in to your PWA in your browser, that will extend to your PWA installed from the Microsoft Store.

Devtools make building great PWAs easier!

The PWABuilder team have always been big fans of the Chromium Devtools and we are extremely excited for you to be able to use the new Edge devtools to debug your Microsoft Store PWAs. You get the full Chromium Devtools, including its integrated PWA tooling!

Along with Devtools, we also wanted to give a shout out to edge://inspect! Edge://inspect enables you to easily test your PWA running in Edge on remote devices from your Windows 10 PC. For example, I can use edge://inspect to debug my PWA while it is running on my Surface Duo!

Key Differences from the EdgeHTML package

With the move to this new package, there are some features that worked in the EdgeHTML package that this new Chromium Edge based package is currently missing. These features are:
• No support for Live Tiles
• No splash screen
• Missing Analytics in the Partner Center

This does not mean that these features may never come, or that these features will definitely come, just that they are missing during the preview. We will keep the community updated as we continute to iterate on the preview.

Things to be aware of during the preview

• If your PWA is already in the Microsoft Store using the EdgeHTML package and a user is logged in, the user will need to re-authenticate in the new Edge package.
  • A user needs to have Microsoft Edge installed. If Microsoft Edge is not installed the user will be prompted to install Edge first before installing the app. As we continue our roll-out of Edge, we expect less and less users to hit this.

Now let’s dive into how you can package your PWA with the Preview release of the new Edge package and PWABuilder!

Package your PWA with the Preview release of the new Edge PWA platform!

Note: Prefer a video tutorial? https://www.youtube.com/watch?v=ig78lT6SlNI&feature=youtu.be

Alright, lets walk through how you can use PWABuilder to try the Preview release of this new Edge PWA package for the Microsoft Store! As always, our goal with PWABuilder is to make things as easy as possible, and with enormous amounts of help from the Edge team, we have designed what we hope is straightforward way to package your PWA for the Microsoft Store (and other stores such as Google Play at the same time!).

First, go to https://pwabuilder.com and put in the URL to your PWA. We are going to use https://webboard.app, a PWA I have built, as an example.

Hit start when you are ready and PWABuilder will start analyzing your PWA to make sure it is store ready!

If your PWA is ready you should see the Build My PWA button. Let’s click on that to see our packaging options!

Now that we are here, lets click the download button on the Windows card and we should get the Windows packaging modal.

At this point, you can tap the “Download Test Package” button to quickly test your PWA on your own Windows machine, or tap the “Open Store Options” button to make sure your package is ready to submit to the Microsoft Store.

You are now very close to being ready to submit to the Microsoft Store! All you need to do is fill out the info in the modal shown above, tap Done and finally tap the “Download Store Ready package” button. You now have your PWA packaged for submission to the Microsoft Store! If you need help submitting this package to the Microsoft Store, we have documentation here to walk you through the process.

BONUS: Want to ship your PWA to the Surface Duo too? You can use the Android Platform shown above to package your PWA for the Google Play store, enabling users to install your PWA onto their Surface Duo! This also includes full support for the Dual Screen APIs, enabling your PWA to leverage the full capability of both screens on the Duo!

To test this new package, the PWABuilder team has also published 3 of our own PWAs to the Microsoft Store (and the Google Play Store!) that you can try on your own device!

· Chavah Messianic Radio made by Judah Gabriel also available in the Play Store

· Apple Crusher made by David Rousset also available in the Play Store

· SimpleEdit made by Justin Willis also available in the Play Store

These apps all run on both Windows and Android with the same codebase between the Windows and Android versions, and SimpleEdit also has special support the Surface Duo! With this, PWAs now enable you to ship one app, from one codebase, that runs on both Windows and Android including Surface Duo!

Both the Microsoft Edge and PWABuilder teams are extremely excited to share this Preview of new Edge PWAs in the Microsoft Store with developers today. We are eager to see developers leverage the full capabilities of the new Edge in their PWAs and ship awesome experiences to the Microsoft Store! As you try the preview, please feel free to let us know here if you run into any issues or have any questions. Thanks again!

Bringing Chromium Edge PWAs (Progressive Web Apps) to the Microsoft Store was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

What are we going to build?

Today we are going to build a drawing app! This PWA will feature low latency drawing, work completely offline, have a great Install from the browser experience, and be available both in the browser and the Google Play Store! We will also be using some modern web APIs from Project Fugu where it makes sense to ensure that our PWA feels native to the user.

The PWABuilder pwa-starter

One of the biggest challenges when getting started building anything on the web is choosing your “tech stack”, or what technologies you are going to use to build your app. In the web development world we have a wide range of choices when deciding how to build your PWA, which is great, but can also make it very hard to ensure that you are getting started with the best possible base to build off of. To make this choice easier, https://pwabuilder.com gives you a starter that gives you the tech stack that the PWABuilder team recommends for building great PWAs. That tech stack includes the following:

• lit-element: We chose lit-element as the web framework of choice for this starter as it meets our goals of simplicity and a great developer experience while also exceeding our goals for performance. The developer experience is remarkably like React but also brings all the benefits of using web components, including incredibly small bundle size and fast rendering. PWAs built with lit-element tend to also provide a fast, smooth experience for your users that is easy on memory usage and battery life.
• rollup.js: We chose rollup as the bundler for this starter. We are big fans of rollup because of their focus on making it easy to work with standard es-modules and web standards in general. For example, to lazy load some code with rollup you just use await import(‘my-module’) ,which is web standard syntax for dynamic imports and rollup automatically knows how to bundle this correctly!
• TypeScript: To help make sure that your PWA is easy to maintain over time we chose to use TypeScript as the default. TypeScript also improves the developer experience of lit-element even further by enabling decorators!
• Workbox: We make heavy use of Workbox for our available service workers on PWABuilder and that extends to this starter! The starter comes set up out of the box to use Workbox’s pre-caching service worker. This enables your PWA to work offline, load much faster and requires no extra effort from the developer.

To get a copy of the starter, you can go to https://pwabuilder.com and hit the Get Started button as shown below.

This will give you the option to either grab the starter from Github or download a zipped copy. Once you have the starter, make sure you have Node and npm installed and then just run `npm install` and `npm run dev` to get started developing! This will start up TypeScript and a live-reload enabled dev server so that your changes automatically show up in the browser, ensuring a quick developer experience.

Building the App

Getting Started

Now that we have our dev environment set up, we can start building the app! First, lets get a little more familiar with the codebase. If you look in src/script you will see a `pages` and a `components` folder. The pages folder holds each page in our app and our components folder holds components that we are using across multiple places in the app. Our “root page” in this case is the app-index.ts file. This page acts as the entry point for the app and includes our router configuration, which handles all the navigation in our app. For this app we will need just our home page, so we can leave the default router configuration. Before we leave this file I want to touch on the code-splitting that is built into the starter. In each route object you will see an action function. This action function uses dynamic imports, which are built into the browser, to only import the code for each page when that page is navigated too, ensuring that your app stays fast as it grows in size and complexity.

Before we move on to the next step, the pwa-starter actually already covers 2 of our requirements we set for this app: Working completely offline and having an app store like install experience. For the offline experience, the pwa-starter uses the Rollup Workbox plugin and the PWABuilder pwa-update component which handles making sure your apps assets are cached correctly for offline usage of the app. For the app store like install experience from the browser the starter makes use of the PWABuilder pwa-install component.

Fast, low-latency Inking

With those two requirements out of the way, lets move on to the main functionality of our app; a low-latency, highly performant, full-featured drawing experience! Thanks to PWABuilder, we are going to achieve this with just a few lines of code. For this, lets go back to https://components.pwabuilder.com/ and grab the pwa-inking component. If we tap the “Install Component” on this page and then tap the “with script tag” button in the dropdown the script tag to add this component to our app will be copied to our clipboard.

We can now paste that script tag into our index.html file . Once we have that script tag, we can now use the component.

Note: For more info on installing the pwa-inking component, check this out.

As the docs show, we now just need to add these three lines of code:

to our home page and boom, we now have highly performant drawing experience right in our app! With these couple of lines of code, we now have three of our five requirements for this app done!

Project Fugu

Lets now tackle our fourth requirement, making use of some of the APIs from Project Fugu to enhance the user experience of our app. One API from Project Fugu that makes sense for this app is the Wake Lock API . This API solves a common user experience issue with web apps such as ours, the fact that after some time the users device may go to sleep and shut off the screen, not exactly something we want for a drawing app like ours. Historically, a key user experience feature like this was not possible on the web, but with the awesome work going on in Project Fugu we can now achieve this functionality. Let’s add this method to our home page:

We also need to add the following property:

to our home page. You can read more about properties in lit-element here. We now just need to call the `setupWakeLock` method in the firstUpdated lifecycle method and we are good to go. The wake lock will be released by the browser when the user closes the app. And just like that, our fourth requirement for our app is done!

Deploying your PWA and publishing to the App Stores!

We are now at the point where we are ready to deploy our PWA! For the deployment, we will be making use of Azure Static Web App hosting to deploy our PWA. The PWABuilder pwa-starter includes everything you need out of the box to deploy, so all we need to do is make sure our PWA is in Github and then follow the instructions here. Because we are using Azure Static Web App hosting, this also sets us up to very easily use Azure Functions to build a backend API for our app if we want in the future. At this point we should have our URL, which is all we need for the next step of packaging our app for the Google Play Store!

Google Play Store

Normally, this would be the hardest part of building a PWA. Historically, PWAs have not been able to publish to the Google Play Store and instead strictly relied on the browser for distribution. Recently this changed with the introduction of Trusted Web Activities on Android. Trusted Web Activities give us the opportunity to publish our high quality PWA to the Google Play Store. Because we used the PWABuilder pwa-starter, our app already handles working offline, has a fully filled out Web Manifest and is ready to be published. To learn how to package your PWA with PWABuilder, check out our latest post on this topic, its just a few button clicks!

Microsoft Store

Currently you can also use PWABuilder to package your PWA for the Microsoft Store! All you need to do is choose the Windows platform Instead of the Android platform:

One important thing to note here is that currently, your package for the Microsoft Store will be using Legacy Edge. We realize this is far from ideal and we want to ensure that PWAs in the Microsoft Store work just as well as they do directly in the new Chromium based Edge. Because of this, we are now hard at work on allowing Chromium based Edge PWAs in the Microsoft Store!

And just like that, we have now built a fast Progressive Web App that delivers a great user experience AND even shipped that PWA to the Google Play and Microsoft Store! For another idea to further enhance your PWA, check out our latest post on using PWABuilder to add screenshots to your Web Manifest. Also, we recently released a post that deep dives into the inking experience we used today

Building a drawing PWA with PWABuilder! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

Cool! What is it exactly?

The Components and Demos showcase is a “one-stop shop” for all of the PWABuilder components you may want to add to your PWA, such as the pwa-install component, the pwa-auth component and the pwa-inking component! You can grab the CDN link or npm command to install the component right from the “Install Component” button on each components page, making it quite easy to add these components to your PWA. For example, want an app-store like install experience for your PWA straight from the browser? All you must do is go here and you can quickly grab the component.

Also, we are huge fans of all the new and existing APIs on the web and we wanted a place to show demos using these new APIs, which is the new Demos section in the Showcase! The team and our friends over at Intel have added demos for APIs that the PWABuilder team finds cool and useful, such as the Web Shortcuts API, Picture-In-Picture API, the Background Fetch API, Web NFC and more!

Can I submit my own demo?

Of course! The PWABuilder project is very community driven, so we would love to have your demos on our showcase, all we ask is that your demo shows something new or exciting on the web and is open source! If you would like to submit a demo all you will need is a Github Account and then you can follow the instructions here. Feel free to look at our current demos to get an idea of the metadata you will need. We have tried to make the submission process as easy as possible, but if you run into any issues or have ideas on how it could be improved please feel free to open an issue with us on the repo.

How was it built? Web Components?

Now that we have looked at what the Components and Demos showcase is and talked about how you can submit your own demo, let’s talk a little about how we built the showcase.

As with most of our new stuff on the PWABuilder team, we built the showcase using the PWABuilder pwa-starter. The pwa-starter uses TypeScript, lit-element, and Rollup to enable you to deliver a modern, lightweight PWAs that load instantly, no matter what kind of device or network connection the user has. Because of the combination of TypeScript with lit-element, the pwa-starter provides developers with a familiar development experience. The pwa-starter also includes the pwa-install and pwa-update components to make sure your PWA has that app-like feel right out of the box.

What kind of performance can you expect when building a PWA with the starter?

If you would like to build your own PWA with the PWABuilder pwa-starter just go to PWABuilder and tap the Get Started button!

Thanks for checking out the new Components and Demos showcase from the PWABuilder team! We can't wait to see your demos and we hope that our component help make your PWA even better. Finally, if you do not have a PWA yet make sure to visit PWABuilder to get started on your journey!

The PWABuilder components and demos showcase was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

With initiatives like Project Fugu pushing the capabilities developers need to build full featured, native feeling apps to the web platform, and browsers being faster than ever, it is an amazing time to be building for the Web. Today we are excited to release a bunch of brand-new features and bug fixes for PWABuilder so that developers can take their PWAs to the next level! Also, the PWABuilder team has recently expanded, so we will also introduce our new team members and talk a little about how the project has expanded! Finally, make sure you stick around to the end for a look at some BIG updates we have planned for July.

Update on the team

Over the last year we have seen tremendous growth in the use of PWABuilder and as the PWABuilder project grows we have, of course, expanded the team!

Let me introduce you to the whole team:
• David Rousset: Our team lead
• Killian McCoy: Core developer building web components
• Amrutha Srinivasan: Core developer building backend services and working on the main site
• Rumsha Siddiqui: Core developer working on our platforms
• Jaylyn Barbee: Intern working on a special PWA related project 😉
• Judah Himango: Lead Developer
• Teshe Gebremariam: Core developer working on our backend services and the main site
• Leo Lee: Core developer working on our platforms
• Justin Willis: Core developer working on the main site and building web components

We are all excited to help developers build great Progressive Web Apps and have some great ideas coming up!

Also, we recently started a new YouTube Channel where we plan to host a ton of content over the next few months. We already have a tutorial up on using the PWABuilder pwa-auth component and a tutorial on building a PWA using the PWABuilder pwa-starter up on the channel, make sure you subscribe to get a “heads up” when our latest videos come out! Also, if you are on Twitter make sure you follow the official PWABuilder account for all the latest news in the PWABuilder world! Now, on to all the goodness the new update!

The pwa-inking component

We have heard from developers that creating a fast, low latency inking experience on the web can be a bit of a challenge, but with new web APIs in Edge (and other Chromium based browsers such as Chrome, Samsung Internet and more) such as the low-latency canvas API the web is now more than capable for providing a great inking experience. To make this easy for developers we are excited to release the 0.9 version of the PWABuilder pwa-inking web component! The pwa-inking component, by taking advantage of innovative web APIs such as low latency API mentioned above and pointer events, provides a ready to go, performant inking experience with only a few lines of HTML. It fully supports all input types including Surface Pen’s and the Apple Pencil. Also, for the Surface Pen the component can detect when the user is using the eraser or the pen side and switches modes seamlessly, it's crazy what you can do on the web nowadays! Finally, the pwa-inking component also includes components that provide pre-built common inking tools such as emulating Pencil output, a manual eraser mode, the ability to copy canvas content to the clipboard and the ability to save the canvas as an image!

There is currently a known issue with the pwa-inking component, more info can be found here https://github.com/pwa-builder/pwa-inking/issues/31

Web Shortcuts

With Shortcuts support recently coming to Edge, Chrome and Chrome on Android, your users can now jump into actions in your PWA by right clicking on your PWAs icon in the taskbar on Windows or long pressing your icon on Android, just like native apps on those operating systems! To help you deliver this functionality to your users we updated our Android Trusted Web Activity platform to also support shortcuts along with updating PWABuilder’s manifest builder to support reading shortcuts. As with all our Android work, this support would not have been possible without Bubblewrap, the Google project we use to generate Android packages. For further reading, check out Shortcuts: Trusted Web Activity (TWA) Support. Finally, we have more updates coming here to help make this API even easier to use, so keep an eye out!

There are currently limitations with shortcuts on Android, read more here https://github.com/pwa-builder/CloudAPK/issues/25

Screenshots

While the Web App Manifest has supported screenshots for a while, we noticed many developers were not using this feature. This makes sense, as historically no browser or store has used this feature of the manifest, but because we can use this to enable features such as an app store like install experience for PWAs we wanted to start evangelizing this feature to our community. As we try to do with all things related to PWABuilder, we wanted to make it easy for developers to start using this feature, so we integrated a new screenshots generation service directly into our manifest builder on https://pwabuilder.com. This service automatically generates both desktop and mobile screenshots of your PWA for you, all you need to do is pass any additional URLs to pages of your PWA you want screenshots of. It will then add them to your manifest and can be downloaded.

Note that there are two known limitations with the screenshots service currently that you may run into https://github.com/pwa-builder/pwa-screenshots/issues/2

Components and Demos showcase

We are working to make PWABuilder your “one-stop shop” for when you are building a PWA and to support this goal we are excited to release the new PWABuilder components and demos showcase! This PWA is THE place to try out and get all the web components the PWABuilder team maintains, including our pwa-install component and pwa-auth component. You can also find and install awesome components from the Microsoft Graph Toolkit project, including the tasks component which makes it super easy to pull and display all of a user's tasks from the Microsoft Graph.

Also, along with our web components the web platform itself is growing more every day. We are extremely excited about things like Project Fugu that are helping bring new APIs to the web platform that enable you to build even better PWAs. To showcase our favorite APIs from Project Fugu (and the web in general), we also have the demos section of the showcase where we have a list of demos that we think show off the awesomeness of the web! We want this section to be an inspiration to web developers to make use of these APIs to build PWAs that are deeply integrated with the platform and provide common user experience patterns to your users that they expect traditionally only from native apps.

We also know that a lot of our community are excited about new and exciting APIs on the web and may have demos of your own. Because of that, we are also going to be accepting YOUR demos for inclusion in the showcase! Visit this page in our wiki to learn how to submit your demo, we are excited to see!

Updated pwa-starter

In case you missed it, we recently released the PWABuilder pwa-starter, which helps you get started building a great, fast, PWA from scratch, and tries to make it easy of course! We recently updated the starter to simplify production builds (no more separate index files for dev and prod), simplify our build process (thanks to some awesome build plugins from the open-wc project!), ensure your app loads even faster, which I wasn’t sure was even possible given how fast a PWA built with the starter already load, and ensure that it works seamlessly with the recently announced Azure Static Web Apps hosting service for the best hosting experience.

You’ve made it to the end! We have heard many times from the community, and we agree with you all, that our current Windows PWA platform is not adequate. Because of this, over the next few weeks we will be working with Edge to bring the ability to publish Chromium Edge based PWAs to the Microsoft Store! PWABuilder will be providing the built packages for you that you can then submit to the Microsoft Store. With this update your PWA on Windows will now be running in the new, Chromium based Microsoft Edge even when installed from the Microsoft Store!

Whew, that was a lot to go through, we are more excited than ever for the PWABuilder community to try our all our new features! The team has also put in a ton of bug fixes into this release to ensure that you have a quality experience. Thanks for all the bug reports, ideas etc on our Github. It’s a fantastic way for us to interact with the community, a fantastic way for you to interact with the team and an awesome way for you to help shape the future of PWABuilder! Without the community PWABuilder would not be at where it is today, let us know what you think of this release!

Helping move the web forward, a huge update for PWABuilder! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sidenote: Check out the new PWABuilder YouTube account here, the above is our first video and we are excited to bring you much more content over the next few weeks!

What is it and what do I get?

The PWABuilder pwa-starter is a git repo available through https://pwabuilder.com and as a template repo on Github. To meet our goals of simplicity, performance, developer experience and user experience we chose the following tools to put together in this starter:

• lit-element: We chose lit-element as the web framework of choice for this starter as it meets our goals of simplicity and a great developer experience while also exceeding our goals for performance. The developer experience is remarkably like React but also brings all the benefits of using web components, including incredibly small bundle size and fast rendering. PWAs built with lit-element tend to also provide a fast, smooth experience for your users that is easy on memory usage and battery life.
• rollup.js: We chose rollup as the bundler for this starter. We are big fans of rollup because of their focus on making it easy to work with standard es-modules and web standards in general. For example, to lazy load some code with rollup you just use await import('my-module') ,which is web standard syntax for dynamic imports and rollup automatically knows how to bundle this correctly!
• TypeScript: To help make sure that your PWA is easy to maintain over time we chose to use TypeScript as the default. TypeScript also improves the developer experience of lit-element even further by enabling decorators!
• Workbox: We make heavy use of Workbox for our available service workers on PWABuilder and that extends to this starter! The starter comes set up out of the box to use Workbox’s pre-caching service worker. This enables your PWA to work offline, load much faster and requires no extra effort from the developer.

With these tools the starter also scores very well on Lighthouse, giving you an awesome base to build upon with plenty of headroom for performance and all the best practices included!

The below test is running Lighthouse on WebPageTest on a Moto G4 with a slow 3G connection.

Finally, the starter also comes with our latest PWABuilder web components, pwa-install and pwa-update! The pwa-install component, with two lines of code, brings an app store like install experience to your PWA!

The pwa-update component works with Workbox to provide an awesome update experience for your PWA

These components are included out of the box in the starter and take no extra developer effort.

Finally, if you are looking for an authentication solution, the pwa-auth component from the PWABuilder team also works great in this starter.

How do I get started?

The PWABuilder pwa-starter can be acquired from https://pwabuilder.com and is also available as a template repo on GitHub. The README goes through everything you will need installed on your computer (just Node.js and NPM).

Once you have gotten the starter then all you need to do is run npm install and npm run dev . When you run the dev command it will open the starter in your default browser. As you make changes to your code the starter will also auto-reload, enabling a very quick developer experience. You are now ready to start building your PWA!

Taking things further!

Once you have developed your PWA using the starter you can now go back to PWABuilder and package your PWA for the Microsoft and Google Play store!

We recommend Azure static site hosting or Netlify for deploying your PWA. You will need to deploy your PWA before moving on to the next step.

All you must do is put in the URL to your new PWA, tap Start and then Build my PWA.

You can now choose the Windows or Android cards to package your PWA for the Microsoft and Google Play store. As you can see, we also support the Samsung Galaxy store and MacOS!

We hope you enjoy building PWAs with the new PWABuilder pwa-starter! This is one of our first big steps towards helping developers build PWAs from scratch and we are extremely excited to hear what you all think about it! Let us know what you think or if you run into any bugs on the GitHub repo. We are super excited to see what the community builds!

Building a Progressive Web App with PWABuilder! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is Workbox?

Before we dive into the details of this update, lets first talk about what Workbox is!

Workbox is a JavaScript library that wraps the Service Worker APIs and makes them super easy to build. For example, let’s say we want to cache all the assets in our PWA so that they load when your PWA is opened offline. While this sounds simple at first once you dive in you start to realize its not. For example, do we always want to get the assets from our cache? What if we want to try the network first and fall back to cache? How does this even work? As you can see, this gets complicated quick, but this is where Workbox comes to the rescue! With Workbox, this is what the code looks like to cache our ‘assets’ folder and keep that cache updated:

While this is just one example, Workbox comes with many different caching strategies, and different ways of handling paths and even modules that help you take advantage of more advanced service worker API such as background sync. Check out https://developers.google.com/web/tools/workbox for more info!

Our new Service Workers!

Let’s now dive into our new Workbox based service workers! Once you have entered your URL into https://pwabuilder.com you can then proceed to our new service workers by tapping “Choose a Service Worker”. As you can see, this works the same as it always has, but the service worker code now uses Workbox!

Another change you might notice is that we now have added two new Service Workers; one that takes advantage of background sync and another one for serving cached video and audio! These scenarios have been complicated to set up with our Service Workers in the past, but now all you need to do is just copy/paste some code!

The pwa-update component!

Another factor that has made Service Workers hard to use properly in the past was that there was no default way to notify the user of available updates and offline functionality. Luckily, these are exactly the scenarios that the <pwa-update /> web component was made to handle!

As you might notice from the above screenshots, our registration code snippits for the service workers now import our web component and add it to your app. This is all you need to register your service worker and handle the scenarios I mentioned above! When your service worker has successfully installed the offline toast will be shown, and when an update is available the update toast will show.

Finally, we know that many modern frameworks and libraries provide their own Service Workers or might already use Workbox underneath the hood. Because of this, we made sure that <pwa-update /> can work with any service worker! All you have to do is make sure you update the `swpath` https://github.com/pwa-builder/pwa-update#api to point at your Service Worker and add this bit of code to your Service Worker.

We hope you enjoy our new Service Workers and the <pwa-update /> web component. We have been excited to collaborate with the Workbox team on this update and are excited for you to try it! Also, as always, if you have any feedback or run into any issues always feel free to open a ticket with us on our Github Repo . Thanks!

Making Service Workers easy! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

PWABuilder works everywhere

One of the biggest things the community requested was for PWABuilder to work well on mobile / smaller tablet devices. The PWABuilder project is a large codebase with some challenges that made the design not as responsive as we wanted. In this release we went through and solved these challenges and now we are happy to say that PWABuilder now works great no matter what size device you are on!

Packaging your PWA for Android

While PWAs have traditionally been focused on distribution through the web (and this is a good thing!), users are still used to getting their apps from an app store. Because of this it is important that your PWA is also able to be shipped to an app store, in this case the Google Play Store. Google has enabled this with the introduction of Trusted Web Activities, which enables you to “wrap” your PWA for the Play Store. The only problem here is the complexity involved in packaging your PWA into a Trusted Web Activity(TWA) https://developers.google.com/web/updates/2019/02/using-twa.

Because of this we decided to take a look and see what we could do to make things easy and luckily found that a team at Google was also focused on the same goal with llama-pack! Llama-pack is an awesome tool that handles generating, signing and building your PWA into a TWA, exactly what we were looking for. Judah worked with the llama-pack team to enable us to integrate the tool into our backend and with this release developers can now generate, build AND sign a TWA all without leaving the PWABuilder site. All you have to do is:

Enter the URL to your PWA at https://pwabuilder.com and hit the start button

Tap the `Build My PWA` button and then choose the Android platform.

Tap the download button and PWABuilder will run llama-pack behind the scenes on your PWA and give you a zip folder with everything you need to deploy your PWA to the Google Play store! No Android Studio required, the APK and Cert are in the zip 🎉🎉.

Note: If you are using this to update an existing APK you have already deployed to the Google Play Store you may need to re-sign the APK with your existing key. You can do this in the Google Play console or use the apksigner tool from Google. Also, we will be adding the ability to submit your own key to sign the APK with in the future, so keep an eye out!

Getting that “app-like” user experience

An important part of the Progressive Web App experience is the “app” part. The app like functionality and feel that PWAs strive for is a massive differentiation between “just a website” and a PWA, but is not always easy to achieve.

To make this easy for developers, PWABuilder’s feature store offers a one stop shop for all the web components you need to take your PWA over the finish line:

Want users to easily be able to install your PWA straight from the browser? We have a component for that. Want users to easily be able to login with their Microsoft account? We have a component for that. And all you have to do is copy and paste some code!

Finally, we are huge fans of the web components that the Microsoft Graph Toolkit team is building and wanted to give developers using PWABuilder an easy way to use those components. We now have a special Microsoft Graph category in our store that makes using Microsoft Graph components like the `mgt-login` component as easy as copy and pasting a tiny amount of code.

Let us know how you like the new Android TWA platform and Feature store, I personally love how easy it is to setup Microsoft Account authentication using the Microsoft Graph Login component, and it works great when packaged as a TWA too! We are very excited to see all the energy in the PWABuilder community over the last few months and we have even more improvements coming soon to the project. Keep an eye on our new Twitter account for announcements, thanks!

New PWABuilder release! was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

The one thing that has always separated the web from native is that a native app can be installed by the user, leading to higher engagement with users, while web apps were stuck in the browser. PWAs opened the possibility for web apps to be installed by the user, but we have always been reliant on what the browser provides as an install experience which we have found lacking.

Today, the PWABuilder team is releasing a new Web Component called pwa-install! The pwa-install component takes the standard PWA browser install experience further by using web APIs available in modern browsers to deliver a more app store like install experience for users! Lets dive a little deeper into installing PWAs to understand the challenges this component aims to solve, and then ill show how the component works!

live demo

Installing PWAs

Before we dive into how this component works, I want to cover the existing in-browser install experience.

Mobile

On the mobile side of things, Chrome, Chromium based browsers like Microsoft Edge and Samsung Internet, and Firefox for Android all currently support a basic browser install experience. Let’s look at what this mobile install experience looks like:

As you can see from the above screenshot, when Edge detects that I am using a PWA it will pop up an install banner from the bottom of the screen. If you click that banner Edge will then install the PWA to your device. This is much better than we have ever had on the web and does get the job done, but it is not ideal.

First, this banner does not give the user any more info about the app they are questioned to add to their homescreen. Users are accustomed to seeing descriptions, screenshots, key features and more about an app when they are installing it, which leads to my last point.

Users, especially on mobile, have traditionally gotten all their apps from an app store like Google Play. Because of this, users have come to expect things like an app store experience when they are installing apps, and the current install banner for PWAs does not fill this gap.

Desktop

On desktop we face the same challenges, but I wanted to touch on some UI differences in the desktop version of the install banner we saw on mobile:

On desktop the install banner takes the shape of an install button in the URL bar of the browser. When the user clicks this, they are greeted with a small dropdown that shows the icon of the PWA along with install and cancel buttons.

To review, the main challenge associated today with the install experience for PWAs is a lack of info for the user which then leads to confusion. We’ve even shown this current experience to dev teams and the first comment was wait, what just happened. Luckily though, modern browsers give us some APIs that allow us to tie into this install experience in a basic way, which means we can build a better install experience ourselves!

@pwabuilder/pwainstall 👏👏

The PWABuilder team has been hard at work over the past few weeks and we are excited to announce the <pwa-install /> component! Inspired by our friends over at the Microsoft Graph Toolkit this is a web component built with lit-element. Because this is a web component that means it will work with all your favorite frameworks right out of the box while also being tiny enough that it does not impact your loading performance, the best of both worlds!

The pwa-install component tries to solve the challenges in the install experience we talked about above while also serving as an example of what the browser supplied install experience could look like. This component reads your web manifest and uses that info to display an app store like install screen to the user when they hit an install button:

Oh and did I mention it only takes 2 lines of HTML to use it?

The pwa-install component can also be install from NPM with npm install @pwabuilder/pwainstall

These 2 lines of html take care of loading the component, showing an install button when appropriate and finally, displaying the install screen:

As mentioned above, this component reads your web manifest to know what info to display about your app. We currently use the description, screenshots, theme_color, short_name, name and icons entries to provide all of the info you see in the above screenshot, but these are not required for the component to work which allows you to update your manifest over time with these missing entries.

Before moving on I also wanted to touch on best practices for using this component. To ensure the best user experience for your app, we recommend only displaying this component in a way that is not too distracting for the user. In my PWAs, I have found that the best way to do this is to show the install button is in a header or footer, and possibly only after the user has interacted with the app. This shows the install button for the user, but ensures that the experience of the app is not blocked by the install and that the user is not being spammed with install requests for something they have barely used. As developers of PWAs, we have to remember that not everyone who comes to our PWA in the browser is going to install it the first time, therefore installing should not be a core part of your experience.

Finally, if you are looking for a quick way to generate a quality web manifest, you can use PWABuilder or the PWABuilder VSCode extension. PWABuilder will load your PWA and guide you in creating an awesome web manifest.

Open Source

As with most things we do on the PWABuilder team, this component is completely open source and the source code is available on GitHub. If you have ideas on how to make this component better or are just looking for an inclusive open source community to be a member of, we would love for you to help us build out this component! We currently have a few issues open that would be ideal for a community member to take https://github.com/pwa-builder/pwa-install/issues/1 and would love to have more ideas!

We are excited to release the <pwa-install /> component today! Let us know what you think and keep an eye on the PWABuilder project for more awesome stuff coming out over the next few months!

Installing Progressive Web Apps was originally published in PWABuilder on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today I wanted to share a little bit about a side project that I have been working on called Webboard! Webboard is a whiteboarding Progressive Web App meant to be fast, cross platform and with a focus on ease of use. I started building this app as an excuse to dive deep into the Canvas APIs but realized halfway through that this is a good way to experience the full realm of shipping a “production ready” PWA. Today, I would love to share some of that experience with you in the hopes that it helps you with building your next PWA!

Step one, choose a tech stack

The first thing I do when building any app, including PWAs, is decide which tech stack I would like to use. This step is crucial as it can have a big impact down the road in areas like performance and developer experience.

When I am choosing my tech stack I like to keep a few things in mind, namely:

• What are the performance characteristics of my frontend framework? For example, how large is the bundle size of a starter app in this framework, does it support easy lazy loading etc.
• What is the developer experience for this framework like? For example, I prefer templating using JSX or lit-html style templates (and overall prefer a react style dev experience) but others might prefer the Angular style way of doing templates directly in HTML. This really just comes down to personal preference, but can also have impacts on performance.
• How well “supported” is this framework? When I think of support I dont mean just how active that frameworks developers are on Github, but also what technologies that framework uses and how standard they are to the web. Frameworks built using web standards such as web components are normally much more likely to not break because of future browser changes compared to APIs that are entirely custom to a framework. The browser has to be much more conservative with breaking changes, so web standards will be more stable API wise.

With these things in mind I normally find that one of the newer Web Components based frameworks such as Stencil and lit-element fit my requirements really nicely. For Webboard I ended up choosing Stencil, but lit-element would have worked very nicely as well!

Key Features

Low latency drawing

One of the largest challenges when building an inking experience is latency. Humans are used to seeing a line appear as soon as they drag their pencil/pen across paper, but an inking experience with high latency means that there is a delay between the time a user applies their pen or finger to the screen and that a line actually appears. This degrades the inking experience for the user and therefore traditionally has made it hard to build high quality inking experiences on the web, but this is no longer the situation!

Canvas now supports a desynchronized option that tells the browser to cut out as much of the normal rendering chain as possible so as to get pixels rendered fast. This greatly reduces any latency that would normally come from the compositing process and therefore improves the inking experience for the user.

Deeper integration with the OS

The most exciting thing for me about PWAs is the opportunity they provide for your web app to deeply integrate with the operating system and provide a richer experience for the user. For Webboard this deeper integration was achieved with a few key features.

The first thing I focused on was the install experience. Traditionally native apps have been published in app stores that provided an app listing to advertise/ introduce your app to users but this is something that is currently lacking from the PWA install experience. Because of this I decided to build out my own install experience using the beforeInstallPrompt event that provided an app listing type experience:

I am also investigating packaging this install experience as a standalone web component that anyone could use in their app!

The next thing was taking advantage of some more advanced Service Worker APIs to provide a better offline / slow network experience for users. When building a PWA we have to keep in mind that we are building an app experience, not purely a website experience and there are certain things users expect when they are using an app. One of these things is the knowledge that losing a network connection is not going to break the experience for them. To make sure Webboard works well in this scenario I made use of the background sync API to ensure that boards can be saved to the cloud even if they are created while offline. This also ensures that no work is lost if the connection is lost while making a board.

Finally, one user experience advantage that native apps have traditionally had over web apps is the ability to tie into the native file system on the device, but that is now changing with the new Native File System API! The Native File System API enabled me to build a very smooth experience for saving / writing to boards locally without as many prompts as normally required when using files the traditional way on the web, along with greatly simplifying the code.

Note: the file system feature will only be enabled if webboard detects that the API is supported in the browser its running in. Currently this means Chromium based browsers that have a flag turned on, but this will expand once the API has reached the stable point.

Trying Webboard

Webboard is a PWA which means you can use the app by just visiting this url https://webboard-app.web.app/ ! Webboard can be used on any device with a web browser and works on Windows, Android, Linux, Chrome OS, iOS and macOS. Also, if you are on Android and prefer to get your apps from the Google Play store I have released Webboard as a Trusted Web Activity .

Note: If you have not checked out TWA’s yet I definitely recommend checking them out as they provide a very low friction way to get your PWA in the Google Play Store. PWABuilder makes it really easy to package your PWA as a trusted web activity by clicking the TWA option when downloading the Android package.

Webboard is also completely open source and is available on Github.