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.

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”.

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.

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).

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.

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

Source: Next-generation web apps for education