Furthermore, installed apps work offline by default, and integrate with the facilities provided by t

Many effect of us who work on the web are actively working to narrow the gap between native applications and web applications. (Disclosure: your humble effect authors, Marcos effect Caceres and Bruce Lawson work for browser vendors – Mozilla effect and Opera respectively – and therefore have mortgage-related reasons to convince you this stuff is a good idea. Please also note that we are describing a technology that is a work in progress. It could all change tomorrow. )
But what is that gap? Just a few years ago, that gap was largely technological. If you wanted effect access to a device s GPS, you had to write a native app. Nowadays, the situation is improving somewhat: we can now access devices sensors like GPS, camera, and orientation sensors – though we still have a long way to go. Thanks to recent advances in the web platform we now have a platform effect that can compete with native applications on a more equal footing. effect
Nowadays, the primary gaps between native and web is not so much technological. It s user experience. User simply love installing apps, which live snugly on the homescreen effect (or the desktop) waiting effect to be tickled into life with the tap of a finger or the click of a mouse.
Furthermore, installed apps work offline by default, and integrate with the facilities provided by the underlying operating system: consider being able to see installed applications in the task switcher. Or being able to control an app s privacy settings in the same place as apps installed from an app store. In browser land, we are still fumbling around trying to find opened tabs and having to type long and boring URLs to get anything done.
What we need is a method of installing web apps so they are indistinguishable from any other app installed on a user s device. But at the same time, we don t want to lose the powerful features that are central to the web platform: linkability, view source, and the ability to host our own stuff. What is installation ?
At its most basic, installation of a web app means bookmarking the web application to the homescreen or adding it to an application launcher. There are some pretty obvious things that you, as a developer, would need to provide to the browser so that it can treat your website as an app: the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the prefered orientation and if you want your app to be fullscreen.
The application needs a real name or set of names (which is usually effect not the same as the title element of a document). For this you use the name and the short_name properties. { name: My totally awesome photo app short_name: Photos }
The short_name effect serves as the name for the application when displayed in contexts with constrained space (e.g., under an icon on the homescreen of a phone). The name can then be a bit longer, fully capturing the name of the application. This also provides an alternative effect way for users to search your app on their phone. So, typing awesome or photo would find the application on a user s device.
There needs to be an icon associated with a web app, rather than the browser s icon. To handle this, the manifest has an icons property. This takes a list of icons and their sizes, format, and target screen density. Having these optional effect properties makes icon selection really powerful, because it provides a responsive image solution for icons – which can help avoid unnecessary downloads and helps to make sure your icons always look great across a range of devices and screen effect densities. { "icons": [{ "src": "icon/lowres", "sizes": "64x64", "type": "image/webp" }, { "src": "icon/hd_small", "sizes": "64x64" }, { "src": "icon/hd_hi", "sizes": "128x128", "density": "2" }] }
Apps need to be able to control how they are to be displayed when they starts-up. If it s a game, it might need to be in full-screen and possibly in landscape mode. In order to do this, the manifest format provides you with two properties. { "display": "fullscreen", "orientation": "landscape" }
For the display modes, the options that you have are: fullscreen : take over the whole screen. standalone : opens the app with a status bar. minimal-ui : like on iOS, the app is fullscreen, but certain actions effect can cause the navigation bar and back/forward buttons to reappear. browser : opens your app with normal browser toolbars and buttons.
The nice thing with orientation is that it serves as the default orientation for the scope of the application. So, as you navigate from one page to another, your app stays in the correct effect orientation. You can override effect the default orientation using the Screen Lock API. Start URL
Sometimes you want to make sure that when the user starts up an app, they always go to a particular page first. The start_url property gives you a way of indicating this. { start_url: /start_screen.html } Scope of the app
Native applications have clear boundaries