[{"data":1,"prerenderedAt":4306},["ShallowReactive",2],{"content-/ckeefer/2017-2/morepwatoya-part1":3},{"article":4,"all":3421},{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"excerpt":10,"publishDate":11,"tags":12,"body":16,"_type":3412,"_id":3413,"_source":3414,"_file":3415,"_stem":3416,"_extension":3417,"author":3418},"/ckeefer/2017-2/morepwatoya-part1","2017-2",false,"","More PWA to Ya! (Progressive Web Apps, Part 1)","It's project kickoff time, and you're having a conversation with your client about what form the application will take:","2017-02-01",[13,14,15],"pwa","mobile","series",{"type":17,"children":18,"toc":3401},"root",[19,26,123,139,144,156,161,166,173,187,192,200,214,219,284,289,324,330,335,365,709,714,866,887,893,898,919,1818,1824,1829,3232,3237,3244,3249,3262,3268,3281,3295,3316,3322,3336,3341,3370,3376,3390,3395],{"type":20,"tag":21,"props":22,"children":23},"element","p",{},[24],{"type":25,"value":10},"text",{"type":20,"tag":27,"props":28,"children":29},"blockquote",{},[30,41,51,60,69,78,87,96,105,114],{"type":20,"tag":21,"props":31,"children":32},{},[33,39],{"type":20,"tag":34,"props":35,"children":36},"em",{},[37],{"type":25,"value":38},"Client",{"type":25,"value":40},": I'm thinking mobile app. Our users will definitely be using this on the go.",{"type":20,"tag":21,"props":42,"children":43},{},[44,49],{"type":20,"tag":34,"props":45,"children":46},{},[47],{"type":25,"value":48},"Dev",{"type":25,"value":50},": Sure, we can do a native mobile-",{"type":20,"tag":21,"props":52,"children":53},{},[54,58],{"type":20,"tag":34,"props":55,"children":56},{},[57],{"type":25,"value":38},{"type":25,"value":59},": Mind you, we'll want a desktop version too. We'll need to use it from the office.",{"type":20,"tag":21,"props":61,"children":62},{},[63,67],{"type":20,"tag":34,"props":64,"children":65},{},[66],{"type":25,"value":48},{"type":25,"value":68},": Okay, well, a responsive web app-",{"type":20,"tag":21,"props":70,"children":71},{},[72,76],{"type":20,"tag":34,"props":73,"children":74},{},[75],{"type":25,"value":38},{"type":25,"value":77},": One of our priorities is definitely ease of access - we'll need the app accessible from the home screen, 'cause who has time for typing in URLs, amirite? We'll also want it to be useable offline, whenever people want to.",{"type":20,"tag":21,"props":79,"children":80},{},[81,85],{"type":20,"tag":34,"props":82,"children":83},{},[84],{"type":25,"value":48},{"type":25,"value":86},": Ye-yeah, no problem, we can wrap your web app in a webview, bundle it up as a native app, and-",{"type":20,"tag":21,"props":88,"children":89},{},[90,94],{"type":20,"tag":34,"props":91,"children":92},{},[93],{"type":25,"value":38},{"type":25,"value":95},": Yeah, cool. So they'll just be able to go to the site and install the app, right?",{"type":20,"tag":21,"props":97,"children":98},{},[99,103],{"type":20,"tag":34,"props":100,"children":101},{},[102],{"type":25,"value":48},{"type":25,"value":104},": Well, no, they'll have to download it from the appropriate App Store.",{"type":20,"tag":21,"props":106,"children":107},{},[108,112],{"type":20,"tag":34,"props":109,"children":110},{},[111],{"type":25,"value":38},{"type":25,"value":113},": Eh, that's a no-go - this is internal only, we can't have it showing up in the app stores. Didn't I make that clear from the start?",{"type":20,"tag":21,"props":115,"children":116},{},[117,121],{"type":20,"tag":34,"props":118,"children":119},{},[120],{"type":25,"value":48},{"type":25,"value":122},": ...",{"type":20,"tag":21,"props":124,"children":125},{},[126,128,137],{"type":25,"value":127},"The term your client was looking for is ",{"type":20,"tag":129,"props":130,"children":134},"a",{"href":131,"rel":132},"https://developers.google.com/web/progressive-web-apps/",[133],"nofollow",[135],{"type":25,"value":136},"Progressive Web App",{"type":25,"value":138}," - an application that acts like a responsive web app when accessed from the browser on any device, but can be installed to mobile devices like a native application. The link above makes the case for PWAs, so we won't belabour the point - if you're still here, it's because you're convinced it's time to build a PWA.",{"type":20,"tag":21,"props":140,"children":141},{},[142],{"type":25,"value":143},"Instead, let's dig into the details. We're going to assume you have, or are building, a responsive or mobile-focused web application, and want to convert it to a PWA. Keep in mind that, like wrapping a webapp in a webview, all the heavy lifting is still done by you, the developer, in CSS, HTML and JS - there's no PWA magic to make it look 'native'.",{"type":20,"tag":21,"props":145,"children":146},{},[147,149,154],{"type":25,"value":148},"Well, actually, there is a ",{"type":20,"tag":34,"props":150,"children":151},{},[152],{"type":25,"value":153},"little",{"type":25,"value":155}," magic. We'll get to that next time.",{"type":20,"tag":21,"props":157,"children":158},{},[159],{"type":25,"value":160},"Part 1 will focus on implementing a PWA the standards-compliant way. In Part 2, we'll address the 'little bit of magic' PWA's can have on Android to appear more native, and PWA's on iOS Safari, because it always has to be a special snowflake.",{"type":20,"tag":21,"props":162,"children":163},{},[164],{"type":25,"value":165},"Let's begin.",{"type":20,"tag":167,"props":168,"children":170},"h2",{"id":169},"service-please",[171],{"type":25,"value":172},"Service, Please",{"type":20,"tag":21,"props":174,"children":175},{},[176,178,185],{"type":25,"value":177},"Familiar with ",{"type":20,"tag":129,"props":179,"children":182},{"href":180,"rel":181},"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API",[133],[183],{"type":25,"value":184},"Service Workers",{"type":25,"value":186},"? If not, get ready to do some reading on them - Service Workers are the clockwork that make PWAs tick.",{"type":20,"tag":21,"props":188,"children":189},{},[190],{"type":25,"value":191},"Mozilla's summary of Service Workers make it clear how this is so - and also, how complex a Service Worker can be:",{"type":20,"tag":27,"props":193,"children":194},{},[195],{"type":20,"tag":21,"props":196,"children":197},{},[198],{"type":25,"value":199},"Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.",{"type":20,"tag":21,"props":201,"children":202},{},[203,205,212],{"type":25,"value":204},"If you're familiar with ",{"type":20,"tag":129,"props":206,"children":209},{"href":207,"rel":208},"https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers",[133],[210],{"type":25,"value":211},"Web Workers",{"type":25,"value":213},", you're about half-way there - Service Workers run on their own 'thread' (actual implementation details are up to the browser, of course), and have no access to the DOM, like a Web Worker. They have significantly more power than a web worker, however, particularly in terms of interacting with network requests; and, as a result, have more requirements to meet.",{"type":20,"tag":21,"props":215,"children":216},{},[217],{"type":25,"value":218},"Let's run down the checklist, and then we'll get into some implementation details. For a PWA's Service Worker you will need:",{"type":20,"tag":220,"props":221,"children":222},"ul",{},[223,236,257],{"type":20,"tag":224,"props":225,"children":226},"li",{},[227,229,234],{"type":25,"value":228},"A secure context - Service Workers must be run from a TLS-secured domain (https), because they can be Men-in-the-middle on every request from the browser for a given domain. The ",{"type":20,"tag":34,"props":230,"children":231},{},[232],{"type":25,"value":233},"localhost",{"type":25,"value":235}," special-case domain is the only exception to this rule, for the sake of development.",{"type":20,"tag":224,"props":237,"children":238},{},[239,241,248,250,255],{"type":25,"value":240},"A full list of the items you need to cache (for the caching and serving from cache functionality of a Service Worker, which is a requirement to have your application considered a PWA). Wildcards can't be used - you need to give the full (relative) path of the resource you want cached. If you're familiar with the ",{"type":20,"tag":129,"props":242,"children":245},{"href":243,"rel":244},"https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache",[133],[246],{"type":25,"value":247},"Application Cache API",{"type":25,"value":249}," this restriction will be familiar to you. For your application to be considered a PWA, at ",{"type":20,"tag":34,"props":251,"children":252},{},[253],{"type":25,"value":254},"least",{"type":25,"value":256}," the start url must completely load when the user is offline.",{"type":20,"tag":224,"props":258,"children":259},{},[260,262,268,270,275,277,282],{"type":25,"value":261},"A means of serving the Service Worker from the root of the path that you want the Service Worker to have control over - so, if you want the Service Worker to be able to control and serve resources for your entire application, and your application is at ",{"type":20,"tag":129,"props":263,"children":266},{"href":264,"rel":265},"https://app.example.com/",[133],[267],{"type":25,"value":264},{"type":25,"value":269},", you will need to be able to serve the Service Worker from ",{"type":20,"tag":34,"props":271,"children":272},{},[273],{"type":25,"value":274},"/",{"type":25,"value":276}," (as opposed to, e.g. ",{"type":20,"tag":34,"props":278,"children":279},{},[280],{"type":25,"value":281},"/static/js/workers/",{"type":25,"value":283}," - if you serve from there, the only resources the Service Worker will be able to control will be those under that path).",{"type":20,"tag":21,"props":285,"children":286},{},[287],{"type":25,"value":288},"Additional checklist items for a PWA include:",{"type":20,"tag":220,"props":290,"children":291},{},[292,297,310],{"type":20,"tag":224,"props":293,"children":294},{},[295],{"type":25,"value":296},"A responsive (or mobile-focused) design.",{"type":20,"tag":224,"props":298,"children":299},{},[300,302,308],{"type":25,"value":301},"Quick initial load - Google, the company behind the original PWA spec (you may have heard of them), ",{"type":20,"tag":303,"props":304,"children":305},"strong",{},[306],{"type":25,"value":307},"strongly",{"type":25,"value":309}," suggests that your start url load under 10 seconds on a simulated 3G network - so no loading a half-dozen affiliate advertisements.",{"type":20,"tag":224,"props":311,"children":312},{},[313,315,322],{"type":25,"value":314},"You will want to consider making your application a ",{"type":20,"tag":129,"props":316,"children":319},{"href":317,"rel":318},"https://en.wikipedia.org/wiki/Single-page_application",[133],[320],{"type":25,"value":321},"SPA",{"type":25,"value":323}," - it's generally a good fit for this use case, especially if it allows you to cache more up-front, or trim down the number of bits your application needs to transfer over the network.",{"type":20,"tag":167,"props":325,"children":327},{"id":326},"looking-for-a-hard-worker-room-and-board-provided",[328],{"type":25,"value":329},"Looking for a Hard Worker, Room and Board Provided",{"type":20,"tag":21,"props":331,"children":332},{},[333],{"type":25,"value":334},"First things first, let's set up our web server to serve that Service Worker (lot of variations on 'serve' in that sentence) from the root of our domain, so we can control all resources and requests therein. We're going to assume you're using Python and Django in the example below, but the principle will always be the same.",{"type":20,"tag":21,"props":336,"children":337},{},[338,340,347,349,355,357,363],{"type":25,"value":339},"First, we'll create a service worker named ",{"type":20,"tag":341,"props":342,"children":344},"code",{"className":343},[],[345],{"type":25,"value":346},"CacheWorker.js",{"type":25,"value":348}," in our ",{"type":20,"tag":341,"props":350,"children":352},{"className":351},[],[353],{"type":25,"value":354},"static",{"type":25,"value":356}," directory, under a ",{"type":20,"tag":341,"props":358,"children":360},{"className":359},[],[361],{"type":25,"value":362},"serviceWorkers",{"type":25,"value":364}," directory. Then, we can create the view to serve this worker (and any others we might want to serve with potential control over all requests):",{"type":20,"tag":366,"props":367,"children":371},"pre",{"className":368,"code":369,"language":370,"meta":8,"style":8},"language-python shiki shiki-themes github-light github-dark","from django.conf import settings\n\ndef serve_worker(request, worker_name):\n    \"\"\"\n    Serve the requested service worker from the appropriate location in the static files.\n    We need to serve the worker this way in order to allow it access to requests made against the\n    root - whatever /sub/dir the worker ends up getting served from is the only location it will\n    have visibility on, so serving from / is the only way to ensure the worker has visibility on all\n    requests. Only a-zA-Z-_ characters can appear in the service worker name.\n\n    :param request:\n    :param worker_name:\n    :return:\n    \"\"\"\n    worker_path = path.join(settings.STATIC_ROOT, 'serviceWorkers', \"{}.js\".format(worker_name))\n    try:\n        with open(worker_path, 'r') as worker_file:\n            return HttpResponse(worker_file, content_type='application/javascript')\n    except IOError:\n        return HttpResponseNotFound()\n","python",[372],{"type":20,"tag":341,"props":373,"children":374},{"__ignoreMap":8},[375,403,413,433,443,452,461,470,479,488,496,505,514,523,531,590,604,643,677,695],{"type":20,"tag":376,"props":377,"children":380},"span",{"class":378,"line":379},"line",1,[381,387,393,398],{"type":20,"tag":376,"props":382,"children":384},{"style":383},"--shiki-default:#D73A49;--shiki-dark:#F97583",[385],{"type":25,"value":386},"from",{"type":20,"tag":376,"props":388,"children":390},{"style":389},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[391],{"type":25,"value":392}," django.conf ",{"type":20,"tag":376,"props":394,"children":395},{"style":383},[396],{"type":25,"value":397},"import",{"type":20,"tag":376,"props":399,"children":400},{"style":389},[401],{"type":25,"value":402}," settings\n",{"type":20,"tag":376,"props":404,"children":406},{"class":378,"line":405},2,[407],{"type":20,"tag":376,"props":408,"children":410},{"emptyLinePlaceholder":409},true,[411],{"type":25,"value":412},"\n",{"type":20,"tag":376,"props":414,"children":416},{"class":378,"line":415},3,[417,422,428],{"type":20,"tag":376,"props":418,"children":419},{"style":383},[420],{"type":25,"value":421},"def",{"type":20,"tag":376,"props":423,"children":425},{"style":424},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[426],{"type":25,"value":427}," serve_worker",{"type":20,"tag":376,"props":429,"children":430},{"style":389},[431],{"type":25,"value":432},"(request, worker_name):\n",{"type":20,"tag":376,"props":434,"children":436},{"class":378,"line":435},4,[437],{"type":20,"tag":376,"props":438,"children":440},{"style":439},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[441],{"type":25,"value":442},"    \"\"\"\n",{"type":20,"tag":376,"props":444,"children":446},{"class":378,"line":445},5,[447],{"type":20,"tag":376,"props":448,"children":449},{"style":439},[450],{"type":25,"value":451},"    Serve the requested service worker from the appropriate location in the static files.\n",{"type":20,"tag":376,"props":453,"children":455},{"class":378,"line":454},6,[456],{"type":20,"tag":376,"props":457,"children":458},{"style":439},[459],{"type":25,"value":460},"    We need to serve the worker this way in order to allow it access to requests made against the\n",{"type":20,"tag":376,"props":462,"children":464},{"class":378,"line":463},7,[465],{"type":20,"tag":376,"props":466,"children":467},{"style":439},[468],{"type":25,"value":469},"    root - whatever /sub/dir the worker ends up getting served from is the only location it will\n",{"type":20,"tag":376,"props":471,"children":473},{"class":378,"line":472},8,[474],{"type":20,"tag":376,"props":475,"children":476},{"style":439},[477],{"type":25,"value":478},"    have visibility on, so serving from / is the only way to ensure the worker has visibility on all\n",{"type":20,"tag":376,"props":480,"children":482},{"class":378,"line":481},9,[483],{"type":20,"tag":376,"props":484,"children":485},{"style":439},[486],{"type":25,"value":487},"    requests. Only a-zA-Z-_ characters can appear in the service worker name.\n",{"type":20,"tag":376,"props":489,"children":491},{"class":378,"line":490},10,[492],{"type":20,"tag":376,"props":493,"children":494},{"emptyLinePlaceholder":409},[495],{"type":25,"value":412},{"type":20,"tag":376,"props":497,"children":499},{"class":378,"line":498},11,[500],{"type":20,"tag":376,"props":501,"children":502},{"style":439},[503],{"type":25,"value":504},"    :param request:\n",{"type":20,"tag":376,"props":506,"children":508},{"class":378,"line":507},12,[509],{"type":20,"tag":376,"props":510,"children":511},{"style":439},[512],{"type":25,"value":513},"    :param worker_name:\n",{"type":20,"tag":376,"props":515,"children":517},{"class":378,"line":516},13,[518],{"type":20,"tag":376,"props":519,"children":520},{"style":439},[521],{"type":25,"value":522},"    :return:\n",{"type":20,"tag":376,"props":524,"children":526},{"class":378,"line":525},14,[527],{"type":20,"tag":376,"props":528,"children":529},{"style":439},[530],{"type":25,"value":442},{"type":20,"tag":376,"props":532,"children":534},{"class":378,"line":533},15,[535,540,545,550,556,561,566,570,575,580,585],{"type":20,"tag":376,"props":536,"children":537},{"style":389},[538],{"type":25,"value":539},"    worker_path ",{"type":20,"tag":376,"props":541,"children":542},{"style":383},[543],{"type":25,"value":544},"=",{"type":20,"tag":376,"props":546,"children":547},{"style":389},[548],{"type":25,"value":549}," path.join(settings.",{"type":20,"tag":376,"props":551,"children":553},{"style":552},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[554],{"type":25,"value":555},"STATIC_ROOT",{"type":20,"tag":376,"props":557,"children":558},{"style":389},[559],{"type":25,"value":560},", ",{"type":20,"tag":376,"props":562,"children":563},{"style":439},[564],{"type":25,"value":565},"'serviceWorkers'",{"type":20,"tag":376,"props":567,"children":568},{"style":389},[569],{"type":25,"value":560},{"type":20,"tag":376,"props":571,"children":572},{"style":439},[573],{"type":25,"value":574},"\"",{"type":20,"tag":376,"props":576,"children":577},{"style":552},[578],{"type":25,"value":579},"{}",{"type":20,"tag":376,"props":581,"children":582},{"style":439},[583],{"type":25,"value":584},".js\"",{"type":20,"tag":376,"props":586,"children":587},{"style":389},[588],{"type":25,"value":589},".format(worker_name))\n",{"type":20,"tag":376,"props":591,"children":593},{"class":378,"line":592},16,[594,599],{"type":20,"tag":376,"props":595,"children":596},{"style":383},[597],{"type":25,"value":598},"    try",{"type":20,"tag":376,"props":600,"children":601},{"style":389},[602],{"type":25,"value":603},":\n",{"type":20,"tag":376,"props":605,"children":607},{"class":378,"line":606},17,[608,613,618,623,628,633,638],{"type":20,"tag":376,"props":609,"children":610},{"style":383},[611],{"type":25,"value":612},"        with",{"type":20,"tag":376,"props":614,"children":615},{"style":552},[616],{"type":25,"value":617}," open",{"type":20,"tag":376,"props":619,"children":620},{"style":389},[621],{"type":25,"value":622},"(worker_path, ",{"type":20,"tag":376,"props":624,"children":625},{"style":439},[626],{"type":25,"value":627},"'r'",{"type":20,"tag":376,"props":629,"children":630},{"style":389},[631],{"type":25,"value":632},") ",{"type":20,"tag":376,"props":634,"children":635},{"style":383},[636],{"type":25,"value":637},"as",{"type":20,"tag":376,"props":639,"children":640},{"style":389},[641],{"type":25,"value":642}," worker_file:\n",{"type":20,"tag":376,"props":644,"children":646},{"class":378,"line":645},18,[647,652,657,663,667,672],{"type":20,"tag":376,"props":648,"children":649},{"style":383},[650],{"type":25,"value":651},"            return",{"type":20,"tag":376,"props":653,"children":654},{"style":389},[655],{"type":25,"value":656}," HttpResponse(worker_file, ",{"type":20,"tag":376,"props":658,"children":660},{"style":659},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[661],{"type":25,"value":662},"content_type",{"type":20,"tag":376,"props":664,"children":665},{"style":383},[666],{"type":25,"value":544},{"type":20,"tag":376,"props":668,"children":669},{"style":439},[670],{"type":25,"value":671},"'application/javascript'",{"type":20,"tag":376,"props":673,"children":674},{"style":389},[675],{"type":25,"value":676},")\n",{"type":20,"tag":376,"props":678,"children":680},{"class":378,"line":679},19,[681,686,691],{"type":20,"tag":376,"props":682,"children":683},{"style":383},[684],{"type":25,"value":685},"    except",{"type":20,"tag":376,"props":687,"children":688},{"style":552},[689],{"type":25,"value":690}," IOError",{"type":20,"tag":376,"props":692,"children":693},{"style":389},[694],{"type":25,"value":603},{"type":20,"tag":376,"props":696,"children":698},{"class":378,"line":697},20,[699,704],{"type":20,"tag":376,"props":700,"children":701},{"style":383},[702],{"type":25,"value":703},"        return",{"type":20,"tag":376,"props":705,"children":706},{"style":389},[707],{"type":25,"value":708}," HttpResponseNotFound()\n",{"type":20,"tag":21,"props":710,"children":711},{},[712],{"type":25,"value":713},"Next, in urls.py, we'll add the route to this view:",{"type":20,"tag":366,"props":715,"children":717},{"className":368,"code":716,"language":370,"meta":8,"style":8},"urlpatterns = [\n    # ...other patterns...\n    url(r'^worker-(?P\u003Cworker_name>[a-zA-Z\\-_]+).js$', views.serve_worker, name='serve_worker'),\n    # ...other patterns...\n]\n",[718],{"type":20,"tag":341,"props":719,"children":720},{"__ignoreMap":8},[721,738,747,851,858],{"type":20,"tag":376,"props":722,"children":723},{"class":378,"line":379},[724,729,733],{"type":20,"tag":376,"props":725,"children":726},{"style":389},[727],{"type":25,"value":728},"urlpatterns ",{"type":20,"tag":376,"props":730,"children":731},{"style":383},[732],{"type":25,"value":544},{"type":20,"tag":376,"props":734,"children":735},{"style":389},[736],{"type":25,"value":737}," [\n",{"type":20,"tag":376,"props":739,"children":740},{"class":378,"line":405},[741],{"type":20,"tag":376,"props":742,"children":744},{"style":743},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[745],{"type":25,"value":746},"    # ...other patterns...\n",{"type":20,"tag":376,"props":748,"children":749},{"class":378,"line":415},[750,755,760,765,770,776,781,787,792,798,803,808,813,818,823,827,832,837,841,846],{"type":20,"tag":376,"props":751,"children":752},{"style":389},[753],{"type":25,"value":754},"    url(",{"type":20,"tag":376,"props":756,"children":757},{"style":383},[758],{"type":25,"value":759},"r",{"type":20,"tag":376,"props":761,"children":762},{"style":439},[763],{"type":25,"value":764},"'",{"type":20,"tag":376,"props":766,"children":767},{"style":552},[768],{"type":25,"value":769},"^",{"type":20,"tag":376,"props":771,"children":773},{"style":772},"--shiki-default:#032F62;--shiki-dark:#DBEDFF",[774],{"type":25,"value":775},"worker-",{"type":20,"tag":376,"props":777,"children":778},{"style":552},[779],{"type":25,"value":780},"(",{"type":20,"tag":376,"props":782,"children":784},{"style":783},"--shiki-default:#22863A;--shiki-dark:#85E89D",[785],{"type":25,"value":786},"?P\u003Cworker_name>",{"type":20,"tag":376,"props":788,"children":789},{"style":552},[790],{"type":25,"value":791},"[a-zA-Z",{"type":20,"tag":376,"props":793,"children":795},{"style":794},"--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold",[796],{"type":25,"value":797},"\\-",{"type":20,"tag":376,"props":799,"children":800},{"style":552},[801],{"type":25,"value":802},"_]",{"type":20,"tag":376,"props":804,"children":805},{"style":383},[806],{"type":25,"value":807},"+",{"type":20,"tag":376,"props":809,"children":810},{"style":552},[811],{"type":25,"value":812},").",{"type":20,"tag":376,"props":814,"children":815},{"style":772},[816],{"type":25,"value":817},"js",{"type":20,"tag":376,"props":819,"children":820},{"style":552},[821],{"type":25,"value":822},"$",{"type":20,"tag":376,"props":824,"children":825},{"style":439},[826],{"type":25,"value":764},{"type":20,"tag":376,"props":828,"children":829},{"style":389},[830],{"type":25,"value":831},", views.serve_worker, ",{"type":20,"tag":376,"props":833,"children":834},{"style":659},[835],{"type":25,"value":836},"name",{"type":20,"tag":376,"props":838,"children":839},{"style":383},[840],{"type":25,"value":544},{"type":20,"tag":376,"props":842,"children":843},{"style":439},[844],{"type":25,"value":845},"'serve_worker'",{"type":20,"tag":376,"props":847,"children":848},{"style":389},[849],{"type":25,"value":850},"),\n",{"type":20,"tag":376,"props":852,"children":853},{"class":378,"line":435},[854],{"type":20,"tag":376,"props":855,"children":856},{"style":743},[857],{"type":25,"value":746},{"type":20,"tag":376,"props":859,"children":860},{"class":378,"line":445},[861],{"type":20,"tag":376,"props":862,"children":863},{"style":389},[864],{"type":25,"value":865},"]\n",{"type":20,"tag":21,"props":867,"children":868},{},[869,871,877,879,885],{"type":25,"value":870},"Now, assuming our domain was ",{"type":20,"tag":341,"props":872,"children":874},{"className":873},[],[875],{"type":25,"value":876},"https://app.example.com",{"type":25,"value":878},", a request to ",{"type":20,"tag":341,"props":880,"children":882},{"className":881},[],[883],{"type":25,"value":884},"https://app.example.com/worker-cacheWorker.js",{"type":25,"value":886}," will return our worker script.",{"type":20,"tag":167,"props":888,"children":890},{"id":889},"putting-your-workers-in-their-place",[891],{"type":25,"value":892},"Putting Your Workers in their Place",{"type":20,"tag":21,"props":894,"children":895},{},[896],{"type":25,"value":897},"Now that we're serving our worker script from the desired location, we need to tell the browser that it should be requesting said worker script, and installing it as a Service Worker.",{"type":20,"tag":21,"props":899,"children":900},{},[901,903,910,912,917],{"type":25,"value":902},"To this effect, we will want to use the ",{"type":20,"tag":129,"props":904,"children":907},{"href":905,"rel":906},"https://developer.mozilla.org/en-US/docs/Web/API/Navigator/serviceWorker",[133],[908],{"type":25,"value":909},"ServiceWorkerContainer",{"type":25,"value":911}," API to register our service worker. Of course, since our PWA is a ",{"type":20,"tag":34,"props":913,"children":914},{},[915],{"type":25,"value":916},"progressive",{"type":25,"value":918}," enhancement, we will check to ensure that the browser actually supports Service Workers before we try and install it - your application should have some fallback behaviour when it encounters a browser that doesn't.",{"type":20,"tag":366,"props":920,"children":923},{"className":921,"code":922,"language":817,"meta":8,"style":8},"language-js shiki shiki-themes github-light github-dark","/**\n * Install service workers in those browsers which support them.\n */\n(function(window){\n    var serviceWorkers = {\n        \"IMMEDIATE\": [],\n        \"LOAD\": ['cacheWorker'],\n        \"DELAY\": []\n    };\n\n    /**\n     * Attempt to register the worker, and log either the success or failure to the console.\n     * @param {String} worker\n     */\n    function registerWorker(worker){\n        window.navigator.serviceWorker.register('/worker-'+worker+'.js').then(function(reg){\n            console.log('Registration successful for worker '+worker+', with scope: ' + reg.scope);\n        }, function(error){\n            console.log('Service Worker registration failed for worker: ', worker, error);\n        });\n    }\n\n    /**\n     * Handle messages sent to the main thread by Service Workers.\n     * @param event\n     */\n    function handleMessage(event){\n        console.log(\"TODO: Your app should do something with the event data sent by the worker.\", event.data.message, event.data.data);\n    }\n\n    // Check for ServiceWorker support.\n    if ('serviceWorker' in window.navigator){\n        // Listen for messages broadcasted by any service worker\n        window.navigator.serviceWorker.addEventListener('message', handleMessage);\n\n        /*\n        * For each service worker, consider their priority queue.\n        * Workers in the 'IMMEDIATE' queue are registered as soon as we can - this is useful if,\n        * for example, we need to immediately be able to intercept requests.\n        * Workers within queue 'LOAD' are registered after document load - this is the time to start caching\n        * resources, for example, without contending with the browser for bandwidth.\n        * Workers in queue 'DELAY' are registered after the application lets us know explicitly that now is a\n        * good time. How your application goes about doing this is up to you. This last category\n        * is good for workers that are going to be carrying out long-term activities, like\n        * long-polling a server.\n        */\n        serviceWorkers.IMMEDIATE.forEach(registerWorker);\n\n        window.addEventListener('load', function(){\n            serviceWorkers.LOAD.forEach(registerWorker);\n        });\n\n        window.addEventListener('yourCustomDelayEvent', function(){\n            serviceWorkers.DELAY.forEach(registerWorker);\n        });\n    }\n})(window);\n",[924],{"type":20,"tag":341,"props":925,"children":926},{"__ignoreMap":8},[927,935,943,951,977,999,1012,1035,1048,1056,1063,1071,1079,1102,1110,1136,1205,1254,1279,1304,1312,1321,1329,1337,1346,1363,1371,1397,1424,1432,1440,1449,1478,1487,1514,1522,1531,1540,1549,1558,1567,1576,1585,1594,1603,1612,1621,1650,1658,1693,1719,1727,1735,1768,1793,1801,1809],{"type":20,"tag":376,"props":928,"children":929},{"class":378,"line":379},[930],{"type":20,"tag":376,"props":931,"children":932},{"style":743},[933],{"type":25,"value":934},"/**\n",{"type":20,"tag":376,"props":936,"children":937},{"class":378,"line":405},[938],{"type":20,"tag":376,"props":939,"children":940},{"style":743},[941],{"type":25,"value":942}," * Install service workers in those browsers which support them.\n",{"type":20,"tag":376,"props":944,"children":945},{"class":378,"line":415},[946],{"type":20,"tag":376,"props":947,"children":948},{"style":743},[949],{"type":25,"value":950}," */\n",{"type":20,"tag":376,"props":952,"children":953},{"class":378,"line":435},[954,958,963,967,972],{"type":20,"tag":376,"props":955,"children":956},{"style":389},[957],{"type":25,"value":780},{"type":20,"tag":376,"props":959,"children":960},{"style":383},[961],{"type":25,"value":962},"function",{"type":20,"tag":376,"props":964,"children":965},{"style":389},[966],{"type":25,"value":780},{"type":20,"tag":376,"props":968,"children":969},{"style":659},[970],{"type":25,"value":971},"window",{"type":20,"tag":376,"props":973,"children":974},{"style":389},[975],{"type":25,"value":976},"){\n",{"type":20,"tag":376,"props":978,"children":979},{"class":378,"line":445},[980,985,990,994],{"type":20,"tag":376,"props":981,"children":982},{"style":383},[983],{"type":25,"value":984},"    var",{"type":20,"tag":376,"props":986,"children":987},{"style":389},[988],{"type":25,"value":989}," serviceWorkers ",{"type":20,"tag":376,"props":991,"children":992},{"style":383},[993],{"type":25,"value":544},{"type":20,"tag":376,"props":995,"children":996},{"style":389},[997],{"type":25,"value":998}," {\n",{"type":20,"tag":376,"props":1000,"children":1001},{"class":378,"line":454},[1002,1007],{"type":20,"tag":376,"props":1003,"children":1004},{"style":439},[1005],{"type":25,"value":1006},"        \"IMMEDIATE\"",{"type":20,"tag":376,"props":1008,"children":1009},{"style":389},[1010],{"type":25,"value":1011},": [],\n",{"type":20,"tag":376,"props":1013,"children":1014},{"class":378,"line":463},[1015,1020,1025,1030],{"type":20,"tag":376,"props":1016,"children":1017},{"style":439},[1018],{"type":25,"value":1019},"        \"LOAD\"",{"type":20,"tag":376,"props":1021,"children":1022},{"style":389},[1023],{"type":25,"value":1024},": [",{"type":20,"tag":376,"props":1026,"children":1027},{"style":439},[1028],{"type":25,"value":1029},"'cacheWorker'",{"type":20,"tag":376,"props":1031,"children":1032},{"style":389},[1033],{"type":25,"value":1034},"],\n",{"type":20,"tag":376,"props":1036,"children":1037},{"class":378,"line":472},[1038,1043],{"type":20,"tag":376,"props":1039,"children":1040},{"style":439},[1041],{"type":25,"value":1042},"        \"DELAY\"",{"type":20,"tag":376,"props":1044,"children":1045},{"style":389},[1046],{"type":25,"value":1047},": []\n",{"type":20,"tag":376,"props":1049,"children":1050},{"class":378,"line":481},[1051],{"type":20,"tag":376,"props":1052,"children":1053},{"style":389},[1054],{"type":25,"value":1055},"    };\n",{"type":20,"tag":376,"props":1057,"children":1058},{"class":378,"line":490},[1059],{"type":20,"tag":376,"props":1060,"children":1061},{"emptyLinePlaceholder":409},[1062],{"type":25,"value":412},{"type":20,"tag":376,"props":1064,"children":1065},{"class":378,"line":498},[1066],{"type":20,"tag":376,"props":1067,"children":1068},{"style":743},[1069],{"type":25,"value":1070},"    /**\n",{"type":20,"tag":376,"props":1072,"children":1073},{"class":378,"line":507},[1074],{"type":20,"tag":376,"props":1075,"children":1076},{"style":743},[1077],{"type":25,"value":1078},"     * Attempt to register the worker, and log either the success or failure to the console.\n",{"type":20,"tag":376,"props":1080,"children":1081},{"class":378,"line":516},[1082,1087,1092,1097],{"type":20,"tag":376,"props":1083,"children":1084},{"style":743},[1085],{"type":25,"value":1086},"     * ",{"type":20,"tag":376,"props":1088,"children":1089},{"style":383},[1090],{"type":25,"value":1091},"@param",{"type":20,"tag":376,"props":1093,"children":1094},{"style":424},[1095],{"type":25,"value":1096}," {String}",{"type":20,"tag":376,"props":1098,"children":1099},{"style":389},[1100],{"type":25,"value":1101}," worker\n",{"type":20,"tag":376,"props":1103,"children":1104},{"class":378,"line":525},[1105],{"type":20,"tag":376,"props":1106,"children":1107},{"style":743},[1108],{"type":25,"value":1109},"     */\n",{"type":20,"tag":376,"props":1111,"children":1112},{"class":378,"line":533},[1113,1118,1123,1127,1132],{"type":20,"tag":376,"props":1114,"children":1115},{"style":383},[1116],{"type":25,"value":1117},"    function",{"type":20,"tag":376,"props":1119,"children":1120},{"style":424},[1121],{"type":25,"value":1122}," registerWorker",{"type":20,"tag":376,"props":1124,"children":1125},{"style":389},[1126],{"type":25,"value":780},{"type":20,"tag":376,"props":1128,"children":1129},{"style":659},[1130],{"type":25,"value":1131},"worker",{"type":20,"tag":376,"props":1133,"children":1134},{"style":389},[1135],{"type":25,"value":976},{"type":20,"tag":376,"props":1137,"children":1138},{"class":378,"line":592},[1139,1144,1149,1153,1158,1162,1166,1170,1175,1179,1184,1188,1192,1196,1201],{"type":20,"tag":376,"props":1140,"children":1141},{"style":389},[1142],{"type":25,"value":1143},"        window.navigator.serviceWorker.",{"type":20,"tag":376,"props":1145,"children":1146},{"style":424},[1147],{"type":25,"value":1148},"register",{"type":20,"tag":376,"props":1150,"children":1151},{"style":389},[1152],{"type":25,"value":780},{"type":20,"tag":376,"props":1154,"children":1155},{"style":439},[1156],{"type":25,"value":1157},"'/worker-'",{"type":20,"tag":376,"props":1159,"children":1160},{"style":383},[1161],{"type":25,"value":807},{"type":20,"tag":376,"props":1163,"children":1164},{"style":389},[1165],{"type":25,"value":1131},{"type":20,"tag":376,"props":1167,"children":1168},{"style":383},[1169],{"type":25,"value":807},{"type":20,"tag":376,"props":1171,"children":1172},{"style":439},[1173],{"type":25,"value":1174},"'.js'",{"type":20,"tag":376,"props":1176,"children":1177},{"style":389},[1178],{"type":25,"value":812},{"type":20,"tag":376,"props":1180,"children":1181},{"style":424},[1182],{"type":25,"value":1183},"then",{"type":20,"tag":376,"props":1185,"children":1186},{"style":389},[1187],{"type":25,"value":780},{"type":20,"tag":376,"props":1189,"children":1190},{"style":383},[1191],{"type":25,"value":962},{"type":20,"tag":376,"props":1193,"children":1194},{"style":389},[1195],{"type":25,"value":780},{"type":20,"tag":376,"props":1197,"children":1198},{"style":659},[1199],{"type":25,"value":1200},"reg",{"type":20,"tag":376,"props":1202,"children":1203},{"style":389},[1204],{"type":25,"value":976},{"type":20,"tag":376,"props":1206,"children":1207},{"class":378,"line":606},[1208,1213,1218,1222,1227,1231,1235,1239,1244,1249],{"type":20,"tag":376,"props":1209,"children":1210},{"style":389},[1211],{"type":25,"value":1212},"            console.",{"type":20,"tag":376,"props":1214,"children":1215},{"style":424},[1216],{"type":25,"value":1217},"log",{"type":20,"tag":376,"props":1219,"children":1220},{"style":389},[1221],{"type":25,"value":780},{"type":20,"tag":376,"props":1223,"children":1224},{"style":439},[1225],{"type":25,"value":1226},"'Registration successful for worker '",{"type":20,"tag":376,"props":1228,"children":1229},{"style":383},[1230],{"type":25,"value":807},{"type":20,"tag":376,"props":1232,"children":1233},{"style":389},[1234],{"type":25,"value":1131},{"type":20,"tag":376,"props":1236,"children":1237},{"style":383},[1238],{"type":25,"value":807},{"type":20,"tag":376,"props":1240,"children":1241},{"style":439},[1242],{"type":25,"value":1243},"', with scope: '",{"type":20,"tag":376,"props":1245,"children":1246},{"style":383},[1247],{"type":25,"value":1248}," +",{"type":20,"tag":376,"props":1250,"children":1251},{"style":389},[1252],{"type":25,"value":1253}," reg.scope);\n",{"type":20,"tag":376,"props":1255,"children":1256},{"class":378,"line":645},[1257,1262,1266,1270,1275],{"type":20,"tag":376,"props":1258,"children":1259},{"style":389},[1260],{"type":25,"value":1261},"        }, ",{"type":20,"tag":376,"props":1263,"children":1264},{"style":383},[1265],{"type":25,"value":962},{"type":20,"tag":376,"props":1267,"children":1268},{"style":389},[1269],{"type":25,"value":780},{"type":20,"tag":376,"props":1271,"children":1272},{"style":659},[1273],{"type":25,"value":1274},"error",{"type":20,"tag":376,"props":1276,"children":1277},{"style":389},[1278],{"type":25,"value":976},{"type":20,"tag":376,"props":1280,"children":1281},{"class":378,"line":679},[1282,1286,1290,1294,1299],{"type":20,"tag":376,"props":1283,"children":1284},{"style":389},[1285],{"type":25,"value":1212},{"type":20,"tag":376,"props":1287,"children":1288},{"style":424},[1289],{"type":25,"value":1217},{"type":20,"tag":376,"props":1291,"children":1292},{"style":389},[1293],{"type":25,"value":780},{"type":20,"tag":376,"props":1295,"children":1296},{"style":439},[1297],{"type":25,"value":1298},"'Service Worker registration failed for worker: '",{"type":20,"tag":376,"props":1300,"children":1301},{"style":389},[1302],{"type":25,"value":1303},", worker, error);\n",{"type":20,"tag":376,"props":1305,"children":1306},{"class":378,"line":697},[1307],{"type":20,"tag":376,"props":1308,"children":1309},{"style":389},[1310],{"type":25,"value":1311},"        });\n",{"type":20,"tag":376,"props":1313,"children":1315},{"class":378,"line":1314},21,[1316],{"type":20,"tag":376,"props":1317,"children":1318},{"style":389},[1319],{"type":25,"value":1320},"    }\n",{"type":20,"tag":376,"props":1322,"children":1324},{"class":378,"line":1323},22,[1325],{"type":20,"tag":376,"props":1326,"children":1327},{"emptyLinePlaceholder":409},[1328],{"type":25,"value":412},{"type":20,"tag":376,"props":1330,"children":1332},{"class":378,"line":1331},23,[1333],{"type":20,"tag":376,"props":1334,"children":1335},{"style":743},[1336],{"type":25,"value":1070},{"type":20,"tag":376,"props":1338,"children":1340},{"class":378,"line":1339},24,[1341],{"type":20,"tag":376,"props":1342,"children":1343},{"style":743},[1344],{"type":25,"value":1345},"     * Handle messages sent to the main thread by Service Workers.\n",{"type":20,"tag":376,"props":1347,"children":1349},{"class":378,"line":1348},25,[1350,1354,1358],{"type":20,"tag":376,"props":1351,"children":1352},{"style":743},[1353],{"type":25,"value":1086},{"type":20,"tag":376,"props":1355,"children":1356},{"style":383},[1357],{"type":25,"value":1091},{"type":20,"tag":376,"props":1359,"children":1360},{"style":389},[1361],{"type":25,"value":1362}," event\n",{"type":20,"tag":376,"props":1364,"children":1366},{"class":378,"line":1365},26,[1367],{"type":20,"tag":376,"props":1368,"children":1369},{"style":743},[1370],{"type":25,"value":1109},{"type":20,"tag":376,"props":1372,"children":1374},{"class":378,"line":1373},27,[1375,1379,1384,1388,1393],{"type":20,"tag":376,"props":1376,"children":1377},{"style":383},[1378],{"type":25,"value":1117},{"type":20,"tag":376,"props":1380,"children":1381},{"style":424},[1382],{"type":25,"value":1383}," handleMessage",{"type":20,"tag":376,"props":1385,"children":1386},{"style":389},[1387],{"type":25,"value":780},{"type":20,"tag":376,"props":1389,"children":1390},{"style":659},[1391],{"type":25,"value":1392},"event",{"type":20,"tag":376,"props":1394,"children":1395},{"style":389},[1396],{"type":25,"value":976},{"type":20,"tag":376,"props":1398,"children":1400},{"class":378,"line":1399},28,[1401,1406,1410,1414,1419],{"type":20,"tag":376,"props":1402,"children":1403},{"style":389},[1404],{"type":25,"value":1405},"        console.",{"type":20,"tag":376,"props":1407,"children":1408},{"style":424},[1409],{"type":25,"value":1217},{"type":20,"tag":376,"props":1411,"children":1412},{"style":389},[1413],{"type":25,"value":780},{"type":20,"tag":376,"props":1415,"children":1416},{"style":439},[1417],{"type":25,"value":1418},"\"TODO: Your app should do something with the event data sent by the worker.\"",{"type":20,"tag":376,"props":1420,"children":1421},{"style":389},[1422],{"type":25,"value":1423},", event.data.message, event.data.data);\n",{"type":20,"tag":376,"props":1425,"children":1427},{"class":378,"line":1426},29,[1428],{"type":20,"tag":376,"props":1429,"children":1430},{"style":389},[1431],{"type":25,"value":1320},{"type":20,"tag":376,"props":1433,"children":1435},{"class":378,"line":1434},30,[1436],{"type":20,"tag":376,"props":1437,"children":1438},{"emptyLinePlaceholder":409},[1439],{"type":25,"value":412},{"type":20,"tag":376,"props":1441,"children":1443},{"class":378,"line":1442},31,[1444],{"type":20,"tag":376,"props":1445,"children":1446},{"style":743},[1447],{"type":25,"value":1448},"    // Check for ServiceWorker support.\n",{"type":20,"tag":376,"props":1450,"children":1452},{"class":378,"line":1451},32,[1453,1458,1463,1468,1473],{"type":20,"tag":376,"props":1454,"children":1455},{"style":383},[1456],{"type":25,"value":1457},"    if",{"type":20,"tag":376,"props":1459,"children":1460},{"style":389},[1461],{"type":25,"value":1462}," (",{"type":20,"tag":376,"props":1464,"children":1465},{"style":439},[1466],{"type":25,"value":1467},"'serviceWorker'",{"type":20,"tag":376,"props":1469,"children":1470},{"style":383},[1471],{"type":25,"value":1472}," in",{"type":20,"tag":376,"props":1474,"children":1475},{"style":389},[1476],{"type":25,"value":1477}," window.navigator){\n",{"type":20,"tag":376,"props":1479,"children":1481},{"class":378,"line":1480},33,[1482],{"type":20,"tag":376,"props":1483,"children":1484},{"style":743},[1485],{"type":25,"value":1486},"        // Listen for messages broadcasted by any service worker\n",{"type":20,"tag":376,"props":1488,"children":1490},{"class":378,"line":1489},34,[1491,1495,1500,1504,1509],{"type":20,"tag":376,"props":1492,"children":1493},{"style":389},[1494],{"type":25,"value":1143},{"type":20,"tag":376,"props":1496,"children":1497},{"style":424},[1498],{"type":25,"value":1499},"addEventListener",{"type":20,"tag":376,"props":1501,"children":1502},{"style":389},[1503],{"type":25,"value":780},{"type":20,"tag":376,"props":1505,"children":1506},{"style":439},[1507],{"type":25,"value":1508},"'message'",{"type":20,"tag":376,"props":1510,"children":1511},{"style":389},[1512],{"type":25,"value":1513},", handleMessage);\n",{"type":20,"tag":376,"props":1515,"children":1517},{"class":378,"line":1516},35,[1518],{"type":20,"tag":376,"props":1519,"children":1520},{"emptyLinePlaceholder":409},[1521],{"type":25,"value":412},{"type":20,"tag":376,"props":1523,"children":1525},{"class":378,"line":1524},36,[1526],{"type":20,"tag":376,"props":1527,"children":1528},{"style":743},[1529],{"type":25,"value":1530},"        /*\n",{"type":20,"tag":376,"props":1532,"children":1534},{"class":378,"line":1533},37,[1535],{"type":20,"tag":376,"props":1536,"children":1537},{"style":743},[1538],{"type":25,"value":1539},"        * For each service worker, consider their priority queue.\n",{"type":20,"tag":376,"props":1541,"children":1543},{"class":378,"line":1542},38,[1544],{"type":20,"tag":376,"props":1545,"children":1546},{"style":743},[1547],{"type":25,"value":1548},"        * Workers in the 'IMMEDIATE' queue are registered as soon as we can - this is useful if,\n",{"type":20,"tag":376,"props":1550,"children":1552},{"class":378,"line":1551},39,[1553],{"type":20,"tag":376,"props":1554,"children":1555},{"style":743},[1556],{"type":25,"value":1557},"        * for example, we need to immediately be able to intercept requests.\n",{"type":20,"tag":376,"props":1559,"children":1561},{"class":378,"line":1560},40,[1562],{"type":20,"tag":376,"props":1563,"children":1564},{"style":743},[1565],{"type":25,"value":1566},"        * Workers within queue 'LOAD' are registered after document load - this is the time to start caching\n",{"type":20,"tag":376,"props":1568,"children":1570},{"class":378,"line":1569},41,[1571],{"type":20,"tag":376,"props":1572,"children":1573},{"style":743},[1574],{"type":25,"value":1575},"        * resources, for example, without contending with the browser for bandwidth.\n",{"type":20,"tag":376,"props":1577,"children":1579},{"class":378,"line":1578},42,[1580],{"type":20,"tag":376,"props":1581,"children":1582},{"style":743},[1583],{"type":25,"value":1584},"        * Workers in queue 'DELAY' are registered after the application lets us know explicitly that now is a\n",{"type":20,"tag":376,"props":1586,"children":1588},{"class":378,"line":1587},43,[1589],{"type":20,"tag":376,"props":1590,"children":1591},{"style":743},[1592],{"type":25,"value":1593},"        * good time. How your application goes about doing this is up to you. This last category\n",{"type":20,"tag":376,"props":1595,"children":1597},{"class":378,"line":1596},44,[1598],{"type":20,"tag":376,"props":1599,"children":1600},{"style":743},[1601],{"type":25,"value":1602},"        * is good for workers that are going to be carrying out long-term activities, like\n",{"type":20,"tag":376,"props":1604,"children":1606},{"class":378,"line":1605},45,[1607],{"type":20,"tag":376,"props":1608,"children":1609},{"style":743},[1610],{"type":25,"value":1611},"        * long-polling a server.\n",{"type":20,"tag":376,"props":1613,"children":1615},{"class":378,"line":1614},46,[1616],{"type":20,"tag":376,"props":1617,"children":1618},{"style":743},[1619],{"type":25,"value":1620},"        */\n",{"type":20,"tag":376,"props":1622,"children":1624},{"class":378,"line":1623},47,[1625,1630,1635,1640,1645],{"type":20,"tag":376,"props":1626,"children":1627},{"style":389},[1628],{"type":25,"value":1629},"        serviceWorkers.",{"type":20,"tag":376,"props":1631,"children":1632},{"style":552},[1633],{"type":25,"value":1634},"IMMEDIATE",{"type":20,"tag":376,"props":1636,"children":1637},{"style":389},[1638],{"type":25,"value":1639},".",{"type":20,"tag":376,"props":1641,"children":1642},{"style":424},[1643],{"type":25,"value":1644},"forEach",{"type":20,"tag":376,"props":1646,"children":1647},{"style":389},[1648],{"type":25,"value":1649},"(registerWorker);\n",{"type":20,"tag":376,"props":1651,"children":1653},{"class":378,"line":1652},48,[1654],{"type":20,"tag":376,"props":1655,"children":1656},{"emptyLinePlaceholder":409},[1657],{"type":25,"value":412},{"type":20,"tag":376,"props":1659,"children":1661},{"class":378,"line":1660},49,[1662,1667,1671,1675,1680,1684,1688],{"type":20,"tag":376,"props":1663,"children":1664},{"style":389},[1665],{"type":25,"value":1666},"        window.",{"type":20,"tag":376,"props":1668,"children":1669},{"style":424},[1670],{"type":25,"value":1499},{"type":20,"tag":376,"props":1672,"children":1673},{"style":389},[1674],{"type":25,"value":780},{"type":20,"tag":376,"props":1676,"children":1677},{"style":439},[1678],{"type":25,"value":1679},"'load'",{"type":20,"tag":376,"props":1681,"children":1682},{"style":389},[1683],{"type":25,"value":560},{"type":20,"tag":376,"props":1685,"children":1686},{"style":383},[1687],{"type":25,"value":962},{"type":20,"tag":376,"props":1689,"children":1690},{"style":389},[1691],{"type":25,"value":1692},"(){\n",{"type":20,"tag":376,"props":1694,"children":1696},{"class":378,"line":1695},50,[1697,1702,1707,1711,1715],{"type":20,"tag":376,"props":1698,"children":1699},{"style":389},[1700],{"type":25,"value":1701},"            serviceWorkers.",{"type":20,"tag":376,"props":1703,"children":1704},{"style":552},[1705],{"type":25,"value":1706},"LOAD",{"type":20,"tag":376,"props":1708,"children":1709},{"style":389},[1710],{"type":25,"value":1639},{"type":20,"tag":376,"props":1712,"children":1713},{"style":424},[1714],{"type":25,"value":1644},{"type":20,"tag":376,"props":1716,"children":1717},{"style":389},[1718],{"type":25,"value":1649},{"type":20,"tag":376,"props":1720,"children":1722},{"class":378,"line":1721},51,[1723],{"type":20,"tag":376,"props":1724,"children":1725},{"style":389},[1726],{"type":25,"value":1311},{"type":20,"tag":376,"props":1728,"children":1730},{"class":378,"line":1729},52,[1731],{"type":20,"tag":376,"props":1732,"children":1733},{"emptyLinePlaceholder":409},[1734],{"type":25,"value":412},{"type":20,"tag":376,"props":1736,"children":1738},{"class":378,"line":1737},53,[1739,1743,1747,1751,1756,1760,1764],{"type":20,"tag":376,"props":1740,"children":1741},{"style":389},[1742],{"type":25,"value":1666},{"type":20,"tag":376,"props":1744,"children":1745},{"style":424},[1746],{"type":25,"value":1499},{"type":20,"tag":376,"props":1748,"children":1749},{"style":389},[1750],{"type":25,"value":780},{"type":20,"tag":376,"props":1752,"children":1753},{"style":439},[1754],{"type":25,"value":1755},"'yourCustomDelayEvent'",{"type":20,"tag":376,"props":1757,"children":1758},{"style":389},[1759],{"type":25,"value":560},{"type":20,"tag":376,"props":1761,"children":1762},{"style":383},[1763],{"type":25,"value":962},{"type":20,"tag":376,"props":1765,"children":1766},{"style":389},[1767],{"type":25,"value":1692},{"type":20,"tag":376,"props":1769,"children":1771},{"class":378,"line":1770},54,[1772,1776,1781,1785,1789],{"type":20,"tag":376,"props":1773,"children":1774},{"style":389},[1775],{"type":25,"value":1701},{"type":20,"tag":376,"props":1777,"children":1778},{"style":552},[1779],{"type":25,"value":1780},"DELAY",{"type":20,"tag":376,"props":1782,"children":1783},{"style":389},[1784],{"type":25,"value":1639},{"type":20,"tag":376,"props":1786,"children":1787},{"style":424},[1788],{"type":25,"value":1644},{"type":20,"tag":376,"props":1790,"children":1791},{"style":389},[1792],{"type":25,"value":1649},{"type":20,"tag":376,"props":1794,"children":1796},{"class":378,"line":1795},55,[1797],{"type":20,"tag":376,"props":1798,"children":1799},{"style":389},[1800],{"type":25,"value":1311},{"type":20,"tag":376,"props":1802,"children":1804},{"class":378,"line":1803},56,[1805],{"type":20,"tag":376,"props":1806,"children":1807},{"style":389},[1808],{"type":25,"value":1320},{"type":20,"tag":376,"props":1810,"children":1812},{"class":378,"line":1811},57,[1813],{"type":20,"tag":376,"props":1814,"children":1815},{"style":389},[1816],{"type":25,"value":1817},"})(window);\n",{"type":20,"tag":167,"props":1819,"children":1821},{"id":1820},"cache-me-im-falling",[1822],{"type":25,"value":1823},"Cache Me, I'm Falling",{"type":20,"tag":21,"props":1825,"children":1826},{},[1827],{"type":25,"value":1828},"So, we have our server sending our cacheWorker file along properly, and we have the browser registering the service worker, and downloading and installing our script. That's great - except, our cacheWorker script is empty, so it doesn't do anything. Let's fix that.",{"type":20,"tag":366,"props":1830,"children":1832},{"className":921,"code":1831,"language":817,"meta":8,"style":8},"/**\n * Service worker intended for caching and serving files when the application is offline,\n * to meet the requirements for a PWA.\n * @author Christopher Keefer\n */\nvar cacheVersion = 1,\n    staticCache = 'static-cache-v'+cacheVersion,\n    cacheableResources = [\n        // Root - This MUST be in the cacheable resources for a PWA!\n        '/',\n        // Images\n        '/static/img/yourLogo.png',\n        //... any other static image resources your application will need ...\n        // CSS\n        '/static/css/yourapp.min.css',\n        // ... any other styling your app will need, order doesn't matter ....\n        // Fonts\n        '/static/css/fonts/roboto/roboto-regular.woff2',\n        // ... any other fonts ...\n        // JS\n        '/static/js/yourapp.min.js'\n        // ... any other JS - as with the other entries, the order you specify here doesn't matter,\n        // the files will be loaded in the order you indicate in your HTML document. ...\n    ];\n\n/**\n * On install of this worker, add all cacheableResources to the staticCache.\n * Note that workers will be (re-)installed when they have changed (byte-wise comparison)\n * from the last worker encountered with the registered url (see the installation of workers, above),\n * which can be as simple as changing the cacheVersion number to point to a new 'version' of the cache.\n * You will want to update that cacheVersion number each time you change any of the cached resources.\n * Doing so will cause the worker to re-request and re-cache the cacheableResources, which is how we\n * will refresh cached resources for the application.\n */\nself.addEventListener('install', function(event){\n    event.waitUntil(\n        caches.open(staticCache).then(function(cache){\n            return cache.addAll(cacheableResources);\n        }).then(function(){\n            // Take control of the client as soon as we're installed\n            // and the cache has been updated.\n            return self.skipWaiting();\n        })\n    );\n});\n\n/**\n * On activation of this service worker, delete old caches. Note that\n * we return a promise that resolves when all promises returned by\n * the delete calls within it resolve.\n * Once we've deleted the old cache, we need to let the clients know that\n * a new service worker (with a new cache) has taken over, and they'll\n * need to reload in order to get the newly cached resources, via\n * postMessage.\n * @param event\n */\nself.addEventListener('activate', function(event){\n    event.waitUntil(\n        caches.keys().then(function(cacheNames){\n            return Promise.all(\n                cacheNames.map(function(cacheName){\n                    if (cacheName !== staticCache){\n                        return caches.delete(cacheName);\n                    }\n                })\n            );\n        }).then(function(){\n            return self.clients.matchAll().then(function(clients){\n                return Promise.all(clients.map(function(client){\n                    return client.postMessage({message:'needs-reload'});\n                }));\n            });\n        })\n    );\n});\n\n/**\n * Intercept network requests so that we can serve the requested resource from the\n * cache, if we have it, or otherwise defer to the network.\n */\nself.addEventListener('fetch', function(event){\n    // Workaround for Chromium bug that makes ignoring the search\n    // parameter very slow when matching the request against the\n    // cached values: https://bugs.chromium.org/p/chromium/issues/detail?id=682677.\n    // Your application may not need this - or hey, it may even be fixed by the time\n    // you're reading this!\n    var hasSearch = (event.request.url.indexOf('?') !== -1);\n\n    event.respondWith(\n        caches.match(event.request, {\n            ignoreSearch: hasSearch\n        }).then(function(response){\n            return response || fetch(event.request);\n        })\n    );\n});\n",[1833],{"type":20,"tag":341,"props":1834,"children":1835},{"__ignoreMap":8},[1836,1843,1851,1859,1877,1884,1911,1937,1953,1961,1973,1981,1993,2001,2009,2021,2029,2037,2049,2057,2065,2073,2081,2089,2097,2104,2111,2119,2127,2135,2143,2151,2159,2167,2174,2215,2233,2276,2298,2322,2330,2338,2360,2368,2376,2384,2391,2398,2406,2414,2422,2430,2438,2446,2454,2469,2476,2516,2532,2575,2601,2636,2660,2684,2693,2702,2711,2735,2782,2833,2866,2875,2884,2892,2900,2908,2916,2924,2933,2942,2950,2991,3000,3009,3018,3027,3036,3095,3103,3120,3138,3147,3180,3208,3216,3224],{"type":20,"tag":376,"props":1837,"children":1838},{"class":378,"line":379},[1839],{"type":20,"tag":376,"props":1840,"children":1841},{"style":743},[1842],{"type":25,"value":934},{"type":20,"tag":376,"props":1844,"children":1845},{"class":378,"line":405},[1846],{"type":20,"tag":376,"props":1847,"children":1848},{"style":743},[1849],{"type":25,"value":1850}," * Service worker intended for caching and serving files when the application is offline,\n",{"type":20,"tag":376,"props":1852,"children":1853},{"class":378,"line":415},[1854],{"type":20,"tag":376,"props":1855,"children":1856},{"style":743},[1857],{"type":25,"value":1858}," * to meet the requirements for a PWA.\n",{"type":20,"tag":376,"props":1860,"children":1861},{"class":378,"line":435},[1862,1867,1872],{"type":20,"tag":376,"props":1863,"children":1864},{"style":743},[1865],{"type":25,"value":1866}," * ",{"type":20,"tag":376,"props":1868,"children":1869},{"style":383},[1870],{"type":25,"value":1871},"@author",{"type":20,"tag":376,"props":1873,"children":1874},{"style":424},[1875],{"type":25,"value":1876}," Christopher Keefer\n",{"type":20,"tag":376,"props":1878,"children":1879},{"class":378,"line":445},[1880],{"type":20,"tag":376,"props":1881,"children":1882},{"style":743},[1883],{"type":25,"value":950},{"type":20,"tag":376,"props":1885,"children":1886},{"class":378,"line":454},[1887,1892,1897,1901,1906],{"type":20,"tag":376,"props":1888,"children":1889},{"style":383},[1890],{"type":25,"value":1891},"var",{"type":20,"tag":376,"props":1893,"children":1894},{"style":389},[1895],{"type":25,"value":1896}," cacheVersion ",{"type":20,"tag":376,"props":1898,"children":1899},{"style":383},[1900],{"type":25,"value":544},{"type":20,"tag":376,"props":1902,"children":1903},{"style":552},[1904],{"type":25,"value":1905}," 1",{"type":20,"tag":376,"props":1907,"children":1908},{"style":389},[1909],{"type":25,"value":1910},",\n",{"type":20,"tag":376,"props":1912,"children":1913},{"class":378,"line":463},[1914,1919,1923,1928,1932],{"type":20,"tag":376,"props":1915,"children":1916},{"style":389},[1917],{"type":25,"value":1918},"    staticCache ",{"type":20,"tag":376,"props":1920,"children":1921},{"style":383},[1922],{"type":25,"value":544},{"type":20,"tag":376,"props":1924,"children":1925},{"style":439},[1926],{"type":25,"value":1927}," 'static-cache-v'",{"type":20,"tag":376,"props":1929,"children":1930},{"style":383},[1931],{"type":25,"value":807},{"type":20,"tag":376,"props":1933,"children":1934},{"style":389},[1935],{"type":25,"value":1936},"cacheVersion,\n",{"type":20,"tag":376,"props":1938,"children":1939},{"class":378,"line":472},[1940,1945,1949],{"type":20,"tag":376,"props":1941,"children":1942},{"style":389},[1943],{"type":25,"value":1944},"    cacheableResources ",{"type":20,"tag":376,"props":1946,"children":1947},{"style":383},[1948],{"type":25,"value":544},{"type":20,"tag":376,"props":1950,"children":1951},{"style":389},[1952],{"type":25,"value":737},{"type":20,"tag":376,"props":1954,"children":1955},{"class":378,"line":481},[1956],{"type":20,"tag":376,"props":1957,"children":1958},{"style":743},[1959],{"type":25,"value":1960},"        // Root - This MUST be in the cacheable resources for a PWA!\n",{"type":20,"tag":376,"props":1962,"children":1963},{"class":378,"line":490},[1964,1969],{"type":20,"tag":376,"props":1965,"children":1966},{"style":439},[1967],{"type":25,"value":1968},"        '/'",{"type":20,"tag":376,"props":1970,"children":1971},{"style":389},[1972],{"type":25,"value":1910},{"type":20,"tag":376,"props":1974,"children":1975},{"class":378,"line":498},[1976],{"type":20,"tag":376,"props":1977,"children":1978},{"style":743},[1979],{"type":25,"value":1980},"        // Images\n",{"type":20,"tag":376,"props":1982,"children":1983},{"class":378,"line":507},[1984,1989],{"type":20,"tag":376,"props":1985,"children":1986},{"style":439},[1987],{"type":25,"value":1988},"        '/static/img/yourLogo.png'",{"type":20,"tag":376,"props":1990,"children":1991},{"style":389},[1992],{"type":25,"value":1910},{"type":20,"tag":376,"props":1994,"children":1995},{"class":378,"line":516},[1996],{"type":20,"tag":376,"props":1997,"children":1998},{"style":743},[1999],{"type":25,"value":2000},"        //... any other static image resources your application will need ...\n",{"type":20,"tag":376,"props":2002,"children":2003},{"class":378,"line":525},[2004],{"type":20,"tag":376,"props":2005,"children":2006},{"style":743},[2007],{"type":25,"value":2008},"        // CSS\n",{"type":20,"tag":376,"props":2010,"children":2011},{"class":378,"line":533},[2012,2017],{"type":20,"tag":376,"props":2013,"children":2014},{"style":439},[2015],{"type":25,"value":2016},"        '/static/css/yourapp.min.css'",{"type":20,"tag":376,"props":2018,"children":2019},{"style":389},[2020],{"type":25,"value":1910},{"type":20,"tag":376,"props":2022,"children":2023},{"class":378,"line":592},[2024],{"type":20,"tag":376,"props":2025,"children":2026},{"style":743},[2027],{"type":25,"value":2028},"        // ... any other styling your app will need, order doesn't matter ....\n",{"type":20,"tag":376,"props":2030,"children":2031},{"class":378,"line":606},[2032],{"type":20,"tag":376,"props":2033,"children":2034},{"style":743},[2035],{"type":25,"value":2036},"        // Fonts\n",{"type":20,"tag":376,"props":2038,"children":2039},{"class":378,"line":645},[2040,2045],{"type":20,"tag":376,"props":2041,"children":2042},{"style":439},[2043],{"type":25,"value":2044},"        '/static/css/fonts/roboto/roboto-regular.woff2'",{"type":20,"tag":376,"props":2046,"children":2047},{"style":389},[2048],{"type":25,"value":1910},{"type":20,"tag":376,"props":2050,"children":2051},{"class":378,"line":679},[2052],{"type":20,"tag":376,"props":2053,"children":2054},{"style":743},[2055],{"type":25,"value":2056},"        // ... any other fonts ...\n",{"type":20,"tag":376,"props":2058,"children":2059},{"class":378,"line":697},[2060],{"type":20,"tag":376,"props":2061,"children":2062},{"style":743},[2063],{"type":25,"value":2064},"        // JS\n",{"type":20,"tag":376,"props":2066,"children":2067},{"class":378,"line":1314},[2068],{"type":20,"tag":376,"props":2069,"children":2070},{"style":439},[2071],{"type":25,"value":2072},"        '/static/js/yourapp.min.js'\n",{"type":20,"tag":376,"props":2074,"children":2075},{"class":378,"line":1323},[2076],{"type":20,"tag":376,"props":2077,"children":2078},{"style":743},[2079],{"type":25,"value":2080},"        // ... any other JS - as with the other entries, the order you specify here doesn't matter,\n",{"type":20,"tag":376,"props":2082,"children":2083},{"class":378,"line":1331},[2084],{"type":20,"tag":376,"props":2085,"children":2086},{"style":743},[2087],{"type":25,"value":2088},"        // the files will be loaded in the order you indicate in your HTML document. ...\n",{"type":20,"tag":376,"props":2090,"children":2091},{"class":378,"line":1339},[2092],{"type":20,"tag":376,"props":2093,"children":2094},{"style":389},[2095],{"type":25,"value":2096},"    ];\n",{"type":20,"tag":376,"props":2098,"children":2099},{"class":378,"line":1348},[2100],{"type":20,"tag":376,"props":2101,"children":2102},{"emptyLinePlaceholder":409},[2103],{"type":25,"value":412},{"type":20,"tag":376,"props":2105,"children":2106},{"class":378,"line":1365},[2107],{"type":20,"tag":376,"props":2108,"children":2109},{"style":743},[2110],{"type":25,"value":934},{"type":20,"tag":376,"props":2112,"children":2113},{"class":378,"line":1373},[2114],{"type":20,"tag":376,"props":2115,"children":2116},{"style":743},[2117],{"type":25,"value":2118}," * On install of this worker, add all cacheableResources to the staticCache.\n",{"type":20,"tag":376,"props":2120,"children":2121},{"class":378,"line":1399},[2122],{"type":20,"tag":376,"props":2123,"children":2124},{"style":743},[2125],{"type":25,"value":2126}," * Note that workers will be (re-)installed when they have changed (byte-wise comparison)\n",{"type":20,"tag":376,"props":2128,"children":2129},{"class":378,"line":1426},[2130],{"type":20,"tag":376,"props":2131,"children":2132},{"style":743},[2133],{"type":25,"value":2134}," * from the last worker encountered with the registered url (see the installation of workers, above),\n",{"type":20,"tag":376,"props":2136,"children":2137},{"class":378,"line":1434},[2138],{"type":20,"tag":376,"props":2139,"children":2140},{"style":743},[2141],{"type":25,"value":2142}," * which can be as simple as changing the cacheVersion number to point to a new 'version' of the cache.\n",{"type":20,"tag":376,"props":2144,"children":2145},{"class":378,"line":1442},[2146],{"type":20,"tag":376,"props":2147,"children":2148},{"style":743},[2149],{"type":25,"value":2150}," * You will want to update that cacheVersion number each time you change any of the cached resources.\n",{"type":20,"tag":376,"props":2152,"children":2153},{"class":378,"line":1451},[2154],{"type":20,"tag":376,"props":2155,"children":2156},{"style":743},[2157],{"type":25,"value":2158}," * Doing so will cause the worker to re-request and re-cache the cacheableResources, which is how we\n",{"type":20,"tag":376,"props":2160,"children":2161},{"class":378,"line":1480},[2162],{"type":20,"tag":376,"props":2163,"children":2164},{"style":743},[2165],{"type":25,"value":2166}," * will refresh cached resources for the application.\n",{"type":20,"tag":376,"props":2168,"children":2169},{"class":378,"line":1489},[2170],{"type":20,"tag":376,"props":2171,"children":2172},{"style":743},[2173],{"type":25,"value":950},{"type":20,"tag":376,"props":2175,"children":2176},{"class":378,"line":1516},[2177,2182,2186,2190,2195,2199,2203,2207,2211],{"type":20,"tag":376,"props":2178,"children":2179},{"style":389},[2180],{"type":25,"value":2181},"self.",{"type":20,"tag":376,"props":2183,"children":2184},{"style":424},[2185],{"type":25,"value":1499},{"type":20,"tag":376,"props":2187,"children":2188},{"style":389},[2189],{"type":25,"value":780},{"type":20,"tag":376,"props":2191,"children":2192},{"style":439},[2193],{"type":25,"value":2194},"'install'",{"type":20,"tag":376,"props":2196,"children":2197},{"style":389},[2198],{"type":25,"value":560},{"type":20,"tag":376,"props":2200,"children":2201},{"style":383},[2202],{"type":25,"value":962},{"type":20,"tag":376,"props":2204,"children":2205},{"style":389},[2206],{"type":25,"value":780},{"type":20,"tag":376,"props":2208,"children":2209},{"style":659},[2210],{"type":25,"value":1392},{"type":20,"tag":376,"props":2212,"children":2213},{"style":389},[2214],{"type":25,"value":976},{"type":20,"tag":376,"props":2216,"children":2217},{"class":378,"line":1524},[2218,2223,2228],{"type":20,"tag":376,"props":2219,"children":2220},{"style":389},[2221],{"type":25,"value":2222},"    event.",{"type":20,"tag":376,"props":2224,"children":2225},{"style":424},[2226],{"type":25,"value":2227},"waitUntil",{"type":20,"tag":376,"props":2229,"children":2230},{"style":389},[2231],{"type":25,"value":2232},"(\n",{"type":20,"tag":376,"props":2234,"children":2235},{"class":378,"line":1533},[2236,2241,2246,2251,2255,2259,2263,2267,2272],{"type":20,"tag":376,"props":2237,"children":2238},{"style":389},[2239],{"type":25,"value":2240},"        caches.",{"type":20,"tag":376,"props":2242,"children":2243},{"style":424},[2244],{"type":25,"value":2245},"open",{"type":20,"tag":376,"props":2247,"children":2248},{"style":389},[2249],{"type":25,"value":2250},"(staticCache).",{"type":20,"tag":376,"props":2252,"children":2253},{"style":424},[2254],{"type":25,"value":1183},{"type":20,"tag":376,"props":2256,"children":2257},{"style":389},[2258],{"type":25,"value":780},{"type":20,"tag":376,"props":2260,"children":2261},{"style":383},[2262],{"type":25,"value":962},{"type":20,"tag":376,"props":2264,"children":2265},{"style":389},[2266],{"type":25,"value":780},{"type":20,"tag":376,"props":2268,"children":2269},{"style":659},[2270],{"type":25,"value":2271},"cache",{"type":20,"tag":376,"props":2273,"children":2274},{"style":389},[2275],{"type":25,"value":976},{"type":20,"tag":376,"props":2277,"children":2278},{"class":378,"line":1542},[2279,2283,2288,2293],{"type":20,"tag":376,"props":2280,"children":2281},{"style":383},[2282],{"type":25,"value":651},{"type":20,"tag":376,"props":2284,"children":2285},{"style":389},[2286],{"type":25,"value":2287}," cache.",{"type":20,"tag":376,"props":2289,"children":2290},{"style":424},[2291],{"type":25,"value":2292},"addAll",{"type":20,"tag":376,"props":2294,"children":2295},{"style":389},[2296],{"type":25,"value":2297},"(cacheableResources);\n",{"type":20,"tag":376,"props":2299,"children":2300},{"class":378,"line":1551},[2301,2306,2310,2314,2318],{"type":20,"tag":376,"props":2302,"children":2303},{"style":389},[2304],{"type":25,"value":2305},"        }).",{"type":20,"tag":376,"props":2307,"children":2308},{"style":424},[2309],{"type":25,"value":1183},{"type":20,"tag":376,"props":2311,"children":2312},{"style":389},[2313],{"type":25,"value":780},{"type":20,"tag":376,"props":2315,"children":2316},{"style":383},[2317],{"type":25,"value":962},{"type":20,"tag":376,"props":2319,"children":2320},{"style":389},[2321],{"type":25,"value":1692},{"type":20,"tag":376,"props":2323,"children":2324},{"class":378,"line":1560},[2325],{"type":20,"tag":376,"props":2326,"children":2327},{"style":743},[2328],{"type":25,"value":2329},"            // Take control of the client as soon as we're installed\n",{"type":20,"tag":376,"props":2331,"children":2332},{"class":378,"line":1569},[2333],{"type":20,"tag":376,"props":2334,"children":2335},{"style":743},[2336],{"type":25,"value":2337},"            // and the cache has been updated.\n",{"type":20,"tag":376,"props":2339,"children":2340},{"class":378,"line":1578},[2341,2345,2350,2355],{"type":20,"tag":376,"props":2342,"children":2343},{"style":383},[2344],{"type":25,"value":651},{"type":20,"tag":376,"props":2346,"children":2347},{"style":389},[2348],{"type":25,"value":2349}," self.",{"type":20,"tag":376,"props":2351,"children":2352},{"style":424},[2353],{"type":25,"value":2354},"skipWaiting",{"type":20,"tag":376,"props":2356,"children":2357},{"style":389},[2358],{"type":25,"value":2359},"();\n",{"type":20,"tag":376,"props":2361,"children":2362},{"class":378,"line":1587},[2363],{"type":20,"tag":376,"props":2364,"children":2365},{"style":389},[2366],{"type":25,"value":2367},"        })\n",{"type":20,"tag":376,"props":2369,"children":2370},{"class":378,"line":1596},[2371],{"type":20,"tag":376,"props":2372,"children":2373},{"style":389},[2374],{"type":25,"value":2375},"    );\n",{"type":20,"tag":376,"props":2377,"children":2378},{"class":378,"line":1605},[2379],{"type":20,"tag":376,"props":2380,"children":2381},{"style":389},[2382],{"type":25,"value":2383},"});\n",{"type":20,"tag":376,"props":2385,"children":2386},{"class":378,"line":1614},[2387],{"type":20,"tag":376,"props":2388,"children":2389},{"emptyLinePlaceholder":409},[2390],{"type":25,"value":412},{"type":20,"tag":376,"props":2392,"children":2393},{"class":378,"line":1623},[2394],{"type":20,"tag":376,"props":2395,"children":2396},{"style":743},[2397],{"type":25,"value":934},{"type":20,"tag":376,"props":2399,"children":2400},{"class":378,"line":1652},[2401],{"type":20,"tag":376,"props":2402,"children":2403},{"style":743},[2404],{"type":25,"value":2405}," * On activation of this service worker, delete old caches. Note that\n",{"type":20,"tag":376,"props":2407,"children":2408},{"class":378,"line":1660},[2409],{"type":20,"tag":376,"props":2410,"children":2411},{"style":743},[2412],{"type":25,"value":2413}," * we return a promise that resolves when all promises returned by\n",{"type":20,"tag":376,"props":2415,"children":2416},{"class":378,"line":1695},[2417],{"type":20,"tag":376,"props":2418,"children":2419},{"style":743},[2420],{"type":25,"value":2421}," * the delete calls within it resolve.\n",{"type":20,"tag":376,"props":2423,"children":2424},{"class":378,"line":1721},[2425],{"type":20,"tag":376,"props":2426,"children":2427},{"style":743},[2428],{"type":25,"value":2429}," * Once we've deleted the old cache, we need to let the clients know that\n",{"type":20,"tag":376,"props":2431,"children":2432},{"class":378,"line":1729},[2433],{"type":20,"tag":376,"props":2434,"children":2435},{"style":743},[2436],{"type":25,"value":2437}," * a new service worker (with a new cache) has taken over, and they'll\n",{"type":20,"tag":376,"props":2439,"children":2440},{"class":378,"line":1737},[2441],{"type":20,"tag":376,"props":2442,"children":2443},{"style":743},[2444],{"type":25,"value":2445}," * need to reload in order to get the newly cached resources, via\n",{"type":20,"tag":376,"props":2447,"children":2448},{"class":378,"line":1770},[2449],{"type":20,"tag":376,"props":2450,"children":2451},{"style":743},[2452],{"type":25,"value":2453}," * postMessage.\n",{"type":20,"tag":376,"props":2455,"children":2456},{"class":378,"line":1795},[2457,2461,2465],{"type":20,"tag":376,"props":2458,"children":2459},{"style":743},[2460],{"type":25,"value":1866},{"type":20,"tag":376,"props":2462,"children":2463},{"style":383},[2464],{"type":25,"value":1091},{"type":20,"tag":376,"props":2466,"children":2467},{"style":389},[2468],{"type":25,"value":1362},{"type":20,"tag":376,"props":2470,"children":2471},{"class":378,"line":1803},[2472],{"type":20,"tag":376,"props":2473,"children":2474},{"style":743},[2475],{"type":25,"value":950},{"type":20,"tag":376,"props":2477,"children":2478},{"class":378,"line":1811},[2479,2483,2487,2491,2496,2500,2504,2508,2512],{"type":20,"tag":376,"props":2480,"children":2481},{"style":389},[2482],{"type":25,"value":2181},{"type":20,"tag":376,"props":2484,"children":2485},{"style":424},[2486],{"type":25,"value":1499},{"type":20,"tag":376,"props":2488,"children":2489},{"style":389},[2490],{"type":25,"value":780},{"type":20,"tag":376,"props":2492,"children":2493},{"style":439},[2494],{"type":25,"value":2495},"'activate'",{"type":20,"tag":376,"props":2497,"children":2498},{"style":389},[2499],{"type":25,"value":560},{"type":20,"tag":376,"props":2501,"children":2502},{"style":383},[2503],{"type":25,"value":962},{"type":20,"tag":376,"props":2505,"children":2506},{"style":389},[2507],{"type":25,"value":780},{"type":20,"tag":376,"props":2509,"children":2510},{"style":659},[2511],{"type":25,"value":1392},{"type":20,"tag":376,"props":2513,"children":2514},{"style":389},[2515],{"type":25,"value":976},{"type":20,"tag":376,"props":2517,"children":2519},{"class":378,"line":2518},58,[2520,2524,2528],{"type":20,"tag":376,"props":2521,"children":2522},{"style":389},[2523],{"type":25,"value":2222},{"type":20,"tag":376,"props":2525,"children":2526},{"style":424},[2527],{"type":25,"value":2227},{"type":20,"tag":376,"props":2529,"children":2530},{"style":389},[2531],{"type":25,"value":2232},{"type":20,"tag":376,"props":2533,"children":2535},{"class":378,"line":2534},59,[2536,2540,2545,2550,2554,2558,2562,2566,2571],{"type":20,"tag":376,"props":2537,"children":2538},{"style":389},[2539],{"type":25,"value":2240},{"type":20,"tag":376,"props":2541,"children":2542},{"style":424},[2543],{"type":25,"value":2544},"keys",{"type":20,"tag":376,"props":2546,"children":2547},{"style":389},[2548],{"type":25,"value":2549},"().",{"type":20,"tag":376,"props":2551,"children":2552},{"style":424},[2553],{"type":25,"value":1183},{"type":20,"tag":376,"props":2555,"children":2556},{"style":389},[2557],{"type":25,"value":780},{"type":20,"tag":376,"props":2559,"children":2560},{"style":383},[2561],{"type":25,"value":962},{"type":20,"tag":376,"props":2563,"children":2564},{"style":389},[2565],{"type":25,"value":780},{"type":20,"tag":376,"props":2567,"children":2568},{"style":659},[2569],{"type":25,"value":2570},"cacheNames",{"type":20,"tag":376,"props":2572,"children":2573},{"style":389},[2574],{"type":25,"value":976},{"type":20,"tag":376,"props":2576,"children":2578},{"class":378,"line":2577},60,[2579,2583,2588,2592,2597],{"type":20,"tag":376,"props":2580,"children":2581},{"style":383},[2582],{"type":25,"value":651},{"type":20,"tag":376,"props":2584,"children":2585},{"style":552},[2586],{"type":25,"value":2587}," Promise",{"type":20,"tag":376,"props":2589,"children":2590},{"style":389},[2591],{"type":25,"value":1639},{"type":20,"tag":376,"props":2593,"children":2594},{"style":424},[2595],{"type":25,"value":2596},"all",{"type":20,"tag":376,"props":2598,"children":2599},{"style":389},[2600],{"type":25,"value":2232},{"type":20,"tag":376,"props":2602,"children":2604},{"class":378,"line":2603},61,[2605,2610,2615,2619,2623,2627,2632],{"type":20,"tag":376,"props":2606,"children":2607},{"style":389},[2608],{"type":25,"value":2609},"                cacheNames.",{"type":20,"tag":376,"props":2611,"children":2612},{"style":424},[2613],{"type":25,"value":2614},"map",{"type":20,"tag":376,"props":2616,"children":2617},{"style":389},[2618],{"type":25,"value":780},{"type":20,"tag":376,"props":2620,"children":2621},{"style":383},[2622],{"type":25,"value":962},{"type":20,"tag":376,"props":2624,"children":2625},{"style":389},[2626],{"type":25,"value":780},{"type":20,"tag":376,"props":2628,"children":2629},{"style":659},[2630],{"type":25,"value":2631},"cacheName",{"type":20,"tag":376,"props":2633,"children":2634},{"style":389},[2635],{"type":25,"value":976},{"type":20,"tag":376,"props":2637,"children":2639},{"class":378,"line":2638},62,[2640,2645,2650,2655],{"type":20,"tag":376,"props":2641,"children":2642},{"style":383},[2643],{"type":25,"value":2644},"                    if",{"type":20,"tag":376,"props":2646,"children":2647},{"style":389},[2648],{"type":25,"value":2649}," (cacheName ",{"type":20,"tag":376,"props":2651,"children":2652},{"style":383},[2653],{"type":25,"value":2654},"!==",{"type":20,"tag":376,"props":2656,"children":2657},{"style":389},[2658],{"type":25,"value":2659}," staticCache){\n",{"type":20,"tag":376,"props":2661,"children":2663},{"class":378,"line":2662},63,[2664,2669,2674,2679],{"type":20,"tag":376,"props":2665,"children":2666},{"style":383},[2667],{"type":25,"value":2668},"                        return",{"type":20,"tag":376,"props":2670,"children":2671},{"style":389},[2672],{"type":25,"value":2673}," caches.",{"type":20,"tag":376,"props":2675,"children":2676},{"style":424},[2677],{"type":25,"value":2678},"delete",{"type":20,"tag":376,"props":2680,"children":2681},{"style":389},[2682],{"type":25,"value":2683},"(cacheName);\n",{"type":20,"tag":376,"props":2685,"children":2687},{"class":378,"line":2686},64,[2688],{"type":20,"tag":376,"props":2689,"children":2690},{"style":389},[2691],{"type":25,"value":2692},"                    }\n",{"type":20,"tag":376,"props":2694,"children":2696},{"class":378,"line":2695},65,[2697],{"type":20,"tag":376,"props":2698,"children":2699},{"style":389},[2700],{"type":25,"value":2701},"                })\n",{"type":20,"tag":376,"props":2703,"children":2705},{"class":378,"line":2704},66,[2706],{"type":20,"tag":376,"props":2707,"children":2708},{"style":389},[2709],{"type":25,"value":2710},"            );\n",{"type":20,"tag":376,"props":2712,"children":2714},{"class":378,"line":2713},67,[2715,2719,2723,2727,2731],{"type":20,"tag":376,"props":2716,"children":2717},{"style":389},[2718],{"type":25,"value":2305},{"type":20,"tag":376,"props":2720,"children":2721},{"style":424},[2722],{"type":25,"value":1183},{"type":20,"tag":376,"props":2724,"children":2725},{"style":389},[2726],{"type":25,"value":780},{"type":20,"tag":376,"props":2728,"children":2729},{"style":383},[2730],{"type":25,"value":962},{"type":20,"tag":376,"props":2732,"children":2733},{"style":389},[2734],{"type":25,"value":1692},{"type":20,"tag":376,"props":2736,"children":2738},{"class":378,"line":2737},68,[2739,2743,2748,2753,2757,2761,2765,2769,2773,2778],{"type":20,"tag":376,"props":2740,"children":2741},{"style":383},[2742],{"type":25,"value":651},{"type":20,"tag":376,"props":2744,"children":2745},{"style":389},[2746],{"type":25,"value":2747}," self.clients.",{"type":20,"tag":376,"props":2749,"children":2750},{"style":424},[2751],{"type":25,"value":2752},"matchAll",{"type":20,"tag":376,"props":2754,"children":2755},{"style":389},[2756],{"type":25,"value":2549},{"type":20,"tag":376,"props":2758,"children":2759},{"style":424},[2760],{"type":25,"value":1183},{"type":20,"tag":376,"props":2762,"children":2763},{"style":389},[2764],{"type":25,"value":780},{"type":20,"tag":376,"props":2766,"children":2767},{"style":383},[2768],{"type":25,"value":962},{"type":20,"tag":376,"props":2770,"children":2771},{"style":389},[2772],{"type":25,"value":780},{"type":20,"tag":376,"props":2774,"children":2775},{"style":659},[2776],{"type":25,"value":2777},"clients",{"type":20,"tag":376,"props":2779,"children":2780},{"style":389},[2781],{"type":25,"value":976},{"type":20,"tag":376,"props":2783,"children":2785},{"class":378,"line":2784},69,[2786,2791,2795,2799,2803,2808,2812,2816,2820,2824,2829],{"type":20,"tag":376,"props":2787,"children":2788},{"style":383},[2789],{"type":25,"value":2790},"                return",{"type":20,"tag":376,"props":2792,"children":2793},{"style":552},[2794],{"type":25,"value":2587},{"type":20,"tag":376,"props":2796,"children":2797},{"style":389},[2798],{"type":25,"value":1639},{"type":20,"tag":376,"props":2800,"children":2801},{"style":424},[2802],{"type":25,"value":2596},{"type":20,"tag":376,"props":2804,"children":2805},{"style":389},[2806],{"type":25,"value":2807},"(clients.",{"type":20,"tag":376,"props":2809,"children":2810},{"style":424},[2811],{"type":25,"value":2614},{"type":20,"tag":376,"props":2813,"children":2814},{"style":389},[2815],{"type":25,"value":780},{"type":20,"tag":376,"props":2817,"children":2818},{"style":383},[2819],{"type":25,"value":962},{"type":20,"tag":376,"props":2821,"children":2822},{"style":389},[2823],{"type":25,"value":780},{"type":20,"tag":376,"props":2825,"children":2826},{"style":659},[2827],{"type":25,"value":2828},"client",{"type":20,"tag":376,"props":2830,"children":2831},{"style":389},[2832],{"type":25,"value":976},{"type":20,"tag":376,"props":2834,"children":2836},{"class":378,"line":2835},70,[2837,2842,2847,2852,2857,2862],{"type":20,"tag":376,"props":2838,"children":2839},{"style":383},[2840],{"type":25,"value":2841},"                    return",{"type":20,"tag":376,"props":2843,"children":2844},{"style":389},[2845],{"type":25,"value":2846}," client.",{"type":20,"tag":376,"props":2848,"children":2849},{"style":424},[2850],{"type":25,"value":2851},"postMessage",{"type":20,"tag":376,"props":2853,"children":2854},{"style":389},[2855],{"type":25,"value":2856},"({message:",{"type":20,"tag":376,"props":2858,"children":2859},{"style":439},[2860],{"type":25,"value":2861},"'needs-reload'",{"type":20,"tag":376,"props":2863,"children":2864},{"style":389},[2865],{"type":25,"value":2383},{"type":20,"tag":376,"props":2867,"children":2869},{"class":378,"line":2868},71,[2870],{"type":20,"tag":376,"props":2871,"children":2872},{"style":389},[2873],{"type":25,"value":2874},"                }));\n",{"type":20,"tag":376,"props":2876,"children":2878},{"class":378,"line":2877},72,[2879],{"type":20,"tag":376,"props":2880,"children":2881},{"style":389},[2882],{"type":25,"value":2883},"            });\n",{"type":20,"tag":376,"props":2885,"children":2887},{"class":378,"line":2886},73,[2888],{"type":20,"tag":376,"props":2889,"children":2890},{"style":389},[2891],{"type":25,"value":2367},{"type":20,"tag":376,"props":2893,"children":2895},{"class":378,"line":2894},74,[2896],{"type":20,"tag":376,"props":2897,"children":2898},{"style":389},[2899],{"type":25,"value":2375},{"type":20,"tag":376,"props":2901,"children":2903},{"class":378,"line":2902},75,[2904],{"type":20,"tag":376,"props":2905,"children":2906},{"style":389},[2907],{"type":25,"value":2383},{"type":20,"tag":376,"props":2909,"children":2911},{"class":378,"line":2910},76,[2912],{"type":20,"tag":376,"props":2913,"children":2914},{"emptyLinePlaceholder":409},[2915],{"type":25,"value":412},{"type":20,"tag":376,"props":2917,"children":2919},{"class":378,"line":2918},77,[2920],{"type":20,"tag":376,"props":2921,"children":2922},{"style":743},[2923],{"type":25,"value":934},{"type":20,"tag":376,"props":2925,"children":2927},{"class":378,"line":2926},78,[2928],{"type":20,"tag":376,"props":2929,"children":2930},{"style":743},[2931],{"type":25,"value":2932}," * Intercept network requests so that we can serve the requested resource from the\n",{"type":20,"tag":376,"props":2934,"children":2936},{"class":378,"line":2935},79,[2937],{"type":20,"tag":376,"props":2938,"children":2939},{"style":743},[2940],{"type":25,"value":2941}," * cache, if we have it, or otherwise defer to the network.\n",{"type":20,"tag":376,"props":2943,"children":2945},{"class":378,"line":2944},80,[2946],{"type":20,"tag":376,"props":2947,"children":2948},{"style":743},[2949],{"type":25,"value":950},{"type":20,"tag":376,"props":2951,"children":2953},{"class":378,"line":2952},81,[2954,2958,2962,2966,2971,2975,2979,2983,2987],{"type":20,"tag":376,"props":2955,"children":2956},{"style":389},[2957],{"type":25,"value":2181},{"type":20,"tag":376,"props":2959,"children":2960},{"style":424},[2961],{"type":25,"value":1499},{"type":20,"tag":376,"props":2963,"children":2964},{"style":389},[2965],{"type":25,"value":780},{"type":20,"tag":376,"props":2967,"children":2968},{"style":439},[2969],{"type":25,"value":2970},"'fetch'",{"type":20,"tag":376,"props":2972,"children":2973},{"style":389},[2974],{"type":25,"value":560},{"type":20,"tag":376,"props":2976,"children":2977},{"style":383},[2978],{"type":25,"value":962},{"type":20,"tag":376,"props":2980,"children":2981},{"style":389},[2982],{"type":25,"value":780},{"type":20,"tag":376,"props":2984,"children":2985},{"style":659},[2986],{"type":25,"value":1392},{"type":20,"tag":376,"props":2988,"children":2989},{"style":389},[2990],{"type":25,"value":976},{"type":20,"tag":376,"props":2992,"children":2994},{"class":378,"line":2993},82,[2995],{"type":20,"tag":376,"props":2996,"children":2997},{"style":743},[2998],{"type":25,"value":2999},"    // Workaround for Chromium bug that makes ignoring the search\n",{"type":20,"tag":376,"props":3001,"children":3003},{"class":378,"line":3002},83,[3004],{"type":20,"tag":376,"props":3005,"children":3006},{"style":743},[3007],{"type":25,"value":3008},"    // parameter very slow when matching the request against the\n",{"type":20,"tag":376,"props":3010,"children":3012},{"class":378,"line":3011},84,[3013],{"type":20,"tag":376,"props":3014,"children":3015},{"style":743},[3016],{"type":25,"value":3017},"    // cached values: https://bugs.chromium.org/p/chromium/issues/detail?id=682677.\n",{"type":20,"tag":376,"props":3019,"children":3021},{"class":378,"line":3020},85,[3022],{"type":20,"tag":376,"props":3023,"children":3024},{"style":743},[3025],{"type":25,"value":3026},"    // Your application may not need this - or hey, it may even be fixed by the time\n",{"type":20,"tag":376,"props":3028,"children":3030},{"class":378,"line":3029},86,[3031],{"type":20,"tag":376,"props":3032,"children":3033},{"style":743},[3034],{"type":25,"value":3035},"    // you're reading this!\n",{"type":20,"tag":376,"props":3037,"children":3039},{"class":378,"line":3038},87,[3040,3044,3049,3053,3058,3063,3067,3072,3076,3080,3085,3090],{"type":20,"tag":376,"props":3041,"children":3042},{"style":383},[3043],{"type":25,"value":984},{"type":20,"tag":376,"props":3045,"children":3046},{"style":389},[3047],{"type":25,"value":3048}," hasSearch ",{"type":20,"tag":376,"props":3050,"children":3051},{"style":383},[3052],{"type":25,"value":544},{"type":20,"tag":376,"props":3054,"children":3055},{"style":389},[3056],{"type":25,"value":3057}," (event.request.url.",{"type":20,"tag":376,"props":3059,"children":3060},{"style":424},[3061],{"type":25,"value":3062},"indexOf",{"type":20,"tag":376,"props":3064,"children":3065},{"style":389},[3066],{"type":25,"value":780},{"type":20,"tag":376,"props":3068,"children":3069},{"style":439},[3070],{"type":25,"value":3071},"'?'",{"type":20,"tag":376,"props":3073,"children":3074},{"style":389},[3075],{"type":25,"value":632},{"type":20,"tag":376,"props":3077,"children":3078},{"style":383},[3079],{"type":25,"value":2654},{"type":20,"tag":376,"props":3081,"children":3082},{"style":383},[3083],{"type":25,"value":3084}," -",{"type":20,"tag":376,"props":3086,"children":3087},{"style":552},[3088],{"type":25,"value":3089},"1",{"type":20,"tag":376,"props":3091,"children":3092},{"style":389},[3093],{"type":25,"value":3094},");\n",{"type":20,"tag":376,"props":3096,"children":3098},{"class":378,"line":3097},88,[3099],{"type":20,"tag":376,"props":3100,"children":3101},{"emptyLinePlaceholder":409},[3102],{"type":25,"value":412},{"type":20,"tag":376,"props":3104,"children":3106},{"class":378,"line":3105},89,[3107,3111,3116],{"type":20,"tag":376,"props":3108,"children":3109},{"style":389},[3110],{"type":25,"value":2222},{"type":20,"tag":376,"props":3112,"children":3113},{"style":424},[3114],{"type":25,"value":3115},"respondWith",{"type":20,"tag":376,"props":3117,"children":3118},{"style":389},[3119],{"type":25,"value":2232},{"type":20,"tag":376,"props":3121,"children":3123},{"class":378,"line":3122},90,[3124,3128,3133],{"type":20,"tag":376,"props":3125,"children":3126},{"style":389},[3127],{"type":25,"value":2240},{"type":20,"tag":376,"props":3129,"children":3130},{"style":424},[3131],{"type":25,"value":3132},"match",{"type":20,"tag":376,"props":3134,"children":3135},{"style":389},[3136],{"type":25,"value":3137},"(event.request, {\n",{"type":20,"tag":376,"props":3139,"children":3141},{"class":378,"line":3140},91,[3142],{"type":20,"tag":376,"props":3143,"children":3144},{"style":389},[3145],{"type":25,"value":3146},"            ignoreSearch: hasSearch\n",{"type":20,"tag":376,"props":3148,"children":3150},{"class":378,"line":3149},92,[3151,3155,3159,3163,3167,3171,3176],{"type":20,"tag":376,"props":3152,"children":3153},{"style":389},[3154],{"type":25,"value":2305},{"type":20,"tag":376,"props":3156,"children":3157},{"style":424},[3158],{"type":25,"value":1183},{"type":20,"tag":376,"props":3160,"children":3161},{"style":389},[3162],{"type":25,"value":780},{"type":20,"tag":376,"props":3164,"children":3165},{"style":383},[3166],{"type":25,"value":962},{"type":20,"tag":376,"props":3168,"children":3169},{"style":389},[3170],{"type":25,"value":780},{"type":20,"tag":376,"props":3172,"children":3173},{"style":659},[3174],{"type":25,"value":3175},"response",{"type":20,"tag":376,"props":3177,"children":3178},{"style":389},[3179],{"type":25,"value":976},{"type":20,"tag":376,"props":3181,"children":3183},{"class":378,"line":3182},93,[3184,3188,3193,3198,3203],{"type":20,"tag":376,"props":3185,"children":3186},{"style":383},[3187],{"type":25,"value":651},{"type":20,"tag":376,"props":3189,"children":3190},{"style":389},[3191],{"type":25,"value":3192}," response ",{"type":20,"tag":376,"props":3194,"children":3195},{"style":383},[3196],{"type":25,"value":3197},"||",{"type":20,"tag":376,"props":3199,"children":3200},{"style":424},[3201],{"type":25,"value":3202}," fetch",{"type":20,"tag":376,"props":3204,"children":3205},{"style":389},[3206],{"type":25,"value":3207},"(event.request);\n",{"type":20,"tag":376,"props":3209,"children":3211},{"class":378,"line":3210},94,[3212],{"type":20,"tag":376,"props":3213,"children":3214},{"style":389},[3215],{"type":25,"value":2367},{"type":20,"tag":376,"props":3217,"children":3219},{"class":378,"line":3218},95,[3220],{"type":20,"tag":376,"props":3221,"children":3222},{"style":389},[3223],{"type":25,"value":2375},{"type":20,"tag":376,"props":3225,"children":3227},{"class":378,"line":3226},96,[3228],{"type":20,"tag":376,"props":3229,"children":3230},{"style":389},[3231],{"type":25,"value":2383},{"type":20,"tag":21,"props":3233,"children":3234},{},[3235],{"type":25,"value":3236},"So, that's a lot to take in, but the comments above should help. Let's break down a few of the more complex bits:",{"type":20,"tag":3238,"props":3239,"children":3241},"h3",{"id":3240},"install",[3242],{"type":25,"value":3243},"Install",{"type":20,"tag":21,"props":3245,"children":3246},{},[3247],{"type":25,"value":3248},"So, you'll notice that we have add an event listener for 'install'. This is the event that gets fired when a new version of the Service Worker is installed - whether for the first time, or because the Service Worker has changed in some way. The browser does a byte-wise comparison of the downloaded script, so any change will trigger a re-install of the script.",{"type":20,"tag":21,"props":3250,"children":3251},{},[3252,3254,3260],{"type":25,"value":3253},"Often, you won't need to change anything in the script itself, but some of the cached resources have changed, and we need to tell the browser that we want to refresh the cache. In order to do this, we'll change the ",{"type":20,"tag":341,"props":3255,"children":3257},{"className":3256},[],[3258],{"type":25,"value":3259},"cacheVersion",{"type":25,"value":3261}," number, which will trigger the browser to re-install the Service Worker, triggering our install event, and allowing us to re-downloand and cache all of the updated resources.",{"type":20,"tag":3238,"props":3263,"children":3265},{"id":3264},"activate",[3266],{"type":25,"value":3267},"Activate",{"type":20,"tag":21,"props":3269,"children":3270},{},[3271,3273,3279],{"type":25,"value":3272},"After that, we have a listener on the 'activate' event. This gets triggered when our service worker takes control of the context - once it becomes 'active'. You'll notice in our 'install' event that we're calling ",{"type":20,"tag":341,"props":3274,"children":3276},{"className":3275},[],[3277],{"type":25,"value":3278},"self.skipWaiting();",{"type":25,"value":3280},". The normal behaviour is that when a new Service Worker is installed, it doesn't take over from the old Service Worker until the page is refreshed. This could be fine for your case, but in many cases, we'll want to start serving the new resources right away, so we tell the browser to skip waiting for this Service Worker, and activate it immediately, allowing it to take over from the old Service Worker (if any).",{"type":20,"tag":21,"props":3282,"children":3283},{},[3284,3286,3293],{"type":25,"value":3285},"In the activate event listener, we then clear out all of our old cache versions, leaving just the specified cache available. You'll want to take a look at the ",{"type":20,"tag":129,"props":3287,"children":3290},{"href":3288,"rel":3289},"https://developer.mozilla.org/en-US/docs/Web/API/Cache",[133],[3291],{"type":25,"value":3292},"Cache Interface",{"type":25,"value":3294}," for more details here.",{"type":20,"tag":21,"props":3296,"children":3297},{},[3298,3300,3306,3308,3314],{"type":25,"value":3299},"Finally, once we've cleared out the old caches, we post a message back to main thread of any clients we have control over that they should reload, since the cache has been updated (remember the ",{"type":20,"tag":341,"props":3301,"children":3303},{"className":3302},[],[3304],{"type":25,"value":3305},"handleMessage",{"type":25,"value":3307}," function in the install workers script?). What you want to do with this message will depend on your application, but it could be as simple as calling ",{"type":20,"tag":341,"props":3309,"children":3311},{"className":3310},[],[3312],{"type":25,"value":3313},"location.reload()",{"type":25,"value":3315}," to get the new resources from the Service Worker.",{"type":20,"tag":3238,"props":3317,"children":3319},{"id":3318},"fetch",[3320],{"type":25,"value":3321},"Fetch",{"type":20,"tag":21,"props":3323,"children":3324},{},[3325,3327,3334],{"type":25,"value":3326},"And here's where the actual offline-enabling functionality happens. You'll want to take a look at the ",{"type":20,"tag":129,"props":3328,"children":3331},{"href":3329,"rel":3330},"https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch",[133],[3332],{"type":25,"value":3333},"Fetch API",{"type":25,"value":3335}," for more details on fetch, but the point here is that we're intercepting all requests from the client (that's the browser main thread for our origin), and checking the requested resource name against our cache. If we have the resource, we return it from our cache, and otherwise we pass the request through to the network.",{"type":20,"tag":21,"props":3337,"children":3338},{},[3339],{"type":25,"value":3340},"Two things are worth noting here:",{"type":20,"tag":3342,"props":3343,"children":3344},"ol",{},[3345,3356],{"type":20,"tag":224,"props":3346,"children":3347},{},[3348,3350,3354],{"type":25,"value":3349},"Our fetch intercept catches ",{"type":20,"tag":34,"props":3351,"children":3352},{},[3353],{"type":25,"value":2596},{"type":25,"value":3355}," requests - not just XMLHTTPRequests, for example, but every single request the main thread makes of the network. There's a lot that can be done with this - we're just scratching the surface here.",{"type":20,"tag":224,"props":3357,"children":3358},{},[3359,3361,3368],{"type":25,"value":3360},"The 'serve from cache if available, and otherwise pass to the network' is just one potential model for how we can handle caching and serving resources with the Service Worker - see ",{"type":20,"tag":129,"props":3362,"children":3365},{"href":3363,"rel":3364},"https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker",[133],[3366],{"type":25,"value":3367},"this article on Caching File with Service Worker",{"type":25,"value":3369}," for some alternative approaches.",{"type":20,"tag":167,"props":3371,"children":3373},{"id":3372},"are-we-there-yet",[3374],{"type":25,"value":3375},"Are We There Yet?",{"type":20,"tag":21,"props":3377,"children":3378},{},[3379,3381,3388],{"type":25,"value":3380},"Pretty much! Assuming you can mark the other items off the checklists above, your application should now be ready to serve itself as a PWA. To confirm this, you can use the ",{"type":20,"tag":129,"props":3382,"children":3385},{"href":3383,"rel":3384},"https://developers.google.com/web/tools/lighthouse/",[133],[3386],{"type":25,"value":3387},"Lighthouse Extension",{"type":25,"value":3389}," from Google to test your site, and confirm that all is as it should be.",{"type":20,"tag":21,"props":3391,"children":3392},{},[3393],{"type":25,"value":3394},"While this gives you a PWA suitable for, say, desktop use, there's still a few pieces to the puzzle before we're ready to be assigned real estate on the home screens of Android or iOS devices - we'll be going into that next time.",{"type":20,"tag":3396,"props":3397,"children":3398},"style",{},[3399],{"type":25,"value":3400},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":8,"searchDepth":415,"depth":415,"links":3402},[3403,3404,3405,3406,3411],{"id":169,"depth":405,"text":172},{"id":326,"depth":405,"text":329},{"id":889,"depth":405,"text":892},{"id":1820,"depth":405,"text":1823,"children":3407},[3408,3409,3410],{"id":3240,"depth":415,"text":3243},{"id":3264,"depth":415,"text":3267},{"id":3318,"depth":415,"text":3321},{"id":3372,"depth":405,"text":3375},"markdown","content:ckeefer:2017-2:MorePWAToYa-Part1.md","content","ckeefer/2017-2/MorePWAToYa-Part1.md","ckeefer/2017-2/MorePWAToYa-Part1","md",{"user":3419,"name":3420},"ckeefer","Christopher Keefer",[3422,3434,3443,3456,3471,3483,3491,3501,3512,3521,3533,3544,3554,3563,3573,3581,3594,3605,3614,3624,3632,3639,3648,3656,3665,3675,3685,3694,3703,3711,3722,3730,3738,3747,3755,3764,3772,3780,3788,3796,3804,3812,3820,3830,3838,3841,3849,3859,3869,3880,3890,3900,3911,3921,3934,3943,3953,3964,3974,3986,3998,4012,4026,4041,4049,4057,4066,4075,4084,4093,4102,4111,4120,4129,4138,4149,4162,4172,4180,4188,4196,4204,4216,4228,4238,4247,4256,4266,4275,4285,4294],{"_path":3423,"title":3424,"description":3425,"image":3426,"publishDate":3427,"tags":3428,"_id":3430,"author":3431},"/alalande/2023-1/escaping_text","Thinking Like a Programmer: Escaping Text","In this progressive and vivid explanation, we explore the HOW and WHY of quoting, nesting, and escaping text.","/alalande/2023-1/img/header.png","2024-02-15",[15,3429],"educational","content:alalande:2023-1:escaping_text.md",{"user":3432,"name":3433},"alalande","Anthony Lalande",{"_path":3435,"title":3436,"description":3437,"image":3438,"publishDate":3439,"tags":3440,"_id":3441,"author":3442},"/alalande/2023-2/heuristics","Thinking Like a Programmer: Heuristics","We want to help you turbo-charge your decision making.","/alalande/2023-2/img/heuristics.png","2024-03-15",[15,3429],"content:alalande:2023-2:heuristics.md",{"user":3432,"name":3433},{"_path":3444,"title":3445,"description":3446,"tags":3447,"publishDate":3450,"image":3451,"_id":3452,"author":3453},"/areichert/2023-10/rapid-testing-techniques-for-web-and-mobile","Rapid Testing Techniques for Web & Mobile Apps","Testing rapidly or the need to test quickly under shortened execution cycles is not new. Rapid testing has been around for as long as software testing has existed but increases when a product release is imminent, strained, or behind schedule. There are many reasons development gets behind schedule. Similar to testing, development is prone to surprise requirements changes and increases in scope and complexity.",[3448,3449],"software-testing","qa","2024-06-01","/areichert/2023-10/img/rapid_testing.png","content:areichert:2023-10:Rapid Testing techniques for web and mobile.md",{"user":3454,"name":3455},"areichert","Amy Reichert",{"_path":3457,"title":3458,"description":3459,"image":3460,"publishDate":3461,"tags":3462,"_id":3467,"author":3468},"/asherbrooke/2020-4/watchwah","Bringing an Idea to Life: WatchWah Proof of Concept","\"Wouldn't it be cool if...\"","/asherbrooke/2020-4/img/Guitar_and_Watch.jpeg","2020-04-01",[3463,3464,3465,3466],"ios","apple","watch","juce","content:asherbrooke:2020-4:watchwah.md",{"user":3469,"name":3470},"asherbrooke","Andrew Sherbrooke",{"_path":3472,"title":3473,"description":3474,"publishDate":3475,"tags":3476,"_id":3479,"author":3480},"/avogan/2012-07/salt","What Your Users Don't Know (Part 1)","What's wrong with this code?","2012-07-13",[3477,3478,15],"cryptography","security","content:avogan:2012-07:salt.md",{"user":3481,"name":3482},"avogan","Andrew Vogan",{"_path":3484,"title":3485,"description":3486,"publishDate":3487,"tags":3488,"_id":3489,"author":3490},"/avogan/2012-07/salt-2","What Your Users Don't Know (Part 2)","In my last post we saw that what your users don't know can hurt them. In other words, how securely you handle your users' private data behind the scenes can have profound implications both for your business and your users' well being. To put it bluntly, it's bad for your business to be publicly shamed over your handling of sensitive data, and it's bad for your users to have their bank accounts pilfered -- those being some of the worse case scenarios.","2012-07-26",[3477,3478,15],"content:avogan:2012-07:salt-2.md",{"user":3481,"name":3482},{"_path":3492,"title":3493,"description":3494,"publishDate":3495,"image":3496,"_id":3497,"author":3498},"/bporter/2012-5/cd_player","My First CD Player","I started college right about the time when the first CD players were coming onto the market -- there weren't many available, and they were all obscenely expensive. At the time, my dad was dong a lot of traveling to Japan for business, and he was able to bring me a really nice Yamaha CD player back from a shop in Akihabara for about 1/4th of what a similar unit would have cost me here in the US.","2012-05-01","/bporter/2012-5/img/cd_player.jpg","content:bporter:2012-5:cd_player.md",{"user":3499,"name":3500},"bporter","Brett Porter",{"_path":3502,"title":3503,"description":3504,"publishDate":3505,"tags":3506,"image":3509,"_id":3510,"author":3511},"/bporter/2012-5/improtech","ImproTech Paris-New York 2012","Last week, I took a vacation day to attend one day of workshops at NYU as part of ImproTech 2012 Paris-New York That website descibes the event as:","2012-05-24",[3507,3508],"improvisation","music","/bporter/2012-5/img/affichemartin.jpg","content:bporter:2012-5:improtech.md",{"user":3499,"name":3500},{"_path":3513,"title":3514,"description":3515,"publishDate":3516,"tags":3517,"_id":3519,"author":3520},"/bporter/2012-5/learntocode","Yes, Do Learn To Code!","My usual pre-work routine is to walk the dog (working at home, this is my counterpart to a commute), pour my first cup of coffee, and then curl up for a little while with Google Reader. I don't know if it's because I've selected feeds that are too closely aligned with my values and personal agenda, but it's really rare that I'll read a post that is just so wrong that it makes me angry. Jeff Atwood wrote a post like that: Please Don't Learn To Code","2012-05-15",[3518],"learn-to-code","content:bporter:2012-5:learntocode.md",{"user":3499,"name":3500},{"_path":3522,"title":3523,"description":3524,"publishDate":3525,"tags":3526,"image":3530,"_id":3531,"author":3532},"/bporter/2012-6/dsl","Watch Your Language","Interesting to see a theme emerge in my Pinboard account this week -- lots of stuff about the idea of 'programming language'. I've spent the last few weeks preparing to dive back into a personal interactive music project that I've been working on sporadically since I was in graduate school. I had recently realized that the conceptual roadblock I hit before my last hiatus was something that I'd need to address by adding some sort of little programming language into the system. After following Martin Fowler's many blog posts over the years discussing domain specific languages, I finally broke down and bought his book on the topic. It's too early yet for me to have much concrete to say about the book, but I remember getting enough out of those blog posts to be confident that it will be worth the money and time to read.","2012-06-29",[3527,3528,3529],"dsl","erlang","go","/bporter/2012-6/img/dsl.jpg","content:bporter:2012-6:dsl.md",{"user":3499,"name":3500},{"_path":3534,"title":3535,"description":3536,"image":3537,"publishDate":3538,"tags":3539,"_id":3542,"author":3543},"/bporter/2019-3/animator","Friz: A flexible animation controller for JUCE","As is often the case, I found myself working on a personal project and had some UI elements that really wanted to have some life to them on the screen.","/bporter/2019-3/img/animator.png","2019-03-01",[3466,3540,3541],"ui","c++","content:bporter:2019-3:animator.md",{"user":3499,"name":3500},{"_path":3545,"title":3546,"description":3547,"image":3548,"publishDate":3549,"tags":3550,"_id":3552,"author":3553},"/bporter/2019-4/aesannounce","Art+Logic In the Real World","There are a few events coming up in the next few weeks where A+L will have people in attendance. If you're going to be there or nearby, please get in touch and we'll meet up.","/bporter/2019-4/img/aesLogo.jpg","2019-04-01",[3551,1392],"a+l","content:bporter:2019-4:aesAnnounce.md",{"user":3499,"name":3500},{"_path":3555,"title":3556,"description":3557,"image":3558,"publishDate":3559,"tags":3560,"_id":3561,"author":3562},"/bporter/2020-10/reanimated","Re-animated","Last year, I posted here about an animation control framework called 'Friz' that works within the JUCE Application Framework.","/bporter/2020-10/img/module.png","2020-10-01",[3466,3540,3541],"content:bporter:2020-10:reanimated.md",{"user":3499,"name":3500},{"_path":3564,"title":3565,"description":3566,"image":3567,"publishDate":3538,"tags":3568,"_id":3569,"author":3570},"/bstevens/2019-3","Coding the Impossible","As you can see on the Art+Logic website, our slogan is Coding the \"impossible.\"®","/bstevens/2019-3/img/impossible.png",[3551],"content:bstevens:2019-3:index.md",{"user":3571,"name":3572},"bstevens","Ben Stevens",{"_path":3574,"title":3575,"description":3576,"publishDate":3577,"tags":3578,"_id":3579,"author":3580},"/ckeefer/2013-1/misc","JS Hints & Shortcuts","During the course of any complex project (and even many simple ones), on the way to accomplish the actual goal, you're certain to encounter any number of small hurdles along the way - little problems which need to be resolved for the bigger picture to come into focus.","2013-09-01",[817],"content:ckeefer:2013-1:misc.md",{"user":3419,"name":3420},{"_path":3582,"title":3583,"description":3584,"publishDate":3585,"tags":3586,"image":3591,"_id":3592,"author":3593},"/ckeefer/2013-2/xslt","XML and XSLT","Not terribly long ago, XML was the darling of the web. HTML4 was reformulated as XHTML 1.0, SOAP messages were XML, and let us not forget XMLHttpRequest.","2013-10-08",[3587,3588,3589,3590],"data-formats","xml","xsl","xslt","/ckeefer/2013-2/img/xslt-processing.png","content:ckeefer:2013-2:xslt.md",{"user":3419,"name":3420},{"_path":3595,"title":3596,"description":3597,"publishDate":3598,"tags":3599,"image":3602,"_id":3603,"author":3604},"/ckeefer/2013-3/ajax-upload","Ajax Upload Part I: Framed (and jQuery Deferred)","Inevitably, people want their files on the Internet. If your project is about cute cats, someone will task you with allowing users to upload photos of their cats, videos of their cats, long rambling audio clips in which they attempt to convince their cat to stop attacking the microphone, etcetera. If your project is about the nature and proclivities of mold, someone, somewhere will want to share detailed photographic evidence of their mold problem. The need to upload files is a given.","2013-03-20",[817,3600,3601],"jquery","html5","/ckeefer/2013-3/img/upframe.jpg","content:ckeefer:2013-3:ajax-upload.md",{"user":3419,"name":3420},{"_path":3606,"title":3607,"description":3608,"publishDate":3609,"tags":3610,"_id":3612,"author":3613},"/ckeefer/2013-4/teaching-programming","Can (and Should) Everyone Learn to Program?","Fair warning: The following article is long, rambly, and contains no code. It does, however, contain some rumination on the idea that everyone can and should learn to program.","2013-12-03",[3611],"programming","content:ckeefer:2013-4:teaching-programming.md",{"user":3419,"name":3420},{"_path":3615,"title":3616,"description":3617,"publishDate":3618,"tags":3619,"image":3621,"_id":3622,"author":3623},"/ckeefer/2013-5/ajax-uploader","Ajax Upload XHR2, Take 2","It's a pleasure to be able to interact with files in the browser at long last, isn't it? Reading files in without needing to bounce them against the server first opens up a lot of possibilities - and getting progress from a chunked ajax upload is miles away from the indeterminate form uploads of days past.","2014-02-19",[3600,817,3620],"xhr2","/ckeefer/2013-5/img/html5.jpg","content:ckeefer:2013-5:ajax-uploader.md",{"user":3419,"name":3420},{"_path":3625,"title":3626,"description":3627,"publishDate":3628,"tags":3629,"_id":3630,"author":3631},"/ckeefer/2013-07/anchors-hash","Anchors, Hash Sign, javascript:void(0)","So, you've got a link that, in reality, is just a click target for performing some javascript function. You want the appearance of a standard anchor link, but if it's not performing the intended function, should it really be an anchor? And if so, what should we fill that 'href' attribute in with?","2013-07-29",[817],"content:ckeefer:2013-07:anchors-hash.md",{"user":3419,"name":3420},{"_path":3633,"title":3634,"description":3635,"publishDate":3636,"_id":3637,"author":3638},"/ckeefer/2013-07/static-vmware-host","Static Hosting with VMWare","Virtualization is one of the many benefits of the excess (metaphorical) horsepower available to us with modern hardware. Need to test against (Windows XP/7/8/NT || Fedora || Mint || Ubuntu || FreeBSD || MacOSX || etc)? Fire up the VM. Need a Linux environment for the packages your server relies on, but need to test in the iPad simulator? VM's to the rescue.","2013-07-26","content:ckeefer:2013-07:static-vmware-host.md",{"user":3419,"name":3420},{"_path":3640,"title":3641,"description":3642,"publishDate":3643,"tags":3644,"_id":3646,"author":3647},"/ckeefer/2013-08/fullproof-fulltext-search","Client-side Fulltext Searching with Fullproof","Recently, I was engaged in a genial argument with a friend of an older generation, each of us taking an opposing stance on some obscure trivia neither of us was entirely certain about - but which we were both ready to defend with all the wit and rhetoric at our disposal. When we had finally exhausted all attempts to make the other budge on the matter, we turned to an authoritative 3rd-party source to lay the matter to rest for us - a Google search.","2013-08-29",[3645,3590],"search","content:ckeefer:2013-08:fullproof-fulltext-search.md",{"user":3419,"name":3420},{"_path":3649,"title":3650,"description":3651,"publishDate":3652,"tags":3653,"_id":3654,"author":3655},"/ckeefer/2013-11/jquery-ajax-blobs","jQuery Ajax Blobs and Array Buffers","A big part of what makes jQuery a regular part of so many web projects is the clean interface it offers us for a number of sometimes messy built-in aspects of javascript. The most obvious is the DOM interface; and in second place, jquery ajax and its various shorthand methods. Abstracting away the difference between ActiveXObject and XMLHttpRequest is one of the most obvious benefits - but even if you don't need to worry about supporting old versions of IE, you might well enjoy the clean, object-based, promise-returning interface that jquery ajax offers.","2013-11-21",[817,3600],"content:ckeefer:2013-11:jquery-ajax-blobs.md",{"user":3419,"name":3420},{"_path":3657,"title":3658,"description":3659,"publishDate":3660,"tags":3661,"_id":3663,"author":3664},"/ckeefer/2013-12/deploying-with-git","Deploying Websites with Git","Deploying your webapp is an important part of the web development equation - your client's site isn't going to attract a lot of attention sitting in your local dev directory. Deployment concerns tend to fall to the bottom of the priority list, though, and the end result tends to be kludgy, hastily thrown-together deployment scripts; and because they are so kludgy and, often, time consuming, when time crunches threaten, a developer may resort to making changes directly on the remote server that need to be (but sometimes never are) backported to the code living in your version control.","2013-12-23",[3662],"git","content:ckeefer:2013-12:deploying-with-git.md",{"user":3419,"name":3420},{"_path":3666,"title":3667,"description":3668,"publishDate":3669,"tags":3670,"image":3672,"_id":3673,"author":3674},"/ckeefer/2014-1/still-using-php","Still Using PHP?","Poor PHP. It's so lonely and unloved these days.","2014-01-29",[3671],"php","/ckeefer/2014-1/img/php.jpg","content:ckeefer:2014-1:still-using-php.md",{"user":3419,"name":3420},{"_path":3676,"title":3677,"description":3678,"publishDate":3679,"tags":3680,"image":3682,"_id":3683,"author":3684},"/ckeefer/2014-2/ajax-upload-2","Ajax Upload Part II: XHR2 (and FileReader)","So, the client has told you their users should be able to upload their drunken party pictures for all the internet to see. \"We want the very best experience possible,\" they tell you. \"Simple, seamless - maybe using that new html5 thing I've heard so much about.\"","2013-04-09",[817,3681],"xmlhttprequest","/ckeefer/2014-2/img/html5.jpg","content:ckeefer:2014-2:ajax-upload-2.md",{"user":3419,"name":3420},{"_path":3686,"title":3687,"description":3688,"publishDate":3689,"tags":3690,"_id":3692,"author":3693},"/ckeefer/2014-3/customgmapsinfowindow","Custom Google Maps Info Windows","When it comes time to relate the ephemeral world of data to the physical world, Maps are key in both enterprise and consumer applications. Whatever else you might think of it, Google Maps tends to be the default option - certainly, its the only one I've ever had clients ask for by name.","2014-02-26",[817,3691],"google-maps","content:ckeefer:2014-3:customgmapsinfowindow.md",{"user":3419,"name":3420},{"_path":3695,"title":3696,"description":3697,"publishDate":3698,"tags":3699,"_id":3701,"author":3702},"/ckeefer/2014-4/hidden-options","Hidden Options: A Workaround","Here's the situation: You've got a select. Maybe a whole bunch of selects, with a ton of options each (metric ton - let's keep our imaginary hyperbolic units straight here); and these are meant to be complex interactive elements, with options made visible or not as some programmatic condition dictates.","2014-04-23",[3700,817,3600],"how-to","content:ckeefer:2014-4:hidden-options.md",{"user":3419,"name":3420},{"_path":3704,"title":3705,"description":3706,"publishDate":3707,"tags":3708,"_id":3709,"author":3710},"/ckeefer/2014-5/cgwin2","Custom Google Info Windows: Updated, Live","April 30, 2014 at 3:22 am Remy says:","2014-05-09",[817,3691],"content:ckeefer:2014-5:cgwin2.md",{"user":3419,"name":3420},{"_path":3712,"title":3713,"description":3714,"publishDate":3715,"tags":3716,"image":3719,"_id":3720,"author":3721},"/ckeefer/2014-6/backbonesocketsync","Websockets for Backbone","Backbone's had some of its thunder stolen lately by trendier frameworks like Meteor and Angular; for good reason, in most cases, as without the prosthetic functionality offered by the likes of Marionette, Backbone's view handling (amongst a few other lacks and warts) is really just 'roughed in'.","2014-06-25",[817,3717,3718],"websockets","backbone","/ckeefer/2014-6/img/WebsocketsPlusBackbone.png","content:ckeefer:2014-6:backbonesocketsync.md",{"user":3419,"name":3420},{"_path":3723,"title":3724,"description":3725,"publishDate":3726,"tags":3727,"_id":3728,"author":3729},"/ckeefer/2014-7/promises","It's a (jQuery-style) Promise","Way back when I brought up the topic of promises (particularly, jQuery Deferred), and I promised we would come back to the topic someday.","2014-10-16",[817,3600],"content:ckeefer:2014-7:promises.md",{"user":3419,"name":3420},{"_path":3731,"title":3732,"description":3733,"publishDate":3734,"tags":3735,"_id":3736,"author":3737},"/ckeefer/2014-8/behold-views","Behold! (JavaScript Views)","JavaScript has the propensity to be very untidy - if you let it, it will sprawl all over the place. Hundreds of global variables scattered across dozens of files, messy half-measures towards object-orientation, mixed in seemingly at random with ungrouped functions - anyone who's had a client bring them a failed project from some other development team knows just how bad it can get.","2015-01-07",[817],"content:ckeefer:2014-8:behold-views.md",{"user":3419,"name":3420},{"_path":3739,"title":3740,"description":3741,"publishDate":3742,"tags":3743,"image":3744,"_id":3745,"author":3746},"/ckeefer/2015-1/writeonce","Write Once, Debug Everywhere","It's pretty seldom that anyone mentions web pages these days, other than in historical reference to days long gone by (yes, a whole few years ago). Web sites, sure, but not if what is really wanted is to replace something that, not so long ago, would have been some native code for a smartphone (or a little further back still, a desktop computer). Generally speaking, the most common term tripping from client's lips these days is 'web applications' - or webapps, because who has time for spaces and proper spelling, amirite?","2015-02-02",[817],"/ckeefer/2015-1/img/html5java.jpg","content:ckeefer:2015-1:writeonce.md",{"user":3419,"name":3420},{"_path":3748,"title":3749,"description":3750,"publishDate":3751,"tags":3752,"_id":3753,"author":3754},"/ckeefer/2015-2/js-frameworks","The What and Why of Javascript Frameworks","JavaScript has the propensity to be very untidy if you let it be. This isn't a problem unique to JavaScript, of course - many other languages suffer from a lack of native organization, especially for specific tasks.","2015-05-29",[817],"content:ckeefer:2015-2:js-frameworks.md",{"user":3419,"name":3420},{"_path":3756,"title":3757,"description":3758,"publishDate":3759,"tags":3760,"_id":3762,"author":3763},"/ckeefer/2015-3/emailvalidation","Email Validation with Django and python-social-auth","When it comes to user accounts, the standard litmus test is email validation. Besides the immediate benefits - of offering us a straightforward unique identifier for users, and making it more difficult to automate creating a mass of accounts on our service - by requiring that each account have an email address and interact therewith to confirm the addresses validity, it also offers us the chance to associate a known-working email account with a user account. This is important for transactional emails such as password resets or for potential two-factor authentication use... and if you're a little less ethical, for sending marketing desirable and informative emails about interesting products and services.","2015-07-23",[370,3761],"django","content:ckeefer:2015-3:EmailValidation.md",{"user":3419,"name":3420},{"_path":3765,"title":3766,"description":3767,"publishDate":3768,"tags":3769,"_id":3770,"author":3771},"/ckeefer/2015-5/file-reader-chunking","FileReader Chunking and Base64 DataURLs","In a hurry? You can now use our HUp jquery plugin to read files in a chunked fashion as data URLs. Hooray!","2015-12-15",[817,3600],"content:ckeefer:2015-5:file-reader-chunking.md",{"user":3419,"name":3420},{"_path":3773,"title":3774,"description":3775,"publishDate":3776,"tags":3777,"_id":3778,"author":3779},"/ckeefer/2016-1/ajaxbinarycaching","Caching Binary Data With jQuery Ajax and IndexedDB","After long, grueling months (years? or does it only feel like years?), your web application nears completion. It is tightly coded, well documented, works across all modern browsers, and is well received by your beta testers. It's nearly time to go live, and a smile of pure relief plays upon your lips... and freezes into a rictus grin when your client turns to you, and asks, \"so, hey, can we speed up the dynamic cat pic loading? Especially when I close the browser and come back to it later. I think that's really key to the whole application.\"","2016-04-25",[817,3600],"content:ckeefer:2016-1:ajaxBinaryCaching.md",{"user":3419,"name":3420},{"_path":3781,"title":3782,"description":3783,"publishDate":3784,"tags":3785,"_id":3786,"author":3787},"/ckeefer/2016-2/paymentprocessing","Payment Processing with Braintree","You've built the web application of the century, and the users have rightly flooded to it. Cat pictures for everyone!","2016-05-11",[3761,817,3600,370],"content:ckeefer:2016-2:paymentprocessing.md",{"user":3419,"name":3420},{"_path":3789,"title":3790,"description":3791,"publishDate":3792,"tags":3793,"_id":3794,"author":3795},"/ckeefer/2016-3/djangochannels1","Django Channels: From the Ground Up - Part 1","You stare mournfully into the mass of code you've inherited. At some point, it's clear, the requirements called for the server to push information to the client, because there's an unholy mix of Server-Side Events, long-polling, hidden iframes and even a Java applet in there, all supporting some level of long-term connectivity with the server. It's almost fascinating in its barely functional hideousness, and you would be inclined to leave well enough alone... except for the new feature specifications you've been assigned, which require the client to be able to send data back to the server in response to the received events, in as close to real-time as you can get.","2016-06-13",[3761,370,3717],"content:ckeefer:2016-3:djangoChannels1.md",{"user":3419,"name":3420},{"_path":3797,"title":3798,"description":3799,"publishDate":3800,"tags":3801,"_id":3802,"author":3803},"/ckeefer/2016-4/djangochannels2","Django Channels: From the Ground Up - Part 2","Last time, we decided to embark on a brave new adventure and give our Django framework a big upgrade with the inclusion of Django Channels. We got just far enough to get the development server running, but while this may be an adequate start, it's better to develop against something like what we intend to deploy, right?","2016-06-15",[3761,370,3717],"content:ckeefer:2016-4:djangochannels2.md",{"user":3419,"name":3420},{"_path":3805,"title":3806,"description":3807,"publishDate":3808,"tags":3809,"_id":3810,"author":3811},"/ckeefer/2016-6/gofetch1","Go Fetch! (JavaScript Fetch API)","Long ago, we briefly brushed upon the topic of what has made jQuery such a valuable part of the web developer's toolset for such a long time - namely, a cleaner interface for interacting with the DOM, and the $.ajax abstraction over XMLHttpRequest.","2016-10-03",[817,3600,15],"content:ckeefer:2016-6:goFetch1.md",{"user":3419,"name":3420},{"_path":3813,"title":3814,"description":3815,"publishDate":3816,"tags":3817,"_id":3818,"author":3819},"/ckeefer/2016-7/gofetch2","Go Fetch 2! (JavaScript Fetch API)","Last time we discussed the Fetch API in general, taking a look at how it differed from the XMLHttpRequest API, and some of its advantages. Today, we're going to take a look at a little library that you can include in your projects today that offers you localStorage caching for the Fetch API.","2016-10-10",[817,3600,15],"content:ckeefer:2016-7:goFetch2.md",{"user":3419,"name":3420},{"_path":3821,"title":3822,"description":3823,"publishDate":3824,"tags":3825,"_id":3828,"author":3829},"/ckeefer/2016-8/herokupdf","Generating PDFs: wkhtmltopdf & Heroku","So, it has come to this.","2016-12-21",[3826,3827,370],"heroku","pdf","content:ckeefer:2016-8:HerokuPDF.md",{"user":3419,"name":3420},{"_path":3831,"title":3832,"description":3833,"publishDate":3834,"tags":3835,"_id":3836,"author":3837},"/ckeefer/2017-1/downloadingclientsidecontent","Downloading Client-side Generated Content","A young developer, new to the Tao of the client-side, comes to a Master of the way, and speaks thusly: \"Oh Master, our application nears completion; and lo, cat pics can be drawn upon, and captions fixated thereto, for the creation of humour and the bounteous enjoyment of our users.\"","2017-02-06",[817],"content:ckeefer:2017-1:downloadingclientsidecontent.md",{"user":3419,"name":3420},{"_path":5,"title":9,"description":10,"publishDate":11,"tags":3839,"_id":3413,"author":3840},[13,14,15],{"user":3419,"name":3420},{"_path":3842,"title":3843,"description":3844,"tags":3845,"publishDate":3846,"_id":3847,"author":3848},"/ckeefer/2017-3/morepwatoya-part2","More PWA to Ya! (Progressive Web Apps, Part 2)","Last time, we got into the nitty gritty on how to make your web application into a Progressive Web Application (PWA to it's friends). I promised we'd dig even deeper this time, and show you how to make your web app a little more 'native' on Android - and how to deal with iOS Safari's special snowflake syndrome.",[14,13,15],"2017-03-01","content:ckeefer:2017-3:MorePWAToYa-Part2.md",{"user":3419,"name":3420},{"_path":3850,"title":3851,"description":3852,"image":3853,"publishDate":3854,"tags":3855,"_id":3857,"author":3858},"/ckeefer/2019-1/unlockingwebaudio","Unlocking Web Audio","\"It's going to be the coolest thing ever.\"","/ckeefer/2019-1/img/featured_image.jpg","2019-01-01",[817,3856],"audio","content:ckeefer:2019-1:UnlockingWebAudio.md",{"user":3419,"name":3420},{"_path":3860,"title":3861,"description":3862,"publishDate":3863,"image":3864,"tags":3865,"_id":3867,"author":3868},"/ckeefer/2020-1/why-vue","Why Vue","Why choose Vue over any other front-end framework?","2020-01-01","/ckeefer/2020-1/img/vue-wall.jpg",[817,3866],"vue","content:ckeefer:2020-1:Why Vue.md",{"user":3419,"name":3420},{"_path":3870,"title":3871,"description":3872,"tags":3873,"image":3876,"publishDate":3877,"_id":3878,"author":3879},"/ckeefer/2024-3/e2e_testing","E2E Testing: To What End?","Friend, can we agree that tests are a good idea? I won't scorn you for sometimes omitting them - time and budget constraints are what they are, and even the best intentioned of us sometimes have to just give our projects a lick and a promise. \"Proper test coverage soon\", you sweetly croon as you rock it to sleep, the knowledge that you're telling a dark, terrible lie twisting you up inside. Maybe you could just scrape enough budget together for some simple unit tests? Then, at least, you'd have \"tests\", right?",[3449,3448,3874,3875],"e2e","playwright","/ckeefer/2024-3/img/E2E_Testing_2024.png","2024-06-15","content:ckeefer:2024-3:e2e_testing.md",{"user":3419,"name":3420},{"_path":3881,"title":3882,"description":3883,"tags":3884,"image":3886,"publishDate":3887,"_id":3888,"author":3889},"/ckeefer/2024-7/vpubsub","Vue 3 Pub / Sub: All aboard the (event) bus","We like Vue at A+L. We think it's one of the best frontend frameworks, and a great choice pretty much anywhere you might otherwise be tempted to use React.",[817,3866,3885],"pub/sub","/ckeefer/2024-7/img/event_bus.png","2024-08-15","content:ckeefer:2024-7:VPubSub.md",{"user":3419,"name":3420},{"_path":3891,"title":3892,"description":3893,"publishDate":3894,"tags":3895,"_id":3896,"author":3897},"/cmacksey/2012-5/php-musings","PHP Musings","Ran into an interesting, but thorough, rant the other day - PHP: A Fractal of Bad Design. The part that grabbed me the most was the analogy at the beginning, which was all too perfect:","2012-05-07",[3671],"content:cmacksey:2012-5:php-musings.md",{"user":3898,"name":3899},"cmacksey","Chris Macksey",{"_path":3901,"title":3902,"description":3903,"publishDate":3904,"tags":3905,"_id":3907,"author":3908},"/dpopowich/2021-07-30/data-collector","Asynchronous Python - A Real World Example","A dive into a real example of async Python usage.","2021-07-30",[370,3700,3906],"async","content:dpopowich:2021-07-30:data-collector.md",{"user":3909,"name":3910},"dpopowich","Daniel Popowich",{"_path":3912,"title":3913,"description":3914,"tags":3915,"image":3917,"publishDate":3918,"_id":3919,"author":3920},"/dpopowich/2023-8/postgres-pubsub","Using PostgreSQL for Pub/Sub","A+L has been working on a Single Page Application (SPA) wherein our client's users take on the role of Staff Users (think: project managers) as they aid their Customer Users in using the application to complete a complex project.",[3916,370,3906],"postgresql","/dpopowich/2023-8/img/psql_pub_sub.png","2024-04-15","content:dpopowich:2023-8:postgres-pubsub.md",{"user":3909,"name":3910},{"_path":3922,"title":3923,"description":3924,"tags":3925,"image":3928,"publishDate":3929,"_id":3930,"author":3931},"/ewahl/2025-05/escape_deployment_hell","Escape Deployment Hell: IaC, CDK, Ephemeral Environments, and the Pragmatic Path to Platform Power","Another Friday afternoon, another deployment fire. If this sounds familiar, you're not alone. On too many projects, the chasm between application code and infrastructure management breeds manual configuration nightmares, crippling complexity, and agonizingly slow development cycles. But what if your team could sidestep this chaos, focusing on building features instead of constantly battling deployment gremlins?",[3926,3927,370],"devops","aws","/ewahl/2025-05/img/deployment_hell.png","2025-05-13","content:ewahl:2025-05:escape_deployment_hell.md",{"user":3932,"name":3933},"ewahl","Edward F. Wahl",{"_path":3935,"title":3936,"description":3937,"publishDate":3938,"image":3939,"tags":3940,"_id":3941,"author":3942},"/ewahl/2025-06/argued_with_ai","I Argued With an AI for 20 Minutes About Async Code — And I'm Surprisingly Happy","If you have ever spent twenty minutes debating an obscure AWS Lambda invocation pattern with an AI, you might question your life choices. But here I am: amused by the wasted time but ultimately happy with the outcome and understanding I gained.","2026-06-01","/ewahl/2025-06/img/argued_with_ai.png",[3926,3927,370],"content:ewahl:2025-06:argued_with_ai.md",{"user":3932,"name":3933},{"_path":3944,"title":3945,"description":3946,"tags":3947,"image":3948,"publishDate":3549,"_id":3949,"author":3950},"/jbagley/2019-4/makingspectrogramsinjuce","Making Spectrograms in JUCE","Art+Logic's Incubator project has made a lot of progress. In a previous post I mentioned that Dr. Scott Hawley's technique to classify audio involved converting audio to an image and using a Convolution Neural Network (CNN) to classify the audio based on this image. That image is a spectrogram. I'm going to go into some detail about what we do to create one, and why to the best of my ability.",[3466,3541,3856],"/jbagley/2019-4/img/Fortissimo_Trumpet_Ensemble_Matrix_Swells_61.wav-2048x1700.png","content:jbagley:2019-4:MakingSpectrogramsInJUCE.md",{"user":3951,"name":3952},"jbagley","Jason Bagley",{"_path":3954,"title":3955,"description":3956,"tags":3957,"image":3960,"publishDate":3961,"_id":3962,"author":3963},"/jbagley/2021-07/softwaresenescence","Legacy Vulnerabilities AKA Software Senescence","Does your business still have an XT computer in the back office because it's\nrunning that one version of some database software that your business depends\non? Yeah, we know there is. Most modern software doesn't work like that.",[3958,3959],"legacy","project-management","/jbagley/2021-07/img/old_software_to_new.jpg","2021-07-01","content:jbagley:2021-07:SoftwareSenescence.md",{"user":3951,"name":3952},{"_path":3965,"title":3966,"description":3967,"tags":3968,"image":3970,"publishDate":3971,"_id":3972,"author":3973},"/jbagley/2021-08-01/accuratetiming","Accurate Timing","In many tasks we need to do something at given intervals of time. The most obvious ways may not give you the best results.",[3541,3969],"timing","/jbagley/2021-08-01/img/accurateTiming.jpg","2021-08-01","content:jbagley:2021-08-01:AccurateTiming.md",{"user":3951,"name":3952},{"_path":3975,"title":3976,"description":3977,"tags":3978,"image":3982,"publishDate":3983,"_id":3984,"author":3985},"/jbagley/2023-06-01/universal_ffmpeg_custom_builds","Building Universal FFmpeg Custom Binaries","I am using a very pared down set of FFMpeg features for a macOS project that I\nbuild into a custom library. I had a script set up to configure the build which\nworked fine on my Intel based MacBook Pro. Then I upgraded to an Apple Silicon\nMacBookPro and wanted to run natively, or at least see what happened when I\ndid. To build, FFMpeg uses autoconf which produces a makefile that then handles\nthe build.",[3979,3980,3981,3464],"c","bash","ffmpeg","/jbagley/2023-06-01/img/header.png","2024-04-01","content:jbagley:2023-06-01:Universal_FFMPEG_custom_builds.md",{"user":3951,"name":3952},{"_path":3987,"title":3988,"description":3989,"publishDate":3990,"image":3991,"tags":3992,"_id":3996,"author":3997},"/jbagley/2025-08/a_developers_primer_on_apple_tracking_transparency","A Primer on Apple's App Tracking Transparency","If an app tracks user activity, Apple requires them to declare all information they collect as well as whether that data is linked or tracked. This includes collection by the app itself and any third parties the app uses. The app owner is responsible for knowing and correctly reporting privacy information for all components in the app.","2026-05-22","/jbagley/2025-08/img/apple_app_transparency.png",[3993,3994,3463,3995],"app tracking transparency","att","macos","content:jbagley:2025-08:a_developers_primer_on_apple_tracking_transparency.md",{"user":3951,"name":3952},{"_path":3999,"title":4000,"description":4001,"tags":4002,"image":4006,"publishDate":4007,"_id":4008,"author":4009},"/jestep/2023-3/fastapi","FastAPI: A High-Performance Python Framework for Rapid Web Development","FastAPI is a modern and high-performance Python web framework designed specifically for building APIs and web applications quickly and efficiently. Developed by Sebastián Ramírez and first released in 2018, FastAPI has rapidly gained traction in the developer community thanks to its focus on providing key features for API and web app development with excellent performance.",[370,4003,3761,4004,4005],"fastapi","flask","pyramid","/jestep/2023-3/img/header.png","2024-05-01","content:jestep:2023-3:fastapi.md",{"user":4010,"name":4011},"jestep","Jagger Estep",{"_path":4013,"title":4014,"description":4015,"publishDate":4016,"tags":4017,"image":4021,"_id":4022,"author":4023},"/nharrison/2012-07/core-data","Securing Your Core Data with Transformable Attributes","In order to store private data in an iOS Core Data database, there are several methods available for encryption, including:","2012-07-30",[4018,4019,3463,3478,4020],"core-data","encryption","objective-c","/nharrison/2012-07/img/superman.jpg","content:nharrison:2012-07:core-data.md",{"user":4024,"name":4025},"nharrison","Noah Harrison",{"_path":4027,"title":4028,"description":4029,"tags":4030,"publishDate":4035,"image":4036,"_id":4037,"author":4038},"/phendry/2019-3/restfromthebottomup","REST from the Bottom Up","The RESTful API has a funny place in the software development world: it's widely regarded as the best general-purpose pattern for building web application APIs, and yet it's also nebulous enough of a concept to cause endless disagreements within teams over exactly how to implement one.",[4031,4032,4033,4034],"rest","api","web","architecture","2019-10-01","/phendry/2019-3/img/feature_image.png","content:phendry:2019-3:RestFromTheBottomUp.md",{"user":4039,"name":4040},"phendry","Paul Hendry",{"_path":4042,"title":4043,"description":4044,"tags":4045,"publishDate":3961,"image":4046,"_id":4047,"author":4048},"/phendry/2021-06/smoothupgradestovue3","Smooth Upgrades to Vue 3","This post assumes basic familiarity with Vue.js v2.x.",[817,3866,3700],"/phendry/2021-06/img/vue-transition.jpg","content:phendry:2021-06:SmoothUpgradesToVue3.md",{"user":4039,"name":4040},{"_path":4050,"title":4051,"description":4052,"image":4053,"tags":4054,"publishDate":3904,"_id":4055,"author":4056},"/phendry/2021-07-30/spotthevulndataranges","Spot the Vulnerability: Data Ranges and Untrusted Input","In 1997, a flaw was discovered in how Linux and Windows handled IP fragmentation, a Denial-of-Service vulnerability which allowed systems to be crashed remotely.","/phendry/2021-07-30/img/vulnerability.jpg",[3478,15],"content:phendry:2021-07-30:SpotTheVulnDataRanges.md",{"user":4039,"name":4040},{"_path":4058,"title":4059,"description":4060,"tags":4061,"image":4062,"publishDate":4063,"_id":4064,"author":4065},"/phendry/2021-08-15/exploringdependenttypesinidris","Exploring Dependent Types in Idris","When I'm not coding the \"impossible\" at Art+Logic, I take a lot of interest in new programming technologies and paradigms; even if they're not yet viable for use in production, there can often be takeaways for improving your everyday code.",[3611],"/phendry/2021-08-15/img/dependent-types.jpg","2021-08-15","content:phendry:2021-08-15:ExploringDependentTypesInIdris.md",{"user":4039,"name":4040},{"_path":4067,"title":4068,"description":4069,"tags":4070,"image":4071,"publishDate":4072,"_id":4073,"author":4074},"/phendry/2021-10-30/spotthevulnloopsandtermconditions","Spot the Vulnerability: Loops and Terminating Conditions","In memory-unsafe languages like C, special care must be taken when copying untrusted data, particularly when copying it to another buffer. In this post, we'll spot and mitigate a past vulnerability in Linux's NTP daemon.",[3478,15],"/phendry/2021-10-30/img/vulnerability-2.jpg","2021-10-30","content:phendry:2021-10-30:SpotTheVulnLoopsAndTermConditions.md",{"user":4039,"name":4040},{"_path":4076,"title":4077,"description":4078,"image":4079,"tags":4080,"publishDate":4081,"_id":4082,"author":4083},"/phendry/2022-07-21/migratingfromexpresstofastifypart1","Migrating from Express to Fastify, Part 1","Express.js has for years been the dominant lightweight Web framework for Node.js, but over time its development has stalled, with its latest major version (5.0) still in pre-release nearly eight years after its first alpha release. There's a lot to be said for this sort of stability in a foundational dependency for a project, but it's worth assessing whether the added features of competing frameworks are worth making a switch. In this article we'll be looking at Fastify in particular, to understand what it has to offer compared to Express and how difficult it is to migrate an existing Express project.","/phendry/2022-07-21/img/Migrating from Express to Fastify, Part 1.png",[817,15],"2023-12-01","content:phendry:2022-07-21:MigratingFromExpressToFastifyPart1.md",{"user":4039,"name":4040},{"_path":4085,"title":4086,"description":4087,"image":4088,"tags":4089,"publishDate":4090,"_id":4091,"author":4092},"/phendry/2022-07-28/migratingfromexpresstofastifypart2","Migrating from Express to Fastify, Part 2","In Part 1, we looked at the features of the Fastify Node.js Web framework compared to Express.js. In Part 2, we'll work through migrating an example Express.js application to Fastify.","/phendry/2022-07-28/img/Migrating from Express to Fastify, Part 2.png",[817,15],"2023-12-31","content:phendry:2022-07-28:MigratingFromExpressToFastifyPart2.md",{"user":4039,"name":4040},{"_path":4094,"title":4095,"description":4096,"tags":4097,"image":4098,"publishDate":4099,"_id":4100,"author":4101},"/phendry/2023-01-19/badcode","\"Bad\" Code (Or, Why Software Development is Hard)","Recently, the Dutch government open-sourced the iOS application for their \"DigiD\" authentication service. A tweet with a snippet of that source code, presumably making fun of it, blew up into a debate about whether mocking it is even justified. The amount of debate over such a simple snippet of code highlights, in my mind, just how tricky software development can be.",[3478,15],"/phendry/2023-01-19/img/Bad Code.png","2024-01-15","content:phendry:2023-01-19:BadCode.md",{"user":4039,"name":4040},{"_path":4103,"title":4104,"description":4105,"image":4106,"publishDate":4107,"tags":4108,"_id":4109,"author":4110},"/phendry/2023-01-31/forgetaboutcodestyle","Forget About [Code] Style","Good code style, being highly subjective, is something often debated among developers. After all, we spend more time reading code than writing it, so it's worth making sure our code is styled to be as easy as possible to read and to understand. On the other hand, deciding upon and continuously enforcing a style is also time-consuming, and the benefits are near-impossible to quantify. Given that modern code formatting tools can fully automate the process, is it still worth fretting about style?","/phendry/2023-01-31/img/forget_style_header.png","2024-02-01",[3611],"content:phendry:2023-01-31:ForgetAboutCodeStyle.md",{"user":4039,"name":4040},{"_path":4112,"title":4113,"description":4114,"image":4115,"tags":4116,"publishDate":4117,"_id":4118,"author":4119},"/phendry/2023-04-02/semantichtml","Don't Give Up on Semantic HTML","Since the early days of the Web, there has been tension between the ideal of \"semantic HTML\" and the practical reality of designing complex page layouts, which often could not be achieved without inserting style concerns into the document. More recently, frameworks like Tailwind CSS have emerged which challenge the very idea that semantic HTML is an ideal to strive for, and which commit to thoroughly embedding style concerns into HTML documents. With modern CSS features however, semantic HTML is more achievable than ever, and I do think it remains a worthy goal.","/phendry/2023-04-02/img/Don't Give Up on Semantic HTML.png",[3611],"2024-03-01","content:phendry:2023-04-02:SemanticHtml.md",{"user":4039,"name":4040},{"_path":4121,"title":4122,"description":4123,"image":4124,"tags":4125,"publishDate":4126,"_id":4127,"author":4128},"/phendry/2023-05-16/doyouneedacsspreprocessor","Do You Need a CSS Preprocessor in 2023?","CSS preprocessors like Less, Sass and Stylus have long provided powerful features that vanilla CSS lacked: variables, nesting of rulesets, mixins, control flow constructs, etc. These days however, the feature gap is considerably narrower, and it's not so clear that the benefits of a preprocessor outweight the burdens of setting it up.","/phendry/2023-05-16/img/css_preprocessor_header.png",[3611],"2023-01-01","content:phendry:2023-05-16:DoYouNeedACSSPreprocessor.md",{"user":4039,"name":4040},{"_path":4130,"title":4131,"description":4132,"image":4133,"publishDate":4134,"tags":4135,"_id":4136,"author":4137},"/phendry/2023-07-28/dependencymanagement","Software Dependency Management: Best Practices","Leveraging third-party libraries and frameworks is essential in most modern software projects, and the projects we build at Art+Logic are no exception. The pressure on developers to rapidly deliver features is high, and there are so many commonalities in the details of each project (particularly in Web development) that a lot of development time can be saved by using well-designed libraries that handle the details.","/phendry/2023-07-28/img/dependency_header.png","2023-01-02",[3611],"content:phendry:2023-07-28:DependencyManagement.md",{"user":4039,"name":4040},{"_path":4139,"title":4140,"description":4141,"tags":4142,"publishDate":4145,"image":4146,"_id":4147,"author":4148},"/phendry/2023-11-06/frontendframeworksin2024","Frontend Frameworks in 2024: React, Svelte and Vue","Several years ago, Art+Logic settled on Vue.js as our preferred frontend Web framework. Now, in 2024, we feel it's time to revisit the frontend framework landscape to see how things have (or haven't) changed.",[3611,4143,4144,3866],"react","svelte","2024-05-15","/phendry/2023-11-06/img/frontend_frameworks_2024.png","content:phendry:2023-11-06:FrontendFrameworksIn2024.md",{"user":4039,"name":4040},{"_path":4150,"title":4151,"description":4152,"publishDate":4153,"tags":4154,"image":4157,"_id":4158,"author":4159},"/rbrubaker/2012-06/arduino-thermometer","Turn Your Mac into a Thermometer with Arduino","The topic of the Arduino came up around A&L's \"virtual water cooler\" last week. About a year and a half ago, I purchased a SparkFun Inventor's Kit for Arduino. The kit is a fun way for a hardware novice like me to get started and learn some basics. It comes with more than a dozen sample projects such as lighting LEDs, spinning a motor and generating audio.","2012-06-28",[4155,4156],"arduino","java","/rbrubaker/2012-06/img/arduino1.jpg","content:rbrubaker:2012-06:arduino-thermometer.md",{"user":4160,"name":4161},"rbrubaker","Ryan Brubaker",{"_path":4163,"title":4164,"description":4165,"publishDate":4166,"tags":4167,"_id":4170,"author":4171},"/rbrubaker/2012-06/coffe-backbone-1","Fun with CoffeeScript and Backbone.js : Part 1","CoffeeScript has been all the rage lately and I've been wanting to hop on board the bandwagon. I've also seen Backbone.js mentioned quite a bit and was even more intrigued after listening to this .NET Rocks podcast. I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.","2012-06-06",[4168,4169,3601,15],"backbone-js","coffeescript","content:rbrubaker:2012-06:coffe-backbone-1.md",{"user":4160,"name":4161},{"_path":4173,"title":4174,"description":4175,"publishDate":4176,"tags":4177,"_id":4178,"author":4179},"/rbrubaker/2012-06/coffee-backbone-2","Fun with CoffeeScript and Backbone.js : Part 2","In this post I’ll discuss the code that handles updating the UI.","2012-06-07",[4168,4169,3601,15],"content:rbrubaker:2012-06:coffee-backbone-2.md",{"user":4160,"name":4161},{"_path":4181,"title":4182,"description":4183,"publishDate":4184,"tags":4185,"_id":4186,"author":4187},"/rbrubaker/2012-06/coffee-backbone-3","Fun with CoffeeScript and Backbone.js : Part 3","In this post I’ll discuss my thoughts on CoffeeScript and Backbone.js.","2012-06-08",[4168,4169,3601,15],"content:rbrubaker:2012-06:coffee-backbone-3.md",{"user":4160,"name":4161},{"_path":4189,"title":4190,"description":4191,"publishDate":4192,"tags":4193,"_id":4194,"author":4195},"/rbrubaker/2012-07/prototypal-js","Prototypal vs. Functional Inheritance in JavaScript","If you ever found JavaScript's prototypal inheritance confusing, do yourself a favor and open this article, open a JavaScript console and code each example in the article. You will definitely come away with a better understanding of how prototypal inheritance works in JavaScript.","2012-07-11",[4169,817],"content:rbrubaker:2012-07:prototypal-js.md",{"user":4160,"name":4161},{"_path":4197,"title":4198,"description":4199,"publishDate":4200,"tags":4201,"_id":4202,"author":4203},"/rbrubaker/2012-07/whither-pm","Whither Project Management?","When I was first asked to manage a project at Art & Logic, I had my reservations. Did I really want to start down a career path that led to less development? Would my skills as a developer go stale? My first few projects as a manager were solo projects so I still had plenty of development work and fortunately, I found myself to be a pretty easy person to manage. As time went on I started managing larger projects and with them came the responsibility to manage other developers. To my surprise I found project management to be rewarding and dare I say, even fun. It's very satisfying to work with clients, helping them define their visions and seeing those visions come to life.","2012-07-25",[3959],"content:rbrubaker:2012-07:whither-pm.md",{"user":4160,"name":4161},{"_path":4205,"title":4206,"description":4207,"tags":4208,"image":4211,"publishDate":3549,"_id":4212,"author":4213},"/scharette/2019-4/discover_machine_learning","Discover Machine Learning","Computers have been around for less than 100 years.  In that short period of time, some incredible things have happened:  they've been universally adopted so quickly that we have them in our houses.  In our cars.  Even in our pockets.  In the last 40 years, there have been many significant events when it comes to computers:",[4209,4210,3541],"machine-learning","neural-networks","/scharette/2019-4/img/discover_machine_learning.png","content:scharette:2019-4:discover_machine_learning.md",{"user":4214,"name":4215},"scharette","Stéphane Charette",{"_path":4217,"title":4218,"description":4219,"publishDate":4220,"image":4221,"tags":4222,"_id":4224,"author":4225},"/shuey/2012-05/baas","BaaS Offerings Continue to Grow","The makers of Simplenote recently introduced their Backend as a Service (BaaS) offering called Simperium that looks to compete in an increasingly crowded space with services like CloudMine, Kinvey, and Parse and to some extent with iCloud for iOS and OS X only apps. So just how crowded is this space? Back in February, Kinvey published their own map of the BaaS ecosystem that highlights different tiers of the ecosystem and various relationships between them.","2012-05-10","/shuey/2012-05/img/header.png",[4223],"baas","content:shuey:2012-05:baas.md",{"user":4226,"name":4227},"shuey","Steven Huey",{"_path":4229,"title":4230,"description":4231,"publishDate":4232,"tags":4233,"image":4235,"_id":4236,"author":4237},"/shuey/2012-05/cloud","Under the Sheets with iCloud and Core Data","Drew McCormack is writing a great series (Part 1, Part 2, Part 3) of posts about using iCloud for syncing Core Data managed data. It's harder than Apple lets on and Drew has done a great job of uncovering how this actually works.","2012-05-28",[3464,4234],"icloud","/shuey/2012-05/img/icloud.jpg","content:shuey:2012-05:cloud.md",{"user":4226,"name":4227},{"_path":4239,"title":4240,"description":4241,"publishDate":4242,"tags":4243,"_id":4245,"author":4246},"/shuey/2012-05/economics-android","The Economics of Android","If you haven't already do yourself a favor and head over to asymco.com to catch Horace Deidu's multi-post series on \"The Economics of Android\". Horace and Dan Benjamin discuss the series during this week's Critical Path podcast as well. Horace is a former analyst for Nokia and has been writing Asymco for a few years now. His analysis of the mobile industry and Apple's place within it in particular has been featured in publications such as Bloomberg and Forbes.","2012-05-17",[4244],"android","content:shuey:2012-05:economics-android.md",{"user":4226,"name":4227},{"_path":4248,"title":4249,"description":4250,"publishDate":3894,"tags":4251,"_id":4254,"author":4255},"/shuey/2012-05/iot","The Internet of Things and Big Data","I've been following the developments in the \"Internet of Things\" and Big Data / Open Data markets as new apps and tools are released and they look to be two exciting technologies on a collision course. With the advent of internet connected home appliances like Wattvision and Nest that provide real utility to the average home owner at reasonable prices along with crowd funded projects like Air Quality Egg or Twine we should see an explosion in the kinds and amount of useful and real-time or near real-time data that is available to anyone with a smartphone. Health metric or \"quantitative self\" tracking devices such as Fitbit, Jawbone Up, and the Pebble watch will fuel this data explosion as well.",[4252,4253],"big-data","iot","content:shuey:2012-05:iot.md",{"user":4226,"name":4227},{"_path":4257,"title":4258,"description":4259,"publishDate":4260,"tags":4261,"image":4263,"_id":4264,"author":4265},"/shuey/2012-05/rubymotion","RubyMotion Brings Ruby to iOS","RubyMotion is a new development toolchain that allows you to build iOS apps using Ruby created by Laurent Sansonetti, a former Apple engineer and contributor to the MacRuby project. It has garnered a lot of attention the past few weeks and some detailed reviews have already been written:","2012-05-14",[3463,4262],"ruby","/shuey/2012-05/img/logotype-icon.png","content:shuey:2012-05:rubymotion.md",{"user":4226,"name":4227},{"_path":4267,"title":4268,"description":4269,"publishDate":4270,"tags":4271,"image":4272,"_id":4273,"author":4274},"/shuey/2012-06/thoughts-ios6","A few thoughts on iOS 6","Apple made their session videos from WWDC 2012 available earlier this week in record time. It's nice to see since tickets for this years event sold out in under two hours. Apple has an iOS 6 Preview page touting some of the new features such as Siri's new abilities, tighter integration with Facebook, Photo Stream sharing, and things like iCloud tabs for Safari all of which look great.","2012-06-21",[3464,3463],"/shuey/2012-06/img/ios6.jpg","content:shuey:2012-06:thoughts-ios6.md",{"user":4226,"name":4227},{"_path":4276,"title":4277,"description":4278,"publishDate":4279,"tags":4280,"image":4282,"_id":4283,"author":4284},"/shuey/2012-07/mixer","A Simple Mixer Using AVFoundation","In iOS 4.0 Apple introduced the AV Foundation APIs that made working with audio and video media much easier than it had been in previous versions of iOS. Apple then brought these APIs to Mac OS X in OS X 10.7 \"Lion\". In this post I'll show how to use some of the APIs to create a simple four track mixer.","2012-07-02",[3464,4281,3463],"cocoa","/shuey/2012-07/img/mixer-screenshot.jpg","content:shuey:2012-07:mixer.md",{"user":4226,"name":4227},{"_path":4286,"title":4287,"description":4288,"publishDate":4289,"tags":4290,"image":4291,"_id":4292,"author":4293},"/shuey/2012-07/reset-button","The Reset Button","Horace Dediu of Asymco has been publishing some fantastic insights and analysis of the mobile market in the past few weeks. I linked to some of Dediu's analysis of the Economics of Android in an earlier post, and since then he's updated his work with the latest data and is studying RIM and Microsoft's efforts in the space as well.","2012-07-19",[4244,3464,3463],"/shuey/2012-07/img/kevin.jpg","content:shuey:2012-07:reset-button.md",{"user":4226,"name":4227},{"_path":4295,"title":4296,"description":4297,"publishDate":4298,"tags":4299,"image":4301,"_id":4302,"author":4303},"/tfarrel/2012-07","Looking at Steganography","With the help of one of my favorite news aggregators, I discovered this article on using JavaScript and the canvas element to hide information inside images. I've long been fascinated by steganography and this article and demonstration makes it even more accessible. If you can't be bothered to read the article, it describes a method of using the HTML5 File API and the canvas element to embed a message in images.","2012-07-24",[4300],"steganography","/tfarrel/2012-07/img/white.png","content:tfarrel:2012-07:index.md",{"user":4304,"name":4305},"tfarrel","Troy Farrel",1780330269287]