“Rich offline experiences, periodic background syncs, push notifications—functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features rely on.” (Gaunt, 2016)
So what is this “Service Worker” thingy?
This article is meant to give a simple idea and introduction about that a service worker is. This blog post should help you setting up a basic web app with a service worker. So, what is a service worker exactly? A service worker is a script that your browser runs in the background, separate from a web page. It opens the door to features that don’t need a web page or user interaction once it’s installed in your browser.
Introduction about “Progressive Web App”
“Progressive Web App” is an umbrella term used to describe web experiences so advanced that they compete with the well known apps from the app stores. Progressive Web App will bring the features we expect from app-store apps to the mobile browser. On the whole, the term “Progressive Web App” describes a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web.
Full offline support, install-ability, “Retina”, full-bleed imagery, fast, smooth in-app browsing, push notifications and a great user interface. Sound the the description of an app from the app-store, right? Well, all of these features can be provided by one single Progressive Web App.
“Progressive Web Applications are experiences that combine the best of the Web and native applications. They do not require installation. The user builds gradually a relationship with the application over time, it becomes increasingly more and more powerful. Load faster and send relevant notifications. Provide icons on the Home screen and immerse you in Full Screen mode.” (Google, 2015)
This way, in most use cases, you are good to go with developing a Progressive Web App instead of developing an native app. You get the features you want, and save a lot of money in development costs. Read more
A design pattern is a reusable solution to prevent programming problems that occur frequently.
Design patterns are optimized, reusable solutions for the programming problems we encounter many times. A design pattern is like an template that you can implement in your software. It’s is not language-specific and can be used in almost every programming language. Another great advantage is that reusing these patterns helps to prevent issues that cause major problems but also helps code readability for other programmers familiar with design patterns so they can understand and work with the code easily. Therefore, programmers familiar with some of the most common design patterns can contribute widely on projects with much more ease.
Every developer strives to write maintainable, readable, and reusable code. It’s like playing with Lego: there’s a handful of different pieces you get to snap together however you want. Sometimes you make something cool, but most of the time you make crap. However, the longer you play, the better you get.
Studying Design Patterns is much like learning “how to build applications in a good way”. By studying these patterns we mostly read advice from other programmers that have been programming and creating applications for decades. They have distilled their most common solutions into simple, understandable pieces of knowledge with memorable names. One could see it like an apprenticeship for the digital-age: the elders are giving their best advice. You can take it and be ahead of the game, or ignore it and repeat all of their mistakes. Read more
In prototype-based object-oriented programming we create an object. This object can have certain properties and functions. If we create an vehicle, this vehicle can have properties like vehicle.type and vehicle.color to create a simple basic vehicle. You can use this basic vehicle as a prototype for an more specific vehicle, all you need to do is to ‘clone’ that basic vehicle and add some other specific properties to it and you’ll have a custom vehicle! For example:
var genericVehicle = Object.create(null); //this creates an new empty object.