Go Offline -- Polycasts #19YouTube↗  IA↗(long shot)
Science & Technology  26.4K views 354 likes 8 dislikes   29 Jun 2015
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
Herkese merhaba. Ben Rob Dodson.
Hola. ¿Cómo están? Soy Rob Dodson.
Bugünkü Polycast'te sizlere tüm uygulamanızı tek satır JavaScript yazmadan
Hoy en <i>Polycast</i>, les mostraré como hacer que toda su aplicación
nasıl çevrimdışı çalıştırabileceğinizi göstereceğim.
se ejecute sin conexión, sin tener que introducir ni una sola línea de JavaScript.
Bu çılgın, muzip, harika bir şey,
Esto es una locura impresionante,
o yüzden takip edin ve size nasıl yapıldığını göstereyim.
así que síganme y déjenme mostrarles como se hace.
Bugünkü web siteniz böyle.
Esta es tu página web actualmente.
Bir değere ihtiyacı olduğunda
Cuando necesita un <i>asset</i>,
onu talep etmek için ağa bağlanır.
se dirige a la red para solicitarlo.
Ağ bu değeri çeker ve
La red busca el <i>asset</i> y lo devuelve
ekranda gözükmesi için geri getirir.
para que pueda ser mostrado en pantalla.
Fakat bildiğimiz gibi, bu süreç her zaman kusursuz işlemez.
Pero como ya sabemos, este intercambio no siempre es perfecto.
Bu talebin ağa ulaşması
A veces las solicitudes toman demasiado tiempo
bazen uzun sürebilir.
hasta llegar a la red.
Ve belki ağın cevap göndermesi uzun sürer
Y, quizás la red se tome un tiempo en responder,
veya bunu yapması uzun, dolambaçlı olabilir.
o tome el camino más largo para hacerlo.
Belki kullanıcı bağlantısını kaybeder,
Tal vez el usuario pierde la conexión en el camino,
hız 3G'den EDGE'e düşer.
al pasar de 3G a EDGE.
Veya belki bağlantıyı tamamen kaybeder, bu durumda
O quizás pierde la conexión por completo,
ağ kullanılabilir değildir.
por lo que la red no se encuentra disponible.
Yani bu durumun her zaman istediğimiz gibi
Existen muchas razones por las que este intercambio
hatasız olmamasının bir çok nedeni var.
no es siempre tan constante como quisiéramos.
Şimdi aynı modele bu sefer Servis Çalışanı ile bakalım.
Apliquemos el mismo ejemplo, pero esta vez con Service Worker.
Servis Çalışanı proxy gibi çalışan yeni bir standart,
Service Worker es un servidor que actúa como un <i>proxy</i>,
ağ taleplerini JavaScriptte yakalamanızı
interceptando las solicitudes de la red en JavaScript,
ve istediğiniz şekilde ele almanızı sağlıyor.
para permitirte trabajarlas como creas conveniente.
Kullanıcı talepte bulunur, bu da Servis Çalışanından geçer.
El usuario realiza una solicitud que se dirige a través del Service Worker.
Ve ağdan yanıt geldiğinde,
Y luego cuando la respuesta regresa de la red,
Servis Çalışanı bununla ne yapmak istediğine karar verir.
Service Worker puede decidir qué hacer con ella.
Örneğin, bir önbellek oluşturabilir
Puede, por ejemplo, crear un caché
ve yanıtı bu önbellek içerisinde depolayabilir
y de hecho, almacenar la respuesta en el mismo,
ve sonra bunu kullanıcıya döndürür.
y luego responderle al usuario.
Yani kullanıcı bir daha aynı değer için talepte bulunduğunda
La próxima vez que este haga una solicitud para el mismo <i>asset</i>,
Servis Çalışanı önbelleği kontrol edebilir,
Service Worker revisará el caché,
orada olduğunu gördüğünde de ağa başvurmadan bunu kullanır.
buscará que hay en él y enviará una respuesta en vez de buscar en la red.
Bu gerçekten hoş bir çevirimdışı modeli aktif hale getirir.
Esto básicamente habilita un buen modelo sin conexión.
Şimdi, burada yapabileceğiniz birkaç şey daha var.
Bien, hay otras cosas que pueden hacer aquí.
Servis Çalışanının
Pueden hacer que Service Worker
ağa ve önbelleğe aynı anda gidip
busque en la red y el caché al mismo tiempo
ikisini yarıştırmasını sağlayabilirsiniz.
haciéndolos competir.
Arkadaşım Jake Archibald'ın çevrimdışı kitabında detaylandırdığı
Hay muchos esquemas detallados
tonlarca model var.
por Jake Archibald en este libro disponible sin conexión,
Bu videodan sonra bakmanızı gerçekten tavsiye ediyorum.
realmente les recomiendo que lo lean al finalizar con este video.
Peki ya Servis Çalışanı desteği olmayan bir tarayıcıda iseniz ne olacak?
Pero, ¿qué sucede si estás en un navegador no compatible con Service Worker?
Bu durumda, eskiden nasıl yapılıyorsa öyle yapmak durumundasınız.
Bueno, en ese caso, regresas al modelo anterior.
Sayfanız ağa bağlanmaya çalışıyor
Tu página intenta conectarse a la red,
ve ağ eğer mümkünse bir yanıt getiriyor.
y la red envía una respuesta de ser posible.
Bu modelde hiçbir şey bozulmaz ve bu yüzden
Nada se interrumpe en este modelo, de esa manera,
Servis Çalışanı sadece aşamalı bir iyileştirmedir.
Service Worker es solo una mejora progresiva.
Ve bu nedenle Servis Çalışanı dahice bir şey.
Y por esa razón Service Worker es una genialidad.
Eğer Servis Çalışanını destekleyen kullanıcılarınızın bir alt kümeniz varsa,
Si tienes un subconjunto de usuarios que son compatibles con Service Worker,
o zaman gelişmiş bir deneyim yaşayacaklar,
ellos obtendrán una experiencia mejorada,
biraz daha çekici bir şey.
algo más interesante.
Tarayıcısı desteklemediği için bunu tecrübe edemeyen kullanıcılarınız da
Y para los usuarios sin compatibilidad, porque sus navegadores no lo tienen implementado todavía,
bugün edindikleri tecrübenin aynısını elde edecekler.
ellos obtendrán la misma experiencia de siempre.
Yani bu Servis Çalışanı kullanma veya kullanmama meselesi değil.
Así que no se trata de elegir entre utilizar o no utilizar Service Worker.
Onun yerine, Servis Çalışanına
Sino que considérenlo como una capa adicional
kullanıcılarınıza çok daha iyi bir deneyim vermek için
que pueden agregar a su app
uygulamanıza ekleyebileceğiniz ek katman olarak bakabilirsiniz.
para darle a algunos usuarios una mejor experiencia.
Bence bu oldukça müthiş.
Creo que eso es genial.
Ve eğer ilgiliyseniz,
Y si están interesados, hay estrategias
Servis Çalışanı desteklenmediğinde
como utilizar <i>App Cache</i> como plan B
geri çekilme olarak kullanılan<i> App Cache</i> gibi stratejiler var.
si Server Worker no es compatible.
Genel olarak, eğer daha fazlasıyla ilgileniyorsanız Matt Gaunt'un birçok detaya değindiği harika bir yazısı var.
Si desean saber más está este increíble ensayo de Matt Gaunt, que profundiza en mucho detalle.
Piyasada çok iyi kaynaklar var. O yüzden videoyu izledikten sonra
Hay buen material sobre el tema, así que al finalizar este video,
orada kesinlikle biraz araştırma yapın.
realicen una búsqueda adicional allí.
Şimdi, kendi Servis Çalışanınızı kurmak için
Para configurar tu propio Service Worker,
biraz kod yazmak gerekir.
hay que realizar algo de codificación.
Kayıt işini, önbelleklemeyi, vesaireyi ayarlamak zorundasınız.
Tienes que configurar registros, aplicaciones,
Çılgınca bir şey.
almacenamiento y bla, bla, bla. Es una locura.
Neyse ki, bunun için bir element var.
Afortunadamente, existe un elemento para ello.
Polymer takımının yeni Platinyum Element koleksiyonu sayesinde
Gracias a la colección Platinum Element del equipo Polymer,
ücretsiz olarak Servis Çalışanı desteği alıyorsunuz.
obtendrás la asistencia de Service Worker de forma gratuita.
Polymer Başlangıç Setinde zaten mevcut,
Ya está configurado en Polymer Starter Kit
bu yüzden nasıl kullanacağınızı göstereceğim.
así que les mostraré como utilizarlo.
Bugün yapacağımız şey bu.
Esto es lo que armaremos hoy.
Çok tipik bir Polymer Başlangıç Seti uygulaması.
Es un Kit de Inicio muy básico.
Gördüğünüz gibi, onu çevrimdışı ayarlayabiliyorum.
Pueden ver aquí, mientras lo uso, que puedo configurarlo como desconectado.
Sağa sola tıklayıp kullanabiliyorum
Luego puedo clickear y utilizar la aplicación,
ve o da çalışmaya devam ediyor.
y seguirá funcionando.
Ağ üzerinden bir harita resmi yüklemek için
Puedo tocar aquí para cargar la imagen de un mapa
bu düğmeye tıklıyorum ve o da çalışıyor.
desde la red, y seguirá funcionando.
Bunu nasıl yapıyoruz?
Entonces, ¿cómo hacemos esto?
İlk yapmanız gereken şey, Polymer Başlangıç Setini indirmek.
Bueno, lo primero que deben hacer es descargar el Polymer Starter Kit.
Bunu developers.google.com sitesinden edinebilirsiniz.
Pueden descargarlo desde <i>developers.google.com</i>
Sonra Başlangıç Seti <i>GitHub</i> sayfasına gitmek ve
Luego diríjanse al sitio de GitHub del Starter Kit
Servis Çalışanını etkinleştirme rehberine
y revisen esta guía para activar la asistencia de Service Worker.
bakmak isteyeceksiniz.
De hecho es muy fácil.
Oldukça kolay. Birkaç satır HTML'yi yorumdan çıkarmanız
Solo deben activar un par de líneas de código HTML
ve bu dosyanızın sonuna bu küçük<i> precache gulp</i> görevini
y luego agregar este pequeño código pre caché
eklemeniz gerekiyor.
al final de tu archivo.
Bazılarınız bunun neden devre dışı bırakıldığını merak edebilir.
Alguno de ustedes se preguntará, ¿porque está desconectado?
Neden Servis Çalışanı varsayılan olarak çalıştırılmaz?
¿Porque no hacer que Service Worker funcione de manera predeterminada?
Aslında Başlangıç Setinin ilk versiyonlarında,
De hecho, en versiones previas del Starter Kit,
varsayılan olarak devredeydi.
estaba configurado de manera predeterminada.
Ama bunun Servis Çalışanının yerel sunucu portunu
Pero descubrimos que podía ser muy confuso para ciertos usuarios
devralacağını ummayan kullanıcılar için kafa karıştırıcı
que no esperaban que Service Worker
olabileceğini gördük.
tomara los puertos de sus servidores.
Ve birden tamamen ayrı bir site geliştiriyor
De pronto se hallaban desarrollando un sitio separado,
ve Polymer Başlangıç Setinin çevrimdışı versiyonunu görüyorlardı.
mientras visualizaban la versión sin conexión del Polymer Starter Kit.
Kafa karışıklığına sebep olduğu için,
Entonces, como había confusiones decidimos hacer
Servis Çalışanı desteğini isteğe bağlı bir özellik
de la asistencia de Service Worker una opción electiva.
yapmaya karar verdik. Böylece onu kullanırken ne olacağınızı tam olarak biliyorsunuz.
Así, cuando lo utilizas sabes exactamente lo que obtendrás.
Pekâlâ, Servis Çalışanı desteğini adım adım ekleyelim.
Sigamos los pasos para agregar la asistencia de Service Worker.
Yapacağımız ilk şey, <i>index.html</i> dosyasına gidiyoruz
Lo primero que haremos es dirigirnos al archivo <i>index.html</i>
ve sayfanın sonuna iniyoruz.
y desplazarnos hasta el final de la página.
Ve buradaki açıklamalı metni göreceksiniz.
Y verán este bloque de texto con comentarios.
Bunu yorumdan çıkaralım.
Transfórmenlos en ejecutables.
Bunun içinde, kâğıt tostumuz var.
Por aquí, tenemos un <i>paper toast</i>, una pequeña notificación
Bu, kullanıcılara uygulamanın çevrimdışı çalıştığını
en la esquina, notificando al usuario
gösteren küçük bir bildiri.
que su app funciona sin conexión.
Elimizde Platinyum Servis Çalışanı kayıt elementi
Tenemos este elemento del registro Platino
ve platinyum Servis Çalışanı önbellek elementi var.
y un elemento caché del Service Worker Platino.
Servis Çalışanı kayıt elemanı belgeniz içinde Servis Çalışanı oluşturup
El elemento de registro de Service Worker será el que cree y registre
kaydecektir.
tu Service Worker en el documento.
Detay vermek istediğim birkaç özniteliği var.
Tiene ciertas propiedades que quiero detallar.
İlki bu otomatik kayıt özniteliği.
La primera es la capacidad de auto registrarse.
Bu, elemente devam ederek Servis Çalışanını kurup
Esto le avisa al elemento que continúe e instale el Service Worker
başlatmasını anlatır.
para su inicio.
Eğer burada değilse biraz JavaScript yazarak
Si esto no estuviera aquí, deberías tener un código de JavaScript
işlemi devam ettirmelisiniz.
que realice ese proceso.
Bu <i>skip-waiting</i> özniteliği Servis Çalışanına
La propiedad de salteo le informa al Service Worker
bekleme aşamasını geçmesini ve doğrudan aktif aşamaya geçmesini söyler.
que salte el período de espera y se dirija al período activo.
Normalde Servis Çalışanı güncelleme sırasında,
Usualmente durante una actualización,
tüm kullanıcı sekmelerinin kapalı olup olmadığını bekleyip görecek.
esperará para ver si todas las pestañas de los usuarios están cerradas.
Aynı site üzerinde birden fazla sekme açık olabilir.
Ya sabes, tal vez tengas varias pestañas abiertas
Bu, aktive etmeye çalışmadan önce hepsinin kapalı olup olmadığını
en el mismo sitio. Esperará a ver si están todas cerradas antes de intentar activarse.
bekleyip görecektir. Bu durumda, endişelenmeyin.
En ese caso, no se preocupen.
Aynı sayfada birden çok sekmenin açık olması sorun değil.
Está bien si hay varias pestañas abiertas.
Devam edip işinizi yapın.
Solo continúen haciendo lo suyo.
Bu sonuncusu, <i>clients-claim</i> Servis Çalışanına
Esta última, <i>clients-claim</i>, le notifica a Service Worker
aktive edildiğinde devam edip
que una vez activado,
hemen sayfanın kontrolünü ele almasını
debería iniciarse y tomar control del sitio,
ve alım taleplerini engellemeye başlamasını söyler.
y comenzar a interceptar las solicitudes de búsquedas.
Yani bunların ikisini birleştirmek oldukça etkili bir model.
Así que combinando ambas se convierte en un poderoso patrón.
Şimdi, burada gördüğünüz önbellek elementi
Ahora, el elemento caché que ven aquí debajo
önbelleğe dosya eklenmesini ve bize geri getirmesini halledecek.
se encargará de agregar archivos al caché y devolvernos los mismos.
Burada varsayılan önbellek stratejisi bulunuyor.
Aquí se halla esta estrategia caché estándar,
Şu anda, önce ağ olarak ayarlanmış,
configurada para conectarse primero a la red,
yani önce ağa bağlanacak ve eğer bir şey 404 verirse
esto significa que se dirigirá a la red, y si algún error aparece,
o zaman önbelleğe başvuracak.
entonces se dirigirá al caché.
Bunu önce bellek veya sadece bellek bile yapabilirsiniz.
Puedes configurarlo para dirigirse primero al caché, o que solo se dirija al él.
Burada çalışabileceğiniz
Hay varias estrategias que puedes utilizar aquí.
birkaç farklı strateji var. Son olarak, önyükleme dosya özniteliğiniz var.
Por último, está este pequeño código pre caché.
Ve buradaki <i>precache.json</i>, dosya yollarının bir bildirim dosyası.
El <i>precache.json</i> es el nombre de un archivo de manifiesto...
Aslında Servis Çalışanının, başladığında önyükleme yapmasını istediğimiz
Es básicamente un despliegue de archivos... que queremos que Service Worker pre almacene por nosotros
dosya yollarının bir dizisi.
una vez que inicie el sistema.
Bunlar, kullanıcının belki de henüz görmediği
Estas son cosas que el usuario no ha visto todavía,
fakat ihtiyaç duyacaklarını bildiğimiz şeyler.
pero sabemos que necesitará,
O yüzden, Servis Çalışanına başlar başlamaz tüm değerleri almasını söyleyeceğiz.
así que le notificaremos a Service Worker, que tome esas tareas apenas inicie.
Aslında buna birazdan değineceğim.
Volveremos a este tema en un momento,
Şimdi devam edelim ve geri kalanının
ahora continuemos para ver qué debemos hacer
çalışması için neler gerektiğine bakalım.
para lograr que el resto funcione.
<i>elements.html</i> dosyamızda
Cerca de los archivos HTML,
biraz aşağılara iniyoruz
iremos aquí debajo un segundo,
ve bu iki ifadeyi yorumdan çıkarıyoruz.
y activaremos estos dos códigos de importación.
Bunlar Platinyum Elementlerimiz için ve şimdi uygulamamıza yüklenebilirler.
Estos son para nuestros Elementos Platino y estarán cargados en la aplicación.
<i>Gulp serve</i> yazıyoruz. Yerel sunucumuzu başlatabiliriz.
Ejecutaremos <i>gulp-serve</i>. Podemos iniciar nuestro servidor local.
Hazır olduğunda tarayıcıyı bizim için açacak.
De hecho abrirá el navegador automáticamente cuando esté listo.
Ve sonra uygulamamızı burada görebiliriz.
Y luego veremos nuestra aplicación aquí.
Sol alt kısımda görüyoruz.
En la esquina inferior izquierda
Önbelleklemenin tamamlandığını
se notificará que el almacenamiento está completo
ve çevrimdışı çalıştığımızı bildiriyor.
y estamos trabajando sin conexión.
Ve aslında, <i>dev tools</i>'ı açıp<i> Mobile Emulation</i> modunu açarak
Y, de hecho, podemos verificarlo abriendo las herramientas del desarrollador
bunu doğrulayabiliriz.
y activando el modo de emulación móvil.
Ve buraya gidiyorum. Ağ vanasını kullanarak sayfayı kısacağım
Y como pueden ver, iré por aquí, utilizaré el acelerador de redes
ki çevrimdışı olsun.
para acelerar el sitio, para que este sin conexión.
Ve şimdi yenileyebiliriz.
Y luego podemos actualizar.
İçeriğimiz yüklenmeye devam edecek.
Nuestro contenido continuará cargándose.
Kenar çubuğunu açıyor,
Podemos abrir la barra lateral. Ver opciones.
sağa sola tıklıyoruz. Farklı rotaların yüklendiğini görebilirsiniz.
Verán que los enlaces se están cargando.
Bu oldukça iyi gözüküyor, fakat İletişim sayfasına gidiyoruz
Se ve bien, pero al ir a la página de Contacto
ve aşağıdaki düğmeye tıklıyoruz
y darle click al botón aquí debajo,
ve resmimiz bize 404 veriyor.
vemos que la imagen nos está dando un error.
Neler oluyor?
Entonces, ¿qué sucede?
Bu noktada, Servis Çalışanı, kullanıcı sitede dolaşırken
Service Worker está almacenando recursos de forma dinámica
dinamik olarak değerleri önbellekliyor.
mientras que el usuario navega por el sitio.
Fakat benim yapmak istediğim şey kullanıcı sayfayı ziyaret etmemiş olsa da
Pero lo que quiero, es asegurarme que el mapa esté disponible,
haritanın kullanılabilir olmasını sağlamak.
incluso sin que hayan visitado la página.
Bunu yapmak için, Servis Çalışanına
Para ello, debo notificarle a Service Worker
bir değeri önyükleme yapmasını söylemek zorundayım.
que almacene por adelantado ese recurso.
Bunun nasıl yapıldığını göstereyim.
Déjenme mostrarles cómo hacerlo.
Pekâlâ, önyüklemek istediğimiz değer bu harita jpeg dosyası.
Bien, el recurso que queremos almacenar es este mapa en formato JPEG.
Ve eğer hatırlarsanız, <i>precache.json</i> dosyasından bahsetmiştim.
Y si lo recuerdan, les hablé de este archivo <i>precache.json</i>,
Bir nevi Servis Çalışanının bizim için
que es un archivo de manifiesto
önbelleğe almasını istediğimiz dosyaların bir bildirimi,
que queremos que Service Worker almacene por nosotros,
kullanıcı henüz onları görmemiş olsa da.
aunque el usuario no lo haya visto.
Eğer buna bazı dosyalar eklemek istiyorsak
Si queremos agregar archivos a la función,
bunu yapmanın çok kolay bir yolu da bu elemente başka bir
una manera simple de hacerlo es agregar otro atributo a este elemento.
öznitelik eklemektir. Ve bu özniteliğin adı <i>precache</i>.
Y este atributo se llama <i>precache.</i>
Ve bu özniteliğe bir dizi geçirebiliriz,
Y podemos darle a este atributo un <i>array</i>...
bir JSON dizisi.
que será un JSON <i>array</i>.
Tek tırnakları dışarıda nasıl kullandığıma dikkat edin.
Notarán que utilizo comillas simples por fuera,
Böylece çift tırnakları içeride kullanabilirim.
así puedo usar las comillas dobles dentro.
Çünkü <i>JSON</i> sadece çift tırnakları alıyor.
Eso es porque JSON solo acepta comillas dobles.
Ona <i>precache.json</i>'da birleştirmesi gereken bir <i>JSON</i> dosya yolu dizisi verebiliriz.
Crearemos un JSON <i>array</i> de rutas de archivo que deberían combinarse en el almacenamiento de JSON.
Yani bu tek dosya yolu ile,
Entonces, solo con esta ruta de archivo,
uygulamam tamamen hazır ve her şey çalışacak.
mi aplicación está configurada y todo debería funcionar.
Fakat ben bunu yaparken
Pero, mientras hacía esto, me puse a pensar,
bu dosyanın olayı ne diye düşündüm.
¿qué sucede con este archivo?
Nereden geliyor?
O sea, ¿de dónde proviene?
Nasıl oluştu?
¿Cómo se generó?
İçinde ne var?
¿Qué hay dentro?
Bunun için, <i>gulp</i> dosyamızın içine gireceğiz.
Para ello, nos adentraremos a un archivo GULP.
Ve elimizde içine bakabileceğimiz
Y tenemos esta tarea de pre almacenamiento,
bir önyükleme görevi var.
que podemos observar mejor aquí.
Ve onun yapacağı şey, ufak bir <i>glob</i> dosya yolları oluşturmak olacak.
Y lo que hace es construir un <i>glob</i> de rutas de archivo.
Ve bir <i>glob</i>, eğer daha önce duymadıysanız,
Y un <i>glob</i>, si no oyeron nunca ese término,
aslında karakter dizisi kullanılarak
es básicamente un conjunto de rutas de archivos
üretilmiş bir dosya yolları dizisidir.
que son generados utilizando esta cadena.
Ve bu karakter dizisi düzenli bir ifade gibidir.
Y esta cadena es una denominación común.
Diyor ki, element dizinindeki,<i> script</i> dizinindeki,
Dice que, combine cualquier cosa en el directorio de elemento,
stil dizinindeki, herhangi alt klasörü,
en el directorio de comandos en el directorio de estilos,
herhangi bir dosyayı eşleştir.
cualquier subdirectorio, cualquier archivo que se halle allí.
Yani bu oldukça açık,
Así que es bastante amplio,
bu dizinlerdeki herhangi bir şeyi eşlemeli
cualquier cosa en esos directorios,
ve bu bildirim dosyasına eklemeli.
combínalo y agrégalo al archivo de manifiesto.
Ayrıca burada da web bileşen <i>polyfill</i>'leri
También tenemos esta línea aquí,
ve indeks dosyalarımız gibi
en la que dirigiremos archivos individualmente
tekil dosyaları dizine ittiğimiz bir satırımız var.
hacia ese conjunto, como nuestros componentes web y nuestro archivo de inicio.
Değerlerle dolu bir klasörü önbellekleme gibi bir şey yapmanız gerekiyor
Entonces si necesitas hacer algo como almacenar una carpeta completa llena de recursos,
ve bunu HTML içindeki<i> precache</i> özniteliği içine
en vez de pre almacenarlas en HTML,
koymayı tercih etmiyorsanız
las podríamos poner aquí.
onu buraya bırakabiliriz. Her şeyi <i>images</i> dizinine önbelleklemenizi söyleyebiliriz.
Ordenar que almacene todo en el directorio de imágenes.
Bu bir seçenek.
Esa es una opción.
Eğer sadece tekil dosyaları geçirmek istiyorsanız
Y si solo quieres almacenar archivos individuales,
diğer seçenek, bunu bu küçük<i> push call</i>'a eklemek.
otra opción sería agregar este pequeño <i>push call</i>.
Bunu yapabilirdiniz,
Podrías hacer eso, aunque probablemente
gerçi muhtemelen en kolayı bunu biçimlendirme içinde yapmak
es más fácil hacer esto en el etiquetado,
çünkü tek bir öznitelik.
ya que se trata de un solo atributo allí.
Fakat bunun nasıl çalıştığını
Pero quería que supieran como funciona esto
ve sahip olduğunuz seçenekleri bilmenizi istiyorum.
y cuáles son las opciones disponibles.
Ve bu işlemdeki son adım
El último paso en este proceso
varsayılan <i>gulp</i> görevinin içinde çalışan
es asegurarnos que hemos activado la tarea de pre almacenamiento
önyükleme görevinin devrede olduğundan emin olun.
para que se ejecute dentro del conjunto de tareas predeterminadas.
O yüzden buraya önyükleme ekliyoruz.
Agregaremos <i>precache</i> aquí.
Ve bunun yaptığı şey,
Y esto garantizará que cuando alguien
bir kişi dağıtım derlemesi yapıyorken<i> precache.json</i> dosyasının oluşturulduğunu
está armando la distribución se genere
temin etmek.
el archivo <i>precache.JSON</i> automáticamente.
Bu noktada, işimiz bitti.
Hasta aquí, ya hemos terminado. Todo funcionará.
Her şey çalışacak. Tarayıcımıza geçebiliriz.
Podemos volver al navegador.
Sayfayı yeniliyoruz.
Actualizar la página.
Gördüğünüz gibi yavaşlatmayı tekrar Çevrimdışı yaptım.
Verán que coloque el acelerador como desconectado nuevamente.
Sağa sola tıklıyorum.
Y ahora clickeo por ahí.
Ve İletişim kısmına geldiğimde, Haritayı Göster düğmesine tıklıyorum.
Y al llegar a la sección de Contacto, Clickeo en "Muéstrame el mapa".
Ağa veya bu durumda önbelleğe başvuracak
Y se conectara con la red, o en este caso, el caché,
ve harita resmini yükleyecek.
y cargará la imagen del mapa.
Dediğim gibi, bu dehşet bir şey.
Como dije, esto es genial.
Uygulamanız tamamen çevrimdışı çalışıyor
Tienes toda la aplicación funcionando sin conexión
ve tek bir satır bile JavaScript yazmak zorunda kalmadınız.
y no tuviste que escribir ni una línea de códigos JavaScript.
Web bileşenleri ve Servis Çalışanı sayesinde
Sucedió mágicamente gracias al poder de los componentes web y Service Worker.
büyülü bir şekilde oldu.
Eso es todo por hoy.
Bugünlük bu kadar arkadaşlar. Sorularınız varsa lütfen yorumlar kısmına yazın.
Si tienes consultas, déjalas en los comentarios.
Hepsini okumaya çalışıyorum.
Intentaré leer la mayoría.
Ayrıca, Abone ol düğmesine tıklamayı da unutmayın ki
También, asegúrate de suscribirte, así no te pierdes ningún episodio.
hiçbir bölümü kaçırmayın. İzlediğiniz için teşekkürler. Görüşmek üzere.
Nuevamente, gracias por seguirnos. Hasta el próximo programa.
Selam Polycast'çılar. Ben Rob.
Hola, polycasters. Aquí Rob. Es hora de Preguntas y Respuestas.
Soru&Cevap zamanı. Bu haftanın sorusu Dr. Robrez'den geliyor.
Esta semana la pregunta es del Dr. Robrez...
Selam Doktor.
así que, hola doctor...
Polymer 1.0'da eski çekirdek stil elementiyle yapabildiğimiz gibi
que consulta, si en Polymer 1.0, ¿podemos realizar asociación de datos dentro de nuestro estilo,
stilimiz içinde veri bağlama yapabilir miyiz diye soruyor.
como solíamos poder hacerlo en el antiguo sistema?
Veya sınıf adları içinde veri bağlama yapmak
¿O es recomendable realizar asociación de datos
önerilen bir yaklaşım mı?
dentro de tus propias categorías?
Örneğin, <i>class foo/bar</i>
Entonces, por ejemplo, tienes una categoría <i>[foo.bar]</i>
ve sonra <i>baths</i> adında başka bir sınıf için veri bağlantısı.
y otra asociación de datos para una llamada <i>[baths].</i>
Çok iyi bir soru.
Es una muy buena pregunta.
Polymer 1.0'da stiller içerisinde veri bağlama
En Polymer 1.0, no puedes realizar asociación de datos
yapamıyorsunuz.
dentro del estilo.
Yol haritamıza koymayı düşündüğümüz şeylerden birisi de bu,
Esto es algo que pensábamos poner en el camino,
fakat şu anda bunun için bir süre veremiyoruz.
pero por ahora no hay ningún lenguaje ETA para ello.
Ayrıca, diziler içerisinde de bağlama ifadeleri yapamıyorsunuz.
Además, no puedes realizar asociación de datos dentro de las cadenas.
Tavsiye edilen yaklaşım, tüm sınıf listenizi alıp
La estrategia recomendable es tomar todo tu listado de categorías
bundan hesaplanmış bağlama denen, -daha doğrusu bizim dediğimiz-
y generar lo que llamaríamos... digo, lo que llamamos...
şeyi üretmek.
una asociación computada a partir de los datos.
Hesaplanmış bağlama yapmakla ilgili
Revisa estos links para leer acerca de
bilgi almak için bu bağlantıyı kullanabilirsiniz.
cómo realizar asociaciones computadas en los documentos.
Bunlar harika.
Son fantásticas. Puedes asignarles las tareas.
Bir bağımsız değişkeni geçirebilir
Y te devolverán una cadena,
ve o da tüm sınıf listesini dolduracak karakter dizisini getirebilir.
que completará el listado de categorías por ti.
Gerçekten harika soru.
Una buena pregunta. Muchas gracias por enviarla.
Gönderdiğin için teşekkürler. Eğer sorularınız varsa lütfen yorumlar bölümüne bırakın.
Si tienes alguna duda, déjala en los comentarios.
Okuyup hepsini cevaplamaya çalışıyoruz.
Intentaremos leer y responder a la mayor cantidad posible.
Belki sorunuza bir sonraki Polycast'te yer veririz.
Y tal vez aparezcas en el próximo episodio de <i>Polycast</i>.
İzlediğiniz için tekrar teşekkür ederim.
Gracias por seguirnos.
Abone ol düğmesine tıklamayı unutmayın. Görüşmek üzere.
Asegúrense de suscribirse, y hasta el próximo programa.
Similar videos:

Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201546% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201542% match

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201538% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201534% match

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201532% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201427% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201427% match

