Progressive Web Apps on Firebase - Google I/O 2016

Progressive Web Apps offer a first-class mobile experience for users, but can be daunting to approach the first time you build them. Luckily, Firebase offers a first-class development experience for building Progressive Web Apps! In this session, we take a Firebase-powered web application and turn it into an offline-ready, service-working, app-manifesting, production-ready Progressive Web App using Firebase Hosting, Auth, and Database. We walk through how to add Progressive Web App capabilities to an existing app, how to cache app shell and Firebase Database data offline, and how to deploy your PWA to Firebase Hosting.
Watch more Firebase talks at I/O 2016 here: goo.gl/JTH9Fr
See all the talks from Google I/O 2016 here: goo.gl/olw6kV
Subscribe to the brand new Firebase Channel: goo.gl/9giPHG -
Get started using Firebase today goo.gl/gCHr6r
#io16 #GoogleIO #GoogleIO2016 #Firebase

[@JamesJosephFinn]

Firebase here I come. Excellent presentation. Power to the web!

[@zaramaraj3677]

Excellent !

[@FilipeAguiarCarvalho]

That's so nice. I'm curious if someone will provide an angular lib to do the indexeddb on it too.

[@TheJoceM]

I am looking for a tutorial/code about PWA and firebase with capabilities to draft offline CUD changes and sync them when online (one of the options that Michael mentions in his video). Does that actually exist ?

[@TheoGregoire]

Great video. Are there slides available for this presentation you can direct me to?

[@CaimAstraea]

What about IOS ? What are some good techniques to get around the lack of features

[@luisrico4429]

i try all the step

[@luisrico4429]

Tnks

[@luisrico4429]

Very nevius

[@markusgattol]

the link app-manifest.firebaseapp.com doesn't exist anymore, where has it gone? :)

[@minakhan1390]

Hi, ~32:50, you say that there's a codelab about offline write and that polymerfire+app-storage supports it. I couldn't find the link to the codelab link..Could you please tell me where I can find more information about offline storage with firebase? thanks! I have already seen this: firebase.google.com/docs/database/web/offline-capabilities but I wonder if polymerfire elements support this.

[@usasikh1]

+mbleigh is there a solution or guide to get offline firebase database in indexdb for React app?

[@michaelbleigh8737]

I'm not aware of any off-the-shelf solutions for it. Basically you'd want to take a similar approach to how PolymerFire does it -- interacting primarily with an indexeddb store that gets populated (when online) by Firebase DB.

[@MartinHollerweger]

Great presentation, but what I don't understand is why Index db mirror isn't implemented in firebase directly. Why do I need to use Polymer for that? I would rather like to use Firebase offline like within mobile apps. The next app I want to build is a progressive offline first Web App with Ionic2 & Firebase. Is there also any lib to use app cash as a fallback when service workers aren't available?

[@michaelbleigh8737]

Hey Martin, supporting native offline in the JS SDK is something that I'd love to see happen eventually, but there are a number of reasons it hasn't yet. iOS/Android have more homogenous capabilities and there's no need to worry about e.g. cross-tab communication or multiple sessions simultaneously on the same origin. To ship something in the SDK, we'd have to feel 100% confident we have answers that work for almost everyone. Shipping a library like PolymerFire lets us experiment and find out how to approach in a more experimental fashion.

[@MartinHollerweger]

Hi Michael, thanks for the quick response. Okay doing experimental testing makes a lot sense. One more Question: Is it intended to only use index db for a Firebase persistence? No service workers should be required for that or?

[@mbleigh]

+Martin Hollerweger service workers aren't necessarily required for indexeddb caching but to be able to boot the web app offline you will either need service workers or to work with the notoriously difficult app cache spec.

[@MartinHollerweger]

Hi Michael, is there any update on the offline support for the JS SDK? Or will there be a support library I could use with ionc2?

[@michaelbleigh8737]

No updates. We know it's a pain point, but nothing new to announce. At present, you'll have to roll your own solution to persistent offline data. Sorry, wish I had better news!

[@luisrico4429]

Ok

[@usasikh1]

Is Chrome the only mobile web browser that supports all PWA features?

[@michaelbleigh8737]

On mobile Chrome is definitely the furthest along. The good news is that WebKit has put Service Workers on their public roadmap as something they intend to implement, so it will be coming to Mobile Safari at some point. Firefox has also already implemented a wide swath of PWA features, though I'm not familiar with exactly what ships in their browser today. Microsoft has started implementing Service Worker in Edge, as well.

[@usasikh1]

Great Thanks Michael, follow up question, do you know of any guide to implement Firebase Cloud Messaging in a PWA, i have looked at codelabs guide but they work GMC not FCM. I keep getting 401 error following the guide.

[@mbleigh]

+jasan I'm not aware of one but this is something I plan to look into in the near future. Web push is super cool but a little hard to get started with :)

[@DaronJones]

I'd be very interested to see how to go about tackling offline write. Does anyone happen to have the link that's mentioned near the end of the talk: kzbin.info/www/bejne/iaDFiaKeadeVa5om35s

[@luisrico4429]

O so sorry

[@luisrico4429]

i jave crwdi car

[@Rundik]

PWA sucks. I can't even make an audioplayer because it's impossible to do tracks switch in playlists

[@StijnHommes]

5 years on and Google is still trying to make PWAs a thing. Just give up already. There is no reason to reinvent the wheel.