技術情報
- 2020年01月10日
- 技術情報
PWA (Progressive web application)
Let’s say you have a website and you want to give your website as mobility experience to your customers. Well you have to consider the PWA. Let’s see how PWA can offer mobility experiences to consumers.
If you visit the website, you will get alert to add to your home screen for this website as a PWA application. If you accept it, the PWA will be installed to your phone and you can access the website through application next time. Cool , I know right !
Although PWA works across both iOS and Android, the specifications of Safari affect which functions iOS users can access. For Android users, PWA can be added via multiple browsers. Also PWA is a project started by Google, and it is quite more compatible with Android.
Let’s discuss some of the core attributes which are missing from common non-progressive web applications.
- Reliable
The app should be lightning fast when loading, it should be close to instantaneous and should also open when there is no network or fairly low-speed network. - Fast
The scrolls and page transitions should be buttery smooth when the user is interacting with the web app. Everyone hates crappy scrolls. - Responsive
The app should fit in all the different sizes of devices. The perfect web app should be like liquid, which takes the shape of its vessel. - Installable
If we want to make web apps closer to the native apps, they have to be installable and should reside in the home screen along with other native apps, so that the user can access the PWA in one click. - Splash Screen
PWA adds a splash screen during the startup of the app. This makes the PWA feel more like a native app.
As an addition, all you need to setup PWA is that you just have to know some Javascript. PWA has some important technical components which work together and energizes the regular web app.
- Service worker
- manifest json
- And your site need to be in https.
These are the important things to setup your PWA.
Service Worker
Our web apps talk to the network directly and if there is no network, the screen shows the famous dinosaur. For the first-time load, the service worker stores the required resources in the browser cache. And when the user visits the app next time, the service workers check the cache and returns the response to the user before even checking the network.
Manifest Json File
The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.
Https
Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWA requires secure protocol HTTPS.
Here is the official documentation to build PWA from google.
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
By Yuuma
yuuma at 2020年01月10日 11:00:29
- 2020年01月09日
- 技術情報
CakePHP フォームヘルパー(1)
nishida at 2020年01月09日 10:00:40
- 2019年12月26日
- 技術情報
CakePHP コントローラとビューの連携
nishida at 2019年12月26日 10:00:53
- 2019年12月19日
- 技術情報
CakePHP コントローラとURLの関連
nishida at 2019年12月19日 10:00:06
- 2019年12月13日
- 技術情報
Apache VS Nginx
What is Apache?
Apache is a Web server released under the open source Apache 2.0 license. Like all Web servers, it hosts Web content – such as HTML pages, PHP files, and audio and video – and serves the content to users when they visit a website. It can host content for websites on the public Internet, or for internal company websites on an Intranet.
Since its early days, Apache has offered a variety of benefits that have made it a popular Web server solution for many IT and DevOps teams.
Apache also offers a modular plugin system that makes it easy to add functionality to an Apache installation by installing modules that enable Apache to serve different types of Web content, log information, compress data, and so on. Modules in Apache can be easily activated and deactivated, providing a flexible solution for extending and controlling how Apache behaves.
What is NGINX?
NGINX is a Web server that is designed to also work as a reverse proxy server, a load balancer, and an HTTP cache. NGINX is open source and governed by a BSD license. While Apache can be configured to perform these various additional tasks, it was designed first and foremost as simply a Web server.
NGINX offers many of the same benefits as Apache. It’s open source and (in its core open source form, at least) freely available to use.
Unlike Apache, however, NGINX has a somewhat simpler configuration system. Some of the functionality that would have to be added to an Apache installation using modules is included in NGINX by default, which means that there is less setup for admins to perform. For example, NGINX caches Web content by default in order to enable faster performance when multiple users request the same content.
Simplicity
Developing and innovating applications on Apache is easy. The one-connection-per-process model makes it very easy to insert modules at any point in its web serving logic. Developers could add code in such a way that if there were failures only the worker process running the code would be affected. Processing of all other connections would continue undisturbed.
NGINX, on the other hand, has a sophisticated architecture hence developing modules is not easy. NGINX module developers need to be very careful to create efficient and accurate code, without any failures, and to interact appropriately with the complex event-driven kernel to avoid blocking operations.
Performance
Performance is measured by how the server delivers large volumes of content to the client browser and this is an important factor. Content can be Static or Dynamic.
OS support
Apache runs on all operating systems such as UNIX, Linux or BSD and has full support for Microsoft Windows. NGINX also runs on several modern Unix-like systems and has support for Windows, but its performance on Windows is not as stable as that on UNIX platforms.
By Yuuma.
yuuma at 2019年12月13日 10:30:17