Service Worker Toolbox, Totally Tooling Tips (S3 Mini Tip #2)
Chrome for Developers
47.8K views 221 likes 3 dislikes 30 Mar 201625% match

Google Summer of Code: Organizations Apply
Google for Developers
28.4K views 206 likes 8 dislikes 19 Jan 201725% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201425% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201425% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201525% match

An Introduction to Brillo, the OS for IoT
Google for Developers
64.4K views 215 likes 4 dislikes 27 Oct 201523% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201423% match

All About Polymer at SFHTML5 (Complete Event Recording)
Google for Developers
79.5K views 445 likes 15 dislikes 01 May 201423% match

Google Play Services 8.3
Google for Developers
51K views 342 likes 37 dislikes 05 Nov 201523% match


Realtime RecyclerViews with FirebaseUI - Firecasts #3
Google for Developers
50.8K views 456 likes 5 dislikes 01 Mar 201622% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201422% match

An Introduction to CocoaPods (Route 85)
Google for Developers
74.8K views 1.3K likes 20 dislikes 29 May 201522% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201622% match

Introduction to WebGL with Tony Parisi
Google for Developers
51K views 445 likes 15 dislikes 04 Feb 201422% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201422% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201621% match

What Deep Dream sees -- LazyWeb #12
Google for Developers
51.6K views 413 likes 27 dislikes 07 Jul 201521% match

Machine Learning over Coffee with Josh Gordon - Coffee with a Googler
Google for Developers
85.1K views 1.9K likes 20 dislikes 30 Mar 201621% match

TensorFlow: Machine Learning for Everyone
Google for Developers
537.8K views 2.8K likes 59 dislikes 15 Feb 201721% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201621% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201621% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201421% match


Settings Privacy About Contact Donate