The complete guide to progressive web applications

Progressive web application is an application that can provide other functions based on device support, including offline functions, push notifications and the appearance and speed of almost native applications, and local resource caching

Introduction

Progressive Web Application (PWA) is the latest trendMobile application developmentAt the time of writing (March 2018), using web technology can work on Android and iOS devices with iOS 11.3 or higher and macOS 10.13.4 or higher.

PWA is a term used to identify a series of technologies designed to create a better experience for web-based applications.

What is a progressive web application

Progressive web applications arewere able Provide other functions based on device support, Provide offline functions, push notifications and almost native application appearance and speed, as well as local resource caching.

This technology was originally launched by Google in 2015 and has been proven to bring many advantages to developers and users.

Developers can enter the buildingAlmost top-notchApplications that use the web stack are always much easier and cheaper than building native applications, especially when considering the implications of building and maintaining cross-platform applications.

Developers can download fromReduce installation friction, And when you have an app in the store, for 99.99% of the apps, it doesn’t actually bring any discoverability, and Google search can provide the same benefits, or even more.

Progressive web applications are websites developed using certain technologies that make the mobile experience more enjoyable than ordinary websites optimized for mobile devices, so much so that it almost works like a native application because it has the following features:

  • Offline support
  • Fast loading
  • Is safe
  • Able to send out push notifications
  • No need for the URL bar, you can get an immersive full-screen user experience

Mobile platforms (Android at the time of writing, but not technically limited to this) support for progressive web applications is increasing, and users are required to provideAdd app to home screenWhen they detect the site the user is visiting, it is the PWA.

But first, some clarification of the name.Progressive web applicationCan beConfusing terminology, A good definition isTake advantage of modern browser features (e.g.Network workerAnd web application list) so that their mobile devices can "upgrade" the application to the role of a first-class citizen application.

Progressive web application alternatives

How does PWA compare to other options compared to building an alternative mobile experience?

Let's focus on each pros and cons, and then see where PWA is suitable.

Native mobile app

Native mobile apps are the most obvious way to build mobile apps. Objective-C or Swift on iOS, Java/Kotlin on Android, and C# on Windows Phone.

Each platform has its own UI and UX conventions, and native widgets can provide the experience users expect. They can be deployed and distributed through the platform App Store.

The main pain point of native applications is that cross-platform development requires learning, mastering and mastering many different methodologies and best practices. Therefore, for example, if your team is small, or even you are a single developer developing applications, On the 3 platforms, you need to spend a lot of time to learn technology, you also need to learn the environment, manage different libraries, and use different workflows (for example, iCloud is only available for iOS devices, there is no Android version).

Hybrid application

The hybrid application is built using web technology but has been deployed to the App Store. There is a framework or some way to package the application in the middle so that it can be sent to the traditional App Store for review.

The most common platforms are Phonegap, Xamarin, Ionic Framework, and many other platforms. Usually what you see on a page is a WebView that essentially loads a local website.

The key aspect of Hybrid Apps isWrite it once and run it anywhereConcept, different platform codes are generated when building, and you are usingJavaScript, HTML and CSS, this is great, and the device functions (microphone, camera, network, gps...) are exposed via JavaScript API.

The downside of building a hybrid application is that unless you do a great job, you might choose to provide a common standard of effectively creating an application that is not ideal on all platforms because the application ignores platform-specific Human-computer interaction guidelines.

In addition, the performance of complex views may be affected.

Applications built with React Native

React Native exposes the native controls of the mobile device through the JavaScript API, but you are actually creating a native application instead of embedding a website in a WebView.

Their motto is to distinguish this approach from hybrid applicationsLearn once, write anywhere, Which means the same cross-platform approach, but you will create completely independent applications to provide a great experience on each platform.

Performance is comparable to native apps, because the content you build is essentially a native app, which is distributed through the App Store.

Progressive web application features

In the previous section, you saw the maincompetitorProgressive web application. So, what is the status of PWA compared with them? What are their main characteristics?

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

feature

Progressive web applications have one thing that completely separates them from the above methods:They are not deployed to the app store..

This is a key advantage, because if you have outstanding influence and luck, the app store will be very helpful to you, which can make your app go viral, but unless your score is 0.001%, Otherwise, you won't get a lot of benefits from it and have a place on the App Store.

Progressive web applications areCan be found using search engines, And when a user visits a website with PWA functionality,The combination of the browser and the device will ask the user if they want to install the application to the home screen. This is huge because regular SEO can be applied to your PWA, which greatly reduces the reliance on paid purchases.

Not in the App Store meansYou do not need approval from Apple or GooglePutting it in the user’s pocket, you can release updates when needed without having to go through the typical iOS app standard approval process.

PWAs are basically HTML5 applications/responsive websites on steroids, and some key technologies have recently been introduced that make certain key functions possible. If you remember that the original iPhone did not have the option of developing native applications, and the developers were told to develop HTML5 mobile applications, they could be installed on the home screen, but the technology at the time was not ready for this.

Progressive web applicationRun offline.

Refers to the purpose of somethingservice personnelAllow the app to always contain fresh content, download it in the background, and servePush notificationProvide greater opportunities for re-engagement.

In addition, shareability provides a better experience for users who want to share your application because they only need a URL.

benefit

So why should users and developers care about progressive web applications?

  1. PWA is lighter. The weight of native applications is 200MB or more, while PWA may be in the KB range.
  2. No native platform code
  3. Reduce acquisition costs (convincing users to install an application is much more difficult than visiting a website to get the first experience)
  4. The amount of work required to build and release updates is greatly reduced
  5. Support for deep links is more than regular app store apps

Core idea

  • Responsive: UI adapts to the device screen size
  • Similar to the app feel: It doesn't feel like a website, but as an application as possible
  • Offline support: It will use device storage to provide an offline experience
  • Installable: The device browser prompts the user to install your app
  • Re-engage: Push notifications help users rediscover your app after installation
  • Discoverable: Search engine and SEO optimization can provide more users than app stores
  • Fresh: The application will update itself and content after it is online
  • safe: Use HTTPS
  • progress: Even if there are fewer functions (for example, only as a website and cannot be installed), it can be used on any device, even on older devices
  • Linkable: Use the URL to point to it easily

service personnel

Part of the definition of progressive web applications is that they must work offline.

Since it is the Service Worker that allows the web application to work offline, this meansService workers are an essential part of progressive web applications.

Lookhttp://caniuse.com/#feat=serviceworkersUpdate data about browser support.

Tip: Don't confuse Service Worker with Web Worker. They are completely different things.

The Service Worker is a JavaScript file that acts as a middleman between the web application and the network. Therefore, it can provide caching services and speed up application rendering, and improve user experience.

For security reasons, only HTTPS sites can use Service Workers, which is part of the reason why progressive web applications must be provided over HTTPS.

When the user accesses the application for the first time, the service worker is not available on the device. What happens is that the Web Worker is installed for the first time, and then on subsequent visits, the call to a separate page of the site will be called this Service Worker.

Take a lookComplete guide for service staff

Application list

App Manifest is a JSON file that can be used to provide device information about Progressive Web App.

You add the link to the listAllYour website page title:

<link rel="manifest" href="/manifest.webmanifest">

This file will tell the device how to set:

  • The name and abbreviation of the application
  • Icon position, various sizes
  • Start URL relative to the domain
  • Default direction
  • startup screen

example

{
  "name": "The Weather App",
  "short_name": "Weather",
  "description": "Progressive Web App Example",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html?utm_source=app_manifest",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

App Manifest is a W3C working draft, available at the following URLhttps://www.w3.org/TR/appmanifest/

App Shell

App Shell is not a technology, but adesign conceptIt is designed to load and present the web application container first, and then load the actual content soon, so as to give users a good impression of similar applications.

This is equivalent to the Apple HIG (Human Interface Guide) recommendation, which is to use a splash screen similar to the user interface to provide psychological cues, thereby reducing the perception of applications that take a long time to load.

Cache

App Shell and content are cached separately, and its settings make it take very little time to retrieve Shell building blocks from the cache.

Find more information on App Shell athttps://developers.google.com/web/updates/2015/11/app-shell

Download mine for freeJavaScript beginner's manual


More browser tutorials: