Manifoldjs is becoming PWA Builder, to simplify building Progressive Web Apps

Jeff Burtoft
Web Dev @ Microsoft
5 min readFeb 14, 2017

When Manifoldjs launched two years ago, our goal was to allow web developers to build standalone web apps across all platforms from a single, standard manifest. As the web platform gains new capabilities and device types continue to proliferate, the industry’s collective vision for the future of web apps is evolving. Progressive Web Apps, widely regarded as the next wave in native-like web experiences, are web content that has functionality and features of desktop or mobile apps. Instead of replacing the web with a native app and going through a tedious installation process, web content gets promoted to app status when the user decides; and the environment allows for it. Progressive Web Apps (or PWAs) use a set of open standard technologies to create an application that is platform independent. One of the most important technologies here is the Web App Manifest, something we supported and promoted very early on. It’s only natural that Manifoldjs expand scope to support PWAs and continue to help Web Apps go beyond the browser.

With this update, Manifoldjs will be renamed PWA Builder. The name will change to fit the technology, but our goal remains to help web developers keep their workflow, while enjoying native aspects of client OSes.

The Goal of PWA Builder

When I look at some of my favorite tools around the web, they all help me do something I can do myself, but better and faster. For example, I can feature detect and polyfill without modernizr, however Modernizr gives me a simple interface to build a targeted set of polyfills with limited overhead. Another example is autoprefixer. I certainly can write CSS prefixes on my own, but since I don’t want to keep up on the ever-changing world of CSS prefixes, I simply write CSS and let autoprefixer keep up on the changes.

MODERNIZR polyfill builder web interface

I want PWA Builder to be used the same way. Like Modernizr, PWA Builder will give you an easy way to provide the missing pieces of your PWA, and not weigh down your site with data you don’t need or use. Like autoprefixes, we’ll track the changes within the specs and browser implementations to make sure you’re building the most up-to-date manifests and service workers. We also have plans for additional tools that will help with other aspects of Progressive Web Apps such as https, responsive design, and touch-friendly interfaces.

Tools to Simplify PWAs

I’ve talked with developers of all levels of experience and I hear consistently that the components that make up PWAs, specifically service workers and the app manifest, can be a challenge to work with. With PWA Builder we’ll be adding a few really great tools to assist developers in transitioning from web sites to Progressive Web Apps:

1.For the Manifest: PWA Builder’s manifest tool will scan your website, and create a full manifest from everything it can see on your site. Even bringing in things like theme color and icons if possible.

2. For your Images: One of the most time consuming parts of manifest authoring is creating the icons object and the different sized icons for each platform. This tool allows you to upload one large image, and we’ll create all the sizes you need.

3. For Service Workers: The Service Worker builder allows you to select the type of functionality you would like to have in your service worker then builds out the file for you to add to your site. The list is short for now, but our goal is to build an extensive list.

4. Packaging: Not every platform or browser runs PWAs, so we continue to provide polyfills for platforms that lack support. We will also be
introducing store submission tools to get your app into the markets that
support PWAs.

Tools will be available in both the CLI form and through our web app.

PWA Support

Progressive Web Apps are still quite new. All browser support some aspects of PWAs (like https) but some of the key technologies like service workers and W3C manifest support are not yet widely supported. The highest support is on later versions of Android. You can track the progress from Google, Mozilla, Opera and Microsoft from their respective sites. Apple has not yet made any public statements on upcoming support.

I want to point out that service workers is currently under development on Windows 10 and Microsoft Edge and we expect to ship preview releases with service workers behind a flag later this year. We believe the addition of service workers to our current implementation of Hosted Web Apps will bring the cross platform, native-like features that characterize Progressive Web Apps. We’re hard at work building a first class Progressive Web App experience in Windows and Microsoft Edge — stay tuned to the Edge developer blog for more updates as this progresses.

Progressive Web Apps allow your site to run as a stand alone app.

Watch us Build

Our developer community will continue to develop Manifoldjs as we also work on PWA Builder. For building production apps, we still need you to use Manifoldjs to build those hosted web apps. However we want to watch the new tool develop. You can try the preview out at:

http://preview.pwabuilder.com

or install it via npm:

> npm install pwabuilder -g

If you are interested in building tools for Progressive Web Apps, we encourage you to join our project! We are an open source project that can only succeed with community support.

Our next step is a stable release which will contain a wider variety of features and even more automation. Keep your eyes open for great things to come as the tools you’ve come to know for building a hosted web app with Manifoldjs expand to support Manifests, Service Workers, and more in PWA Builder!

Follow Jeff Burtoft on twitter @boyofgreen

--

--

Jeff Burtoft
Web Dev @ Microsoft

Principal Program Manager for Web Apps at Microsoft. Blogger, Author, App Builder and developer of Manifoldjs. Lover of all things JS.