Tag Archives: Progressive Web Apps

Microsoft Edge at Build 2017

Last week, Microsoft welcomed thousands of developers from around the world to Build 2017, where we shared our vision for the future of dozens of products and services. Build featured a number of exciting sessions for developers building sites and apps with web technologies, including a peek at what’s coming to the web platform beginning with EdgeHTML 16 the Windows 10 Fall Creators Update.

In this post, you’ll find a quick review of the web developer sessions at Build 2017. If you see something you’d like to learn more about, dive into the recording to get all the details!

What’s new and what’s next for the web on Windows

In this session, Kyle Pflug and Nadia Fortini take you on a whirlwind tour of what’s new in Microsoft Edge in EdgeHTML 15, and share a roadmap for our priorities in upcoming releases of Microsoft Edge.

You’ll learn about new features like Payment Request for standardized checkout experiences, WebVR for immersive mixed reality experiences built with immersive web technologies, and dramatically improved responsiveness and battery life. We also cover upcoming APIs in development for future releases, including an updated CSS Grid implementation, Service Worker and other features that enable Progressive Web Apps, and much more.

Screen capture showing Fluent Design in Microsoft Edge. The use of materials like Acrylic allows elements of the background to influence the color and texture of the browser frame.

This session also shows an early look at upcoming changes to the design and personality of Microsoft Edge, as the new Fluent Design System begins to make to the browser beginning with the Windows 10 Fall Creators Update. Fluent Design brings depth, motion, and personality to the controls and browser frame in Microsoft Edge, allowing elements of the page and background to influence the color of the browser window.

Progressive Web Apps on Windows

In this session, Aaron Gustafson introduces Progressive Web Apps, a new vision for the future of web apps enabled by groundbreaking technologies like Service Worker, which will be coming to preview builds of Microsoft Edge for developer testing this summer.

You’ll learn how Progressive Web Apps enable world-class, cross-platform, native-like apps, build on web technologies and hosted on your own server. PWAs can work offline, update content in the background even when the browser or the app is closed, and intercept network requests to update content from a cache when the network is unavailable.

This session details how we will a first-class web app ecosystem on Windows by ingesting high-quality PWAs from across the internet, and making it easy for developers to participate in the Windows Store alongside native apps with no extra effort, using tools like Web App Manifests and PWABuilder.

WebVR: Immersive Mixed Reality powered by web technologies

In this session, David Rousset and Etienne Margraff describe how EdgeHTML 15 on the Windows 10 Creators Update enables any web developer to build an immersive mixed reality experience with Microsoft Edge, Windows Mixed Reality, and the WebVR 1.1 API.

Modern frameworks like Babylon.js and A-Frame make it easy to get started building WebVR experiences using familiar web technologies. Developers can get started today even without a headset using the Windows Mixed Reality Simulator.

Better checkout experiences with the Payment Request API

In this session, Molly Dalton, Stan Change, and Jonathan Cutler provide an in-depth look at the new Payment Request API, which allows you to build standardized, cross-browser checkout experiences on the web and in apps. Payment Request dramatically simplifies checkout by leveraging a payment app – in this case, the browser – to store and provide payment and shipping details, so your customers can enjoy less friction and a more delightful user experience.

Payment Request works in EdgeHTML 15 as well as in UWP apps, apps packaged with the Desktop Bridge, and the Microsoft Bot Framework, allowing you to build a faster and easier checkout experience across a variety of devices and platforms.

What’s new in ChakraCore

In this session, Brian Terlson gives an overview of what’s new in Chakra – the open-source JavaScript engine that powers Microsoft Edge and Windows 10.

You’ll learn about the near-native performance enabled by experimental WebAssembly support in Microsoft Edge, and exciting new emerging tools like Time Travel Debugging. You’ll also learn about Chakra’s journey to other operating systems, and the work we’ve been doing with the Node.js core project to help solve key problems like providing a stable Node API for native module developers.

Get started today

