Geekly Articles each Day
📜 ⬆️ ⬇️

Native applications are doomed (part 1)

image

From now on, I will no longer create native applications. All my applications will continue to be progressive web applications (PWA, Progressive Web Apps). These are applications that are designed for even more organic work on mobile devices than native applications.

What do I mean by "more organic work"? Most of the web traffic comes from mobile devices and users install an average of 0 to 3 new applications per month. This means that people do not spend a lot of time searching for new applications in the App store, but they spend a lot of time online where they can find and use your application.
')
Progressive web applications start their work like any other web application, but when the user returns to the application and indicates (by use) that he is interested in more regular access to the application, browsers will prompt the user to install the application on their home screen. PWA can also use push notifications like native apps.

And here the interesting part begins. Like any native application, the progressive web application will have its own icon for the home screen and when you click on it, the application starts without the Chrome browser shell. This means the absence of the address bar and navigation buttons. Only the usual status bar of the phone and your application in all its almost full-screen glory.

To this has long gone. None of the technologies is particularly new, with the notable exception of the emerging cross-platform standard.

A bit of history


At the dawn of the iPhone, there was no app store. Steve Jobs wanted developers to create applications for the iPhone using standard web technologies.

Sometimes dreamers are right, but they are 10 years ahead of their time. Looking back 2 years ago, Steve Jobs’s recommendation for creating web applications for the iPhone was called “the biggest mistake ” by Forbes magazine, as native applications gained a smashing success.

Looking back today, it seems obvious that he really groped for something, but only far ahead of the capabilities of the existing web standards of the time.

Now a decade later, mobile web standards support many of the features that native application developers needed and the original vision of Steve Jobs mobile web applications is now taken seriously by the whole world. Practically from the very beginning, Apple supported “apple-mobile-web-capable” web applications that you can add to your home screen using meta tags that help iOS devices find things like suitable icons.

Other vendors followed suit, each creating their own collection of meta tags to advertise the capabilities of mobile web applications. But a cross-platform specification has recently been introduced, and now cross-platform mobile web applications are finally becoming a reality.

Applications that comply with the standard are called progressive web applications, not to be confused with such confusing, similar terms like progressive improvement or responsive applications.

What is progressive web applications?


Progressive web applications are web applications developed and adapted for mobile devices. If the browser notes that the user wants to continue using the application, then he may offer him to install the application on his home screen. But in order for it to do this, applications must meet specific criteria:


Of course, using HTTPS and service worker for offline users is today the recommended norm for any modern application.

What many application creators forget about is that if you make a progressive web application, then you should be able to control the application without the browser shell and navigation gestures. Mobile devices assume that you have embedded your own navigation in the application.

For example, if you have a page, then this page should have a backward link to the user interface of the application, or users will have to close and reopen the application to return to the main screen.

Progressive Applications - Instruction


There is a lot of information about creating progressive web applications online, but for the most part it is outdated, and many sources contain only fragments of what you need to create an application. Let's fix it.

Enable HTTPS


To enable HTTPS you need:



manifest.json . (short_name name ), url, . Android iOS :


Apple touch :

apple-touch-icon-180x180.png

180*180 . , , iOS - , -, .

iOS .

manifest.json:


{
  "name": "My Progressive Web Application",
  "short_name": "Progressive",
  "start_url": "/?home=true",
  "icons": [
    {
      "src": "/icons/icon36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/icons/icon48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/icon60.png",
      "sizes": "60x60",
      "type": "image/png"
    },
    {
      "src": "/icons/icon72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon76.png",
      "sizes": "76x76",
      "type": "image/png"
    },
    {
      "src": "/icons/icon96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon120.png",
      "sizes": "120x120",
      "type": "image/png"
    },
    {
      "src": "/icons/icon152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/icons/icon192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#FFFFFF",
  "display": "fullscreen",
  "orientation": "portrait"
}

, . theme_color , Android.

background_color . Android name ( ) background_color.


-, , Chrome Android, Safari /iOS. , Safari, , -.

iOS, , :



, , . web manifest polyfill,  manifest.json , iOS Windows phone Firefox OS.

:



— Edison, , .

Source: https://habr.com/ru/post/316000/

More articles:


All Articles