The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

what-is-pwa-img

By now, you’ve probably heard that Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to the force, and a whole lot more. In the process, they might even push the mobile web forward, bring parity to web and native apps, and help mobile developers reach more users beyond the confines of the app stores.

That all sounds great…but what are Progressive Web Apps, exactly?

“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps

Native app store apps do things like send push notifications, work offline, look and feel like an app (as Apple and Google have imagined them), load on the homescreen, and so on and so forth. Mobile Web Apps accessed in a mobile browser, by comparison, historically haven’t done those things. Progressive Web Apps fix that with new Web APIs, new design concepts, and new buzzwords.

To be clear, I’m talking about browser mobile web apps. Hybrid apps, like Ionic with Cordova, run uninhibited in the native app environment, with all the features we expect of any native app. But pull out the web content from a hybrid app and load it in a mobile browser, and the app is thusly constrained by the features of the browser (for a variety of good security and API standardization reasons).

Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web.

On the whole, Progressive Web Apps describe a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web. Let’s walk through some of the core tenets of Progressive Web Apps.

Service Workers

Service Workers are an incredibly powerful, and equally as confusing, technology behind a Progressive Web App. They power offline functionality, push notifications, background content updating, content caching, and a whole lot more.

At a high level, a Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.

I’ve heard Service Workers described as a “proxy,” which I think describes them nicely. We can listen for events like fetch that happen any time a network request occurs. We can handle that event with full control, checking for cached data and returning immediately, or allowing the request to continue to the remote server. Our script acts as a proxy, or middleware, for the request.

The sheer power and flexibility of Service Workers makes them very complicated, and generally, developers will want to use pre-made “recipes” for common service worker use cases, such as offline mode. Mozilla has a great reference for service worker recipes that demonstrate the myriad applications with reusable code. For example, here’s how to do a simple offline mode that intercepts fetch events and returns data from a cache if the network request fails. Google also has a slew of Service Worker Samples.

Main takeaway: Service Workers are just a JavaScript file like any other, running in the background and triggered via events, and it’s up to you to write code to handle caching, push notifications, content fetching, etc. Since developers end up using the same “recipes” to do common tasks (like offline support), we will most likely want to use existing recipes to make our lives easier. Service Workers are available on Android with Chrome 50 and not currently supported by other major mobile browsers.

App Shell

The App Shell model is a simple design concept whereby the initial load of a mobile web app provides a basic shell of a app UI, and the content for the app is loaded after. App Shell isn’t a Web API or a framework, but rather a design approach that developers can choose to adhere to that is enhanced by the caching abilities of service workers. You might find that it’s a pretty straightforward, obvious approach, made more dramatic by a buzzword.

With the App Shell model, we focus on keeping the shell of our app UI and the content inside of it separate, and we cache them separately. Ideally, our App Shell is cached such that it loads as quickly as possible when a user visits and returns at a later date. Having the shell and the content load separately theoretically improves the user’s perception of the performance and usability of the app.

Putting this in the context of Ionic, we can load our Ionic app layout immediately (tabs, navigation controller, side menu, etc.), cache it through a service worker, and then fetch and update the content through JS after the app shell has loaded.

As we start to add more PWA support to Ionic, you can expect an App Shell approach to come out-of-the-box for all Ionic apps that are deployed as mobile web apps, with pre-made Service Worker recipes for caching, offline support, and background content refreshing.

Installability and App Manifest

Historically, mobile web apps were not installed like an app to the homescreen. Sure, a user could “pin” a mobile website to their homescreen on iOS and Android, but the experience was second-rate, and the app still did not come with the local features we expect out of native apps (plus, does anyone actually do that?).

This is changing. Recently, Chrome on Android added support for installing web apps to the homescreen with a native install banner, just like the native app banners we’re used to.

To tell Chrome our mobile website is installable as an app, we write a manifest.json file and link to it from our main HTML page (see the second link above for a full example).

Currently, iOS doesn’t have any additional features here beyond Pin to Homescreen, so the experience won’t be as fluid, but here’s hoping Apple gives us some goodies this year 🍪.

Conclusion

Progressive Web Apps are equal parts new Web APIs, design patterns, and marketing fluff. The mobile web comes closer to parity with installable app store apps through app manifest and homescreen install support, background worker functionality with Service Workers, faster load time with App Shell, and a renewed belief that web developers, too, can build amazing mobile app experiences.

At Ionic, we believe the web is the future of apps: It runs everywhere, it’s the most widely known technology stack, and it powers a rapidly increasing number of apps. Today, web technologies are used by millions of app store apps, but so far, the mobile web has been a stripped-down experience driving people to the app store for the Real Thing. Progressive Web Apps change that.

In the coming months, we will be releasing new features for Ionic apps that enable developers to get the best of both worlds: cross-platform app store deployment on iOS, Android, and Windows, along with deployment to the mobile web as a Progressive Web App with the same code. Soon, Ionic developers will be able to benefit both from native app store distribution, and immediate access to the billions of mobile web and Google search users. No more clunky app store interstitials, and no more building separate native and mobile web apps. Stay tuned! 🤘

  • James Parsons

    Is Ionic planning to forget Hybrid period and support only Progressive Web Apps?

    • yesimahuman

      Not at all, we want both and hybrid apps built with browser technologies (like Ionic) are uniquely positioned to deploy everywhere. Each channel has pro’s and con’s, but today’s app store apps are missing out in a big way when it comes to capturing mobile web and mobile web search traffic.

      • Frédéric Falliere

        PWA is such an exciting and challenging path for mobile development.

        When will ionic officially support web as a platform (I don’t think that’s the case) and PWA ? Is it too early to tell ?

        I think PWA is such a different way of building an app it needs a total different framework. Things should be as lite as possible.

        • yesimahuman

          I disagree, if you can deliver the UI shell and the content separately, Ionic works really well for PWAs with minimal dev process changes. Really, we’d need to provide a service worker for app shell caching, but beyond that you’d still write the same app.

          In a way, PWAs feel like taking the strategy we have all used with Single Page Apps for the last however many years, and adding some more fine-grained caching techniques to improve mobile web visitor performance.

  • urbgimtam

    So, after Google I/O announcement of Google Instant Apps, how does this look? And, by the way, will it be possible to built Google Instant Apps using Ionic? That would be the cherry on top of the cake 🙂

    • http://www.mikece.com Mike Cerny

      From what I have read so far about Android Instant apps, the scheme relies upon downloading Activities in an ad hoc manner. Hybrid apps like Ionic don’t have Activities per se (aside from the Activity which launches a chrome-free WebView). Makes perfect sense for Ionic-built web apps to support PWA though. I wonder if the “install to home screen” could be replaced with “Install the app” which will give you access to all of the hardware that Cordova plugins will support. Would be vexing if PWAs installed to the home screen end up in a type of limbo where you can’t easily install them as a hybrid app.

    • yesimahuman

      I think it’s interesting. At first glance, it feels a bit like duplicating all the work and awesomeness of the web, which is weird, but I think Google has two “factions” at play here: native Android team, and the open web/Chrome team, and they seem to arrive at solutions independently of each other. In some ways, google instant apps give native Android developers more abilities of the web, but if you’re already using the web then you have many of the same abilities (bounded by Web API support, so it’s not one-to-one).

      There’s no reason Ionic developers couldn’t build an Android activity just to benefit from google instant apps, but keep the rest of the app based on cordova/web. Since instant apps are Android-only, you don’t really gain much of the cross-platform benefits there anyways (and maybe they support web views anyways!).

  • http://www.mikece.com Mike Cerny

    Are rapid launch and push notifications the only native-like features of Progressive Web Apps? Would be significant if PWAs could access (protected) local storage or the camera.

    • yesimahuman

      “Progressive Web Apps” refers to some specific technologies, and does not mean that the web browser won’t have more underneath. Browser vendors are constantly adding new APIs to add access to things like the Camera (for example, Chrome has getUserMedia for camera streaming, and iOS safari can pick a file by taking a camera photo).

  • Yerko Palma

    Here is a good list of Progressive Web Apps https://github.com/operasoftware/pwa-list

  • Fintan Kearney

    Correct me if i’m wrong but has the term “Progressive web app” been hijacked?

    A progressive web application for me used to mean an application that provides more features depending on whether it was supported by the user’s device / browser.

    We have always had progressive web applications by implementing new features when supported / possible.

    For example, detecting whether the user’s device has a camera and providing a feature that uses it.

    It still applies to providing the ability for an application to have a native app look and feel but developing web applications specifically for native-like experiences is not the definition of a “progressive web app” in my books.

    • https://webplatformdaily.org Šime Vidas

      It’s not perfect, but “super web apps” sounds a bit silly.

    • Mark Marijnissen

      I thought exactly the same – remembering the times where “progressive enhancement” was the new “graceful degradation”. Around the same time people started to shout a “mobile-first approach (to responsive design)”.

      I would simply opt for an “enhanced web app” — as “web apps” are websites with app-like functionality, but then the “enhanced” indicates there are actual enhancements in place (i.e. the push notifications, etc they are talking about)

      • Toni Lähdekorpi

        I thought “progressive enhancement” and “graceful degradation” are two different things. Or mostly two different ways of thinking; where in “progressive enhancement” you first create something that works in “everything” and progressively add more features on top of it to make it better on newer devices.
        Whereas in “graceful degradation” you make the shiny and hip thing with all the features that works on the best devices and after that make gracefully work on older devices?

        • Fintan Kearney

          Agree. Two different approaches.

    • yesimahuman

      Progressive enhancement is a cornerstone of PWAs, I just neglected to touch on that aspect above. We will provide an increasingly progressive app experience to devices and platforms that can support it, but build for a baseline level of functionality. It’s such a common approach nowadays that I didn’t think it was worth getting in to.

  • Evandro Guedes

    Very nice article, we are boostraping a startup in Brazil using this approach and (of course) the terrific Ionic Framework. Basically our product is a progressive web app mcommerce. You see the MVP here (only in portuguese, for now): https://minnisell.com

    🙂

    • John Calderaio

      This looks awesome!! How did you make this?

      • Evandro Guedes

        Thanks @johncalderaio:disqus 🙂

        Well, i made the first prototype about 2 years ago, writing all the frontend code by hand using angularJS and Ionic. The backend is nodeJS with DynamoDB. The network infrastructure is from Amazon (ELB, LC, EC2, Cloudfront, etc).

      • https://dubaimonsters.com/ brenda john

        yes john this is such a amazing kind of work, i really appreciate the team of design and development.

  • DHAVAL PANCHOLI

    You guys just keep getting awesome day by day. 🙂

  • Abhishek Jain

    Would be even better if somehow an install button could be placed somewhere right inside our web page instead of the extra few clicks required to “Add to Homescreen”. Maybe there could be some way to tell Chrome for Android this via the manifest.json.

    I’m a little confused though as to the difference between an Ionic app (that doesn’t use a lot of native plugins) and an Ionic built PWA (when it would be possible). Would the native Cordova packaging and app store submissions really be worth it in the future if I can just link my users to my PWA (built with Ionic mind you :)) who can then put it on their home screens (assuming Apple gets with the program).

    Really excited to see the Ionic approach to PWA though. Also happy to see Ionic talking about adapting the latest trends and technologies.

    • yesimahuman

      Sure, first of all, the app store and the mobile web are very different user acquisition systems. Many users today are used to “going to the app store,” yet they still search the mobile web quite a bit. Being in the app store natively gets you the first camp, having a PWA or a quality mobile web app gets you the second camp. Historically, native developers could only get that first camp, but Ionic is pushing the ability to get both since the web stack runs in both places.

      Taking an Ionic app and making it a PWA means making sure you’re not depending on native functionality for the app to work (for example, by needing access to a low level native sensor). Build your app in a way that it has more features when running natively but still has a great experience when running in the mobile web and you’ve just created an awesome PWA. Ionic is the UI for both.

      • Abhishek Jain

        Makes sense.

        On a related note, I wonder if there will be a day when PWA (or just web apps) would have access to all the underlying device sensors and hardware via Chrome for Android? As in, Chrome relays said access to your app having first acquired the relevant permissions from the user.

        What do you think of this?

        • Orlando Brown

          This would be amazing on so many levels. Being that apps seem to require so much unnecessary permissions to areas of a device anyway what difference would it make now?…

          If anything it make it sets a precedent, allowing for such access to be allowed, though some layer of responsibility should still be managed.
          (Java comes to mind)

        • Justin Willis

          Thankfully the chrome team is hard at work on this and you can already use a ton of great device api’s in the latest stable chrome release! With support for api’s such as webRTC (for camera and microphone access), web notifications, web vibration, and even web push notifications you can now get alot of native functionality in a PWA. Also Firefox and Edge already support alot of these api’s, and I hear their is some movement from safari to also support some of these device api’s.

  • http://www.eekay.nl Edwin Klesman

    I like PWA technology for creating enhanced mobile web experiences. My biggest no-go for using this for projects is that I really don’t like to be that dependant on the goodwill of major companies to support the tech in their browser engines.
    I’m glad that @apachecordova and @ionicframework give us webtech – to all native platform translation. And that the native wrapped experiences are more common and better supported than PWA.
    Let’s see what time will bring us in 2016/2017 on that account.

    • Jeff

      I agree, I don’t quite like the idea that there’s a middle-man with the browser. I’m hoping people start seeing that React-Native is a much better concept where we don’t need to rely on the browser to handle interaction with different mobile OSs, and can instead write native apps using a shared code base.

  • Palle Simonsen

    I wish the team would do this sooner rather than later.

    I did a small PoC for a Progressive Webapp w. a service worker and a shell. in my Use Case it clearly outperforms native and Cordova/Ionic on a one+ – fetching some WordPress Posts, Using a Commercial Push API and a lightweight material design CSS. Plain simple ES5. No Angular, No Transpiling, No JQuery.

    So please get on with this – take a ‘tudekiks’ for the plugins we don’t need and please, please move forward support for webapps.

    NB: Transformed an Ionic/1 app into a Webapp using a ServiceWorker. – doable and with the added benefit of the stable ionic framework and very decent performance.

  • http://efitx.com John Dizzo

    I’ve been using Google Polymer Web Components for over a year now so this is all exciting stuff. I’m curious how ‘Google Instant App’ relates to these ‘service workers.’ Are we talking about the same thing?

    • Vale Farrar

      Did you get an answer?

  • soma mridha

    Very nice article.Like your brand Pushify also offering Unlimited Free Browser Push Notifications to Unlimited Subscribers by which you can connect with your customers easily even customer not in your website. Notifications will deliver to your Customers Mobile and Desktop. We are offering Unlimited REST API calls, Geo-Targeting, Scheduled Notifications, Free Plugins to CMS & e-commerce, RSS 2 Push and many features for free. To know more just visit -www.pushify.com

  • simplejoymedia

    Maybe I am missing something, but haven’t we had essentially the same functionality on iOS since before 3rd party native apps? https://developer.apple.com/library/safari/referencelibrary/GettingStarted/GS_iPhoneWebApp/_index.html

    Has anyone tried deploying an ionic app to the web and then add the necessary meta tag?:

    As well as enable offline mode by leveraging browser based local storage?

  • Elise Chant

    BOOM !!

  • Kévin
  • http://websemantics.ca/ Adnan Sagar

    I love the sarcastic tone of this article. I think sarcasm style of writing should be made mandatory to all tech articles especially those explaining “new” technologies & trends. It helps to demystify buzzwords and presenting information simply. Anyways, and having said that, I think PWA deserves all the attention given as it does provide simple – and sometimes trivial (i.e. App Shell) – solutions / technologies for building next generation of Web apps. Also, glad Ionic team is on the topic, .. we, well I, look forward to see support for PWA technologies and best practices and how Ionic apps are built. Thanks for a good read ..

  • alvin

    does it mean using ionic I can build a hybrid app which can work on the web browser except for features implemented using native library for mobile devices? i’m asking because i have a project whereby the mobile app will have more features than the web app which is to serve as a website i.e. for viewing only. hence i’m hoping and asking if i can build this once using ionic and use it at mobile (features on multiple pictures upload, real time chat, push notification) and web (viewing only).

  • firstpostcommenter

    Nice

  • http://taigeair.com taigeair

    Is it more suspectible to tampering? For example, if I have some logic to check for some user conditions, won’t anyone with developer tools be able to easily override it?

    Also will building it as PWA be available to ionic 1 or only for ionic 2?

  • ppazos

    This sounds a lot like Rich Internet Applications …

    Something missing here? “Progressive Web Apps are equal parts new Web APIs …”

  • dvlper

    hi,this article gives awesome ideas for developing a best web app ;in our site also provides a best web app ;if you want get more ideas refer our site ;

  • WhatWouldYodaDo

    Sounds exciting!
    Can anyone comment on how this compares to GoNative.io?

  • http://www.propertycrowdz.com/ Anthony Todd

    Any progress on this? I am looking for a developer to build me a peer-to-peer marketplace. I first came across this from the following Google link: https://developers.google.com/web/fundamentals/getting-started/?hl=en
    That’s kind of what I want, but I am way out of my depth technically to do it myself.

  • Nigel Peck

    I love PWAs and definitely think they’re the way forward. When I developed an app recently, I made use of the technology. But it’s an audio app needing multiple channels playing at once. Web Audio API supports this, but I find iPad since version 9.3.2 (it worked before that) is muting it regardless of any “unlocking”. I posted about this to Stack Overflow* and the Apple dev forum but nobody seems interested. It seems key to me, for the flourishing of PWAs, that quality audio is available (which would be a good reason for Apple not to fix the bug with Web Audio API on iPad). iPhone has no problem. I set up a simple test isolating the problem which is linked from the SO question. Any input from interested folks would be appreciated.

    * http://stackoverflow.com/questions/37431296/ios-ipad-muting-web-audio-api

  • alinamike

    web apps it is important for nowadays people use ant where any place i am working recently
    Ingic it is also good creative ideas.

  • https://enonic.com Morten Øien Eriksen

    We just started an interesting PWA project. Check out the first blog post. We will be blogging along as we go: http://webagility.com/posts/building-a-progressive-web-app-part-1-background-and-back-end

  • Rajkiran Panuganti

    Is my understanding correct that we cannot use any of the ionic-native stuff in PWA’s ?

    For advertising revenue, can we use AdMob or do we need to use AdSense ?

  • Cesar Azevedo

    Up!

  • snsj2

    Despite the fact that progressive web applications are a relatively new trend, I think there’s a bright future ahead of them, because nowadays everything is saved on people’s smartphones, so optimizing the web on mobile devices is critical. An interesting article about PWAs can be found in BGO Software’s blog.

  • Varun Gupta

    In case of PWA will be able to update data ??? I have an app by the name of Wobot in this we allow users to make different forms . The app works offline as well and user is able to update the data ( fill data, upload images) even when he is not connected to internet will the same can be done in case of

  • http://lightben-design.com/ LightBen

    It’s all buzzwords. On one side it’s too much, on the other side, it gives us all jobs and better salaries…