Many of these new APIs – including WebVR 1.1, Payment Request, CSS Custom Properties, and more – are available and on by default in Microsoft Edge on the Windows 10 Creators Update, which is available now. To get started with experimental features like WebAssembly, you can simply navigate to about:flags in Microsoft Edge.

To make it as easy as possible to get started, we’ve partnered with BrowserStack to provide instant, free testing of Microsoft Edge from any device. You can test the latest stable and preview releases of Microsoft Edge, and even test localhost or using WebDriver.

We look forward to sharing more about upcoming features soon as they make their way to the Windows Insider Program. In the meantime, check out the Build sessions, and let us know what you think!

Kyle Pflug, Senior Program Manager, Microsoft Edge

Next-generation web apps for education

Just a short time ago, the new Microsoft Intune for Education was announced for teachers and technologists to manage devices, accounts, and apps for students. Since that time, we’ve heard from a number of developers and app publishers who work in education, who have questions about how their apps can take full advantage of this new system.  For those app builders who are already publishing their apps on the web (and there are a lot of them!) we have a great solution today – and it’s about to get a lot better.

In Windows 10, we introduced the concept of “Hosted Web Apps” – applications which serve your web content from your server, outside of the context of the browser and with both a native feel and access to native capabilities. Now, we’re excited about what’s coming next for web apps: Progressive Web Apps (PWAs). Together with other browsers and the web community, we’re working on enabling the next wave of native-like web experiences, where web content can have the essential capabilities and user experience of native desktop or mobile apps. These web apps can start up instantly, can run in the background and have additional APIs available for developers.  With Progressive Web Apps, web content gets promoted to app status when the user chooses and the environment allows for it.

Screen capture showing http://jig.space open in Microsoft Edge and as a native app on Windows 10

JigSpace is a platform for creating and sharing interactive, 3D instructions for anything. It’s simple, powerful and is available on desktop and mobile at http://jig.space, and can be ran as an app or in the browser.

The component technologies that make up PWAs are in development or supported on most browser platforms today. Additionally, Google has begun requiring Chrome apps to migrate to PWAs in order to remain accessible in Chrome, so there’s never been a better time for education-focused web apps to make the transition to a full PWA experience.

How to Write a Progressive Web App

Before migrating to a PWA you should make sure that your site is cross-browser compliant. Browser makers have gone to great lengths to make sure the rendering delta between browsers is small, but you’ll still want to make sure your app runs in all browsers before moving to a PWA.

To create a PWA you need to define your web project as an application. In the past, you’ve done this with a manifest file and image assets.  The problem was that each platform (like Chrome Apps and Windows Apps) had different manifest formats and asset requirements. PWAs require those same components, but standardize them so you build the app once and run it across all platforms that support PWAs.  There are three requirements for building a PWA:

  1. Your site must be hosted on an encrypted environment. This means it needs to be send as https instead of http. This has always been a recommendation for Chrome and Windows apps, but with PWAs it’s a requirement. If you don’t have an HTTPS certificate for your site already, get one today. The good news is this is easier than ever, thanks to resources like Let’s Encrypt.
  2. You need to have a W3C Web App Manifest. This is one standard manifest that supports your PWA across all platforms. We recently introduced PWA Builder, which simplifies and automates building a manifest so it’s as easy as providing resources and a description for your app.
  3. You need to have a service worker. A service worker is a JavaScript file that that runs between your HTML page and the Networking stack. SWs are also installed independently on host OSes to handle offline and push. You can also use service workers in a comparable way to make your site faster. PWA Builder also provides a selection of pre-built service workers based on the functionality you desire for your app.

Run your new PWA today as a “Hosted Web App” on Windows 10

Because PWAs are designed around the principle of progressive enhancement, building a PWA today will not only prepare you for next-generation experiences on desktop and mobile devices, but PWAs can already run as Hosted Web Apps today on Windows 10, and with a polyfill on Android and iOS.

Education-focused web apps, like other web apps, can be published to the Windows Store as “Hosted Web Apps.” These apps will run as standalone apps, just like PWAs. The primary differences between Hosted Web Apps and Progressive Web Apps today are simply in capabilities: while Progressive Web Apps support a Service Worker (and associated features like server push, cache, etc.), and require a secure connection, Hosted Web Apps currently do not. As support for the Service Worker family of features is added to the Windows web platform, HWAs with a Service Worker and HTTP will naturally evolve into PWAs.

Hosted Web Apps have some key user experience and discoverability advantages over remaining in the browser. Depending on your app’s customers and scenarios, you should review this list of benefits and determine whether your app is best delivered in the browser, as a hosted web app, or both.

Easier app management

As previously mentioned, a few weeks ago Microsoft announced a new version of Intune directed towards EDU to help teachers and schools better manager devices. By moving your web app to a HWA/PWA, it allows teachers and administrators to prep students devices with your app along side of the other store apps they use.

User notifications

You may already be using web notifications for re-engaging your users. These notifications will appear in the action center, where users are accustomed to find them. With a small amount of code added to your app, you can send push notifications or use the notification gateway to send toast notifications or Tile updates even when your app isn’t running.

Store listing

Hosted Web Apps get a listing in the Windows Store just like any application. When a user goes to the Windows Store to find education apps, your app will appear alongside the others and will participate in other store discovery mechanisms such as “recommended apps”.

Screen capture showing Jig.Space hosted in the Windows 10 Store

Hosted Web Apps (and, in the future, Progressive Web Apps) can be listed in the Windows 10 Store for better discoverability and manageability.

The store also provides you with additional benefits such as usage reports and performance data. You also receive ratings and reviews, which gives you a way to get feedback from your users, and respond to that feedback in ways we just don’t have on the web today.

More surfaces for discovery

In Windows 10 HWA/PWAs will appear wherever users expect to find apps. This includes discoverability in areas like “related apps” in the store, Cortana search, the start menu and even installs from within the bing.com search listing.

Screen capture showing Bing search results for JigSpace, featuring the "Jig.Space" Windows App featured in the search results.

Web apps listed in the Windows Store are featured in related Bing search results

Integration with the host operating system

HWA / PWA appear to a user as any other app. This means that a user and easily install and uninstall the apps. It means that the web app will be integrated into the settings panel (for example, with notifications).

Screen capture showing the Jig.Space web app installed in the Windows Start Menu. A context menu is open, with options to Pin/Unpin, Resize, Uninstall, and more.

Web apps are managed just like native apps, including all the relevant contextual controls and management options.

These apps work as stand-alone apps, so they have their own tile, their own task bar menus and even appear as apps within the task manager.

Access to expanded resources

When your web app runs as a HWA / PWA is has more access to resource. This means data caps on storage like IndexedDB and local storage are removed. It also means your app will have a dedicated cache that will never be deprioritized by another app.

Screen capture showing the Jig.Space app open to a 3d image of a Mars rover.

JigSpace provides interactive guidance for complex objects like this “jig” of the mars rover.

API access for expanded functionality

HWA / PWA apps have access to the Windows Store App APIs through JavaScript. This allows you to take advantage of features like BTLE, USB access or access to the user’s calendar or contacts with appropriate permission controls.

Simplifying the PWA Transition

Developers have shared with us that moving from a web site (or Chrome OS App) to a Progressive Web App is not an easy task. With that in mind, we’ve recently shared a preview to some of the open source tools we are supporting to ease the transition from web site to Progressive Web Apps. As an education ISV, you can start using these tools today. Lear more about these tools at http://preview.pwabuilder.com .

PWA Builder helps you build out the components needed for a Progressive Web App and get your listing in the Windows Store and other markets, so you can reach users regardless of platform or device.

We’ll have lots more to share about the road to Progressive Web Apps in Microsoft Edge and Windows 10 soon – in the meantime, reach out on Twitter or in the comments below if you have questions!

Jeff Burtoft, Principal Program Manager, Partner App Experience