Instant Progressive Web Apps
Instant Progressive Web Apps
Allowing your web application to function as a PWA is an increasingly important factor in the application's success. Learn how to easily convert your app into a PWA.
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
PWAs (Progressive Web Apps) are an extremely hot topic right now. In case you haven’t been following the PWA buzz, the idea is that it’s a web app that behaves like a native app. When they are first loaded in a user’s browser, they behave like a normal responsive web app, but users can install them to their home screen just like native apps. At which point, they can behave as "offline-first" apps. Parts of this have been available for quite some time, but the concept of PWA brings a lot of little things under a single umbrella.
Deploying as a Progressive Web App
Out of the box, your app is ready to be deployed as a progressive web app (PWA). That means that users can access the app directly in their browser, but once the browser determines that the user is frequenting the app, it will "politely" prompt the user to install the app on their home screen. Once installed on the home screen, the app will behave just like a native app. It will continue to work while offline, and if the user launches the app, it will open without the browser’s navigation bar. If you were to install the native and PWA versions of your app side by side, you would be hard-pressed to find the difference - especially on newer devices.
Below is a screenshot from Chrome for Android where the browser is prompting the user to add the app to their home screen.
Figure 1. Add app to homescreen banner
If the app is available as a native app, in the Play store, you can indicate this using the
Figure 2. Add native app banner
|TIP||The PWA standard requires that you host your app on over HTTPS. For testing purposes, it will also work when accessed at a
For more information about Progressive Web Apps, see Google’s introduction to the subject.
Customizing the App Manifest File
At the heart of a progressive web app is the web app manifest. It specifies things like the app’s name, icons, description, preferred orientation, display mode (e.g. whether to display browser navigation or to open with the full screen like a native app), associated native apps, etc.
Build hints of the form
You can find a full list of available manifest keys here. The build server will automatically generate all of the icons so you don’t need to worry about those. The "name" and "short_name" properties will default to the app’s display name, but they can be overridden via the
One nice feature (discussed above) of progressive web apps, is the ability to specify related applications in the app manifest. Browsers that support the PWA standard use some heuristics to "offer" the user to install the associated native app when it is clear that the user is using the app on a regular basis. Use the
You can declare that the native app is the preferred way to use the app by setting the
|TIP||According to the app manifest documentation, this should only be used if the related native apps really do offer something that the web application can’t do.|
Device/Browser Support for PWAs
Chrome and Firefox both support PWAs on desktop and on Android. iOS doesn’t support the PWA standard, however, many aspects of it are supported. For example, on iOS you can add the app to your home screen, after which time it will appear and behave like a native app - and it will continue to work while offline. However, many other nice features of PWAs like, "Install this app on your home screen" banners, push notifications, and invitations to install the native version of the app, are not supported. It is unclear when, or even whether, Apple will ever add full support, but most experts predict that they will join the rest of the civilized world and add PWA support in the near future.
On the desktop, Chrome provides an analogous feature to "add to your home screen," which they call, "Add to your shelf." If it looks like the user is using the app on a regular basis, and it isn’t yet installed, it will show a banner at the top of the page asking the user if they want to add it to their shelf.
Figure 3. Add to shelf banner
Clicking the "Add button" prompts the user for the name by which they wish the app to appear:
Figure 4. Add to shelf prompt
Upon submission, Chrome will generate a real application (on Mac, it will be a ".app", on Windows, an "exe", etc..) which the user can double-click to open the app directly in Chrome. And, importantly, the app will still work when the user is offline.
The app will also appear in their "Shelf" which you can always access at
chrome://apps, or by opening the "Chrome App Launcher" app (on OS X this is located in "~/Applications/Chrome Apps/Application Launcher").
Figure 5. Chrome App Launcher
Opinions expressed by DZone contributors are their own.