Signup for the Ionic Newsletter to get the latest news and updates!

  • 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…

  • http://peeyushsrj.me Peeyush Singh

    One of the best reading references I have ever read!
    Explained P.W.A. like a magic.
    Thankyou.

  • Regiane Folter

    Nice post! Funny and informative, at the same level 🙂 It’s nice to have light and concise ways to explain IT concepts, because it turns everything so much easier to understand and apply. Thinking about that, in my company we write some Blog Posts in order to help developers and tech folks. Recently we shared some tips about coding PWA:
    https://blog.uruit.com/2017/03/22/coding-progressive-app-development/
    It may be of your interest, let me know if you have any comments 🙂

  • curtis

    I would suggest that everything about “Progressive Web App” is contrary to Progressively Enhansed web pages. I mean are you seriously gonna tell me that building an app shell, using service workers on a mobile client and then doing client side-templating with pure javascript is in any way progressive – I think you are crazy!

    What ever happend to building fast rendering, CDN cachable pages that are light weight and can be progressively enhanced according to the device that is running it.. That’s the old way I suppose..

    Still – It seems remarkably straightforward – Now we have “AMP mobile page” .. what is that but re-cognizing that the server is for rendering, the client is for delivering to and again – not making it do excessive computation.

    The fact that twitter https://blog.twitter.com/2017/how-we-built-twitter-lite just congratulated itself for building a client side single page app that takes 5 seconds to load over 2G and hangs the user out to dry with a blue screen while it is loading its javascript and goes on to talk about how performant the ui was able to be made.. should really consider.. why they expect the device to do all the heavy lifting around templating and networking, and javascript parsing… just… for what?

    So you can have an offline application in a shell? How is offline twitter even remotely interesting??

    So I ask you Ionic.. what are you doing to prevent these half baked concepts from leaking into best practices?

  • https://scottmathson.me Scott Mathson

    Okay – you convinced me. Where do I go to find services that’ll cross-publish to app stores, as mentioned. SAME code base? 😮