Web App install banner
Mobile Web defaults
Meta theme color
Slide 97
Slide 97 text
Icons
Slide 98
Slide 98 text
Offline-first (in your app)
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
// While there is only one cache in this example, the same logic will handle the case
where
// there are multiple versioned caches.
var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
return CURRENT_CACHES[key];
});
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (expectedCacheNames.indexOf(cacheName) == -1) {
// If this cache name isn't present in the array of "expected" cache names,
then delete it.
console.log('Deleting out of date cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
// This sample illustrates an aggressive approach to caching, in which every valid
response is
Slide 101
Slide 101 text
There’s an element for that!
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Service Worker caching
Take your app offline with ease
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
There’s an element
for that too!
Slide 106
Slide 106 text
Push Notifications
Stay informed of messages from your app
Adding components
Dealing with content distribution
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
WAT?
Slide 132
Slide 132 text
Local DOM - The DOM an
elements is in charge of
creating and managing
Slide 133
Slide 133 text
index.html
...
...
Slide 134
Slide 134 text
index.html
...
// Tell Polymer to use Shadow DOM
var Polymer = Polymer || {};
Polymer.dom = 'shadow';
...
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
NativeShadowDomStrategy?
Slide 137
Slide 137 text
NativeShadowDomStrategy?
Shady DOM Adapters?
Slide 138
Slide 138 text
NativeShadowDomStrategy?
Shady DOM Adapters?
Ship Shadow DOM!
Slide 139
Slide 139 text
Listening for events
Going old school
Slide 140
Slide 140 text
my-app.html
…
Slide 141
Slide 141 text
my-app.html
…
Slide 142
Slide 142 text
service-worker-installed
Slide 143
Slide 143 text
serviceWorkerInstalled
Slide 144
Slide 144 text
No content
Slide 145
Slide 145 text
my-app.ts
import {Component, View, bootstrap, ElementRef} from 'angular2/angular2';
constructor(elementRef: ElementRef) {
// Access DOM with elementRef.domElement
}
Access the DOM for
this component
Slide 146
Slide 146 text
my-app.ts
// Show toast when Service Worker registration completes
var el = elementRef.domElement;
var sw = el.querySelector('platinum-sw-register');
var toast = el.querySelector('#caching-complete');
sw.addEventListener('service-worker-installed', function() {
toast.show();
});
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
Recap
Wow, that was a lot of stuff
Slide 150
Slide 150 text
Polymer is lean, and production ready
Slide 151
Slide 151 text
Components for nearly any app, out of the box.
Slide 152
Slide 152 text
Components for nearly any app, out of the box.
Complete build chain for bringing your app to production.
Slide 153
Slide 153 text
Components for nearly any app, out of the box.
Complete build chain for bringing your app to production.
Flexible app theming using custom properties
Slide 154
Slide 154 text
Components for nearly any app, out of the box.
Complete build chain for bringing your app to production.
Flexible app theming using custom properties
Responsive app layout boilerplate & routing
Slide 155
Slide 155 text
Components for nearly any app, out of the box.
Complete build chain for bringing your app to production.
Flexible app theming using custom properties
Responsive app layout boilerplate & routing
Material Design ready