khanhtdbse

## proxy-example.js
// Reference: https://medium.com/@alonronin/magic-methods-in-javascript-meet-proxy-65e6305f4d3e. Thank for awesome article

const axios = require('axios');

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/'
});

const target = {};
const handler = {

## ButtonComponent.spec.js

import Vue from 'vue'
import ButtonComponent from '@/components/ButtonComponent'

describe('ButtonComponent.vue', () => {
    let vm

    // Khoi tao bien moi khi chay test case
    beforeEach(() => {
        const Constructor = Vue.extend(ButtonComponent)

## app.js
// Đăng ký service worker nếu trình duyệt hỗ trợ
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js').then((registration) => {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}

## sw.js
// Tên cache. Bạn có thể kiểm tra tại Chrome dev tools -> Applications -> Cache storage
const CACHE_NAME = 'demo-offline'

// Đường dẫn các resources mà bạn muốn cache
const CACHED_RESOURCES = [
    '/page1.html',
    '/page2.html',
    '/server.php?id=1',
    '/server.php?id=2',
    '/app.js',

## server.php
<?php
header('Content-type: application/json');

$id = $_GET['id'];

echo json_encode([
    'id' => $id,
    'content' => "Some content in article #{$id} that is work offline",
    'title' => "The offline title #{$id}"
]);

## page2.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Default title</title>
</head>

## page1.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Default title</title>
</head>

## index.js
const puppeteer = require('puppeteer');

(async() => {
    // Khởi tạo trình duyệt
    const browser = await puppeteer.launch({
        // Ở đây mình set false để nó hiện thị UI => dễ debug hơn
        headless: false
    });
    // Tạo tab mới nè
    const page = await browser.newPage();

## gist:095ade7224ab36670b191393e6dbccf5
docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q)
	// Reference: https://medium.com/@alonronin/magic-methods-in-javascript-meet-proxy-65e6305f4d3e. Thank for awesome article

	const axios = require('axios');

	const instance = axios.create({
	baseURL: 'https://jsonplaceholder.typicode.com/'
	});

	const target = {};
	const handler = {

	import Vue from 'vue'
	import ButtonComponent from '@/components/ButtonComponent'

	describe('ButtonComponent.vue', () => {
	let vm

	// Khoi tao bien moi khi chay test case
	beforeEach(() => {
	const Constructor = Vue.extend(ButtonComponent)
	// Đăng ký service worker nếu trình duyệt hỗ trợ
	if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
	navigator.serviceWorker.register('/sw.js').then((registration) => {
	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}, function (err) {
	console.log('ServiceWorker registration failed: ', err);
	});
	});
	}
	// Tên cache. Bạn có thể kiểm tra tại Chrome dev tools -> Applications -> Cache storage
	const CACHE_NAME = 'demo-offline'

	// Đường dẫn các resources mà bạn muốn cache
	const CACHED_RESOURCES = [
	'/page1.html',
	'/page2.html',
	'/server.php?id=1',
	'/server.php?id=2',
	'/app.js',
	<?php
	header('Content-type: application/json');

	$id = $_GET['id'];

	echo json_encode([
	'id' => $id,
	'content' => "Some content in article #{$id} that is work offline",
	'title' => "The offline title #{$id}"
	]);
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Default title</title>
	</head>
	const puppeteer = require('puppeteer');

	(async() => {
	// Khởi tạo trình duyệt
	const browser = await puppeteer.launch({
	// Ở đây mình set false để nó hiện thị UI => dễ debug hơn
	headless: false
	});
	// Tạo tab mới nè
	const page = await browser.newPage();