Building a Progressive Web App with PWABuilder!
One of the biggest challenges to building a great PWA is choosing a tech stack that allows you to hit all your goals for user experience while also maintaining a great developer experience. There are many web frameworks, build tools and more available today, and this massive amount of options sometimes makes it even harder to find that right tech stack. The catch here too is that if you don't make the right decision up front, it can lead to many a headache down the road; substandard performance, “spaghetti code”, overcomplexity and more. To help guide developers through this decision-making process we are excited to release the PWABuilder pwa-starter! This starter includes everything you need to get started building a production ready PWA with an awesome user experience AND a simple / easy developer experience and is what the PWABuilder team recommends as the best way to get started building a PWA! Let's dive into the details, start a new PWA and, if you stick around to the end, we will package our PWA for the Microsoft and Google Play store!
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!
