mirror of
https://github.com/a2nt/silverstripe-progressivewebapp.git
synced 2024-10-22 11:05:45 +02:00
Initial updates
This commit is contained in:
Tony Air
parent
e7c0f9b416
commit
10e7cb5977
18
README.md
18
README.md
@ -1,20 +1,28 @@
|
||||
# SilverStripe Progressive Web App
|
||||
|
||||
Tools to add progressive web app functionality to your silverstripe website
|
||||
And make it available offline
|
||||
|
||||
## Installation
|
||||
```
|
||||
composer require michelsteege/silverstripe-progressivewebapp
|
||||
composer require a2nt/silverstripe-progressivewebapp
|
||||
```
|
||||
|
||||
## Usage
|
||||
- Install the module, run dev/build and fill in the settings in the siteconfig
|
||||
- Include the required js to register the service worker
|
||||
- Add js to register the service worker
|
||||
```
|
||||
Requirements::javascript('michelsteege/silverstripe-progressivewebapp:resources/js/progressivewebapp.js');
|
||||
if ('serviceWorker' in navigator) {
|
||||
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||
if(baseHref){
|
||||
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
|
||||
console.log('Service Worker Registered');
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
- Add the following tags to the head of your website
|
||||
```
|
||||
<meta name="theme-color" content="$SiteConfig.ManifestColor">
|
||||
<link rel="manifest" href="{$BaseHref}manifest.json">
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="manifest" href="{$BaseHref}manifest.json" />
|
||||
```
|
||||
|
||||
@ -4,9 +4,5 @@ Name: progressivewebapp
|
||||
|
||||
SilverStripe\Control\Director:
|
||||
rules:
|
||||
'manifest.json': 'MichelSteege\ProgressiveWebApp\Controllers\ManifestController'
|
||||
'service-worker.js': 'MichelSteege\ProgressiveWebApp\Controllers\ServiceWorkerController'
|
||||
|
||||
SilverStripe\SiteConfig\SiteConfig:
|
||||
extensions:
|
||||
- MichelSteege\ProgressiveWebApp\Extensions\ProgressiveWebAppSiteConfigExtension
|
||||
'manifest.json': 'A2nt\ProgressiveWebApp\Controllers\ManifestController'
|
||||
'service-worker.js': 'A2nt\ProgressiveWebApp\Controllers\ServiceWorkerController'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "a2nt/silverstripe-progressivewebapp",
|
||||
"name": "michelsteege/silverstripe-progressivewebapp",
|
||||
"description": "Tools to add progressive web app functionality to your silverstripe website",
|
||||
"type": "silverstripe-vendormodule",
|
||||
"keywords": [
|
||||
@ -15,17 +15,26 @@
|
||||
"minimum-stability": "dev",
|
||||
"prefer-stable": true,
|
||||
"require": {
|
||||
"silverstripe/cms": "^4.*"
|
||||
"silverstripe/cms": "^4.0@dev",
|
||||
"silverstripe/vendor-plugin": "^1.0",
|
||||
"silverware/colorpicker": "^1.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"phpunit/phpunit": "^5.7",
|
||||
"squizlabs/php_codesniffer": "^3.0"
|
||||
},
|
||||
"extra": {
|
||||
"installer-name": "silverstripe-progressivewebapp",
|
||||
"branch-alias": {
|
||||
"dev-master": "2.x-dev"
|
||||
}
|
||||
},
|
||||
"expose": [
|
||||
"resources"
|
||||
]
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"A2nt\\ProgressiveWebApp\\": "src/"
|
||||
"Pixelspin\\ProgressiveWebApp\\": "src/"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
if ('serviceWorker' in navigator) {
|
||||
var baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||
if(baseHref){
|
||||
navigator.serviceWorker.register(baseHref + 'service-worker.js').then(function() {
|
||||
//console.log('Service Worker Registered');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
namespace MichelSteege\ProgressiveWebApp\Controllers;
|
||||
namespace A2nt\ProgressiveWebApp\Controllers;
|
||||
|
||||
use SilverStripe\Control\Controller;
|
||||
use SilverStripe\SiteConfig\SiteConfig;
|
||||
@ -22,79 +22,10 @@ class ManifestController extends Controller {
|
||||
public function index($url) {
|
||||
|
||||
$config = SiteConfig::current_site_config();
|
||||
|
||||
$manifestContent = [];
|
||||
$manifestContent['start_url'] = '/';
|
||||
|
||||
if($config->ManifestName){
|
||||
$manifestContent['name'] = $config->ManifestName;
|
||||
}
|
||||
if($config->ManifestShortName){
|
||||
$manifestContent['short_name'] = $config->ManifestShortName;
|
||||
}
|
||||
if($config->ManifestDescription){
|
||||
$manifestContent['description'] = $config->ManifestDescription;
|
||||
}
|
||||
if($config->ManifestColor){
|
||||
$manifestContent['background_color'] = $config->ManifestColor;
|
||||
$manifestContent['theme_color'] = $config->ManifestColor;
|
||||
}
|
||||
if($config->ManifestOrientation){
|
||||
$manifestContent['orientation'] = $config->ManifestOrientation;
|
||||
}
|
||||
if($config->ManifestDisplay){
|
||||
$manifestContent['display'] = $config->ManifestDisplay;
|
||||
}
|
||||
|
||||
$logo = $config->ManifestLogo();
|
||||
if($logo && $logo->exists()){
|
||||
$mime = $logo->getMimeType();
|
||||
$manifestContent['icons'] = [
|
||||
[
|
||||
'src' => $logo->Fill(48,48)->Link(),
|
||||
'sizes' => '48x48',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(72,72)->Link(),
|
||||
'sizes' => '72x72',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(96,96)->Link(),
|
||||
'sizes' => '96x96',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(144,144)->Link(),
|
||||
'sizes' => '144x144',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(168,168)->Link(),
|
||||
'sizes' => '168x168',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(192,192)->Link(),
|
||||
'sizes' => '192x192',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(256,256)->Link(),
|
||||
'sizes' => '256x256',
|
||||
'type' => $mime
|
||||
],
|
||||
[
|
||||
'src' => $logo->Fill(512,512)->Link(),
|
||||
'sizes' => '512x512',
|
||||
'type' => $mime
|
||||
]
|
||||
];
|
||||
}
|
||||
|
||||
$this->getResponse()->addHeader('Content-Type', 'application/manifest+json; charset="utf-8"');
|
||||
return json_encode($manifestContent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
namespace MichelSteege\ProgressiveWebApp\Controllers;
|
||||
namespace A2nt\ProgressiveWebApp\Controllers;
|
||||
|
||||
use SilverStripe\Control\Controller;
|
||||
use SilverStripe\Control\Director;
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace MichelSteege\ProgressiveWebApp\Extensions;
|
||||
|
||||
use SilverStripe\ORM\DataExtension;
|
||||
use SilverWare\Colorpicker\ORM\FieldType\DBColor;
|
||||
use SilverStripe\Assets\Image;
|
||||
use SilverStripe\Forms\FieldList;
|
||||
use SilverStripe\AssetAdmin\Forms\UploadField;
|
||||
use SilverStripe\Forms\TextField;
|
||||
use SilverStripe\Forms\DropdownField;
|
||||
use SilverWare\Colorpicker\Forms\ColorField;
|
||||
|
||||
class ProgressiveWebAppSiteConfigExtension extends DataExtension {
|
||||
|
||||
private static $db = [
|
||||
'ManifestName' => 'Varchar',
|
||||
'ManifestShortName' => 'Varchar',
|
||||
'ManifestDescription' => 'Varchar(255)',
|
||||
'ManifestColor' => DBColor::class,
|
||||
'ManifestOrientation' => 'Varchar',
|
||||
'ManifestDisplay' => 'Varchar'
|
||||
];
|
||||
|
||||
private static $displays = [
|
||||
'fullscreen',
|
||||
'standalone',
|
||||
'minimal-ui',
|
||||
'browser'
|
||||
];
|
||||
|
||||
private static $orientations = [
|
||||
'any',
|
||||
'natural',
|
||||
'landscape',
|
||||
'landscape-primary',
|
||||
'landscape-secondary',
|
||||
'portrait',
|
||||
'portrait-primary',
|
||||
'portrait-secondary'
|
||||
];
|
||||
|
||||
private static $has_one = [
|
||||
'ManifestLogo' => Image::class
|
||||
];
|
||||
|
||||
public function onAfterWrite() {
|
||||
parent::onAfterWrite();
|
||||
$manifestLogo = $this->owner->ManifestLogo();
|
||||
if ($manifestLogo && $manifestLogo->exists()) {
|
||||
$manifestLogo->doPublish();
|
||||
}
|
||||
}
|
||||
|
||||
public function updateCMSFields(FieldList $fields) {
|
||||
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestName', 'Name')->setDescription('Application name'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestShortName', 'Short name')->setDescription('Short human-readable name for the application try to keep it at a maximum of 12 characters'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', TextField::create('ManifestDescription', 'Description')->setDescription('Short description about the app'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', ColorField::create('ManifestColor', 'Color')->setDescription('Color used for the splash screen and/or icon'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestOrientation', 'Orientation', array_combine(self::$orientations, self::$orientations))->setDescription('App orientation'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', DropdownField::create('ManifestDisplay', 'Display', array_combine(self::$displays, self::$displays))->setDescription('Display mode of the app'));
|
||||
$fields->addFieldToTab('Root.ProgressiveWebApp', UploadField::create('ManifestLogo', 'Logo')->setDescription('This image must be square and at least 512x512px'));
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
namespace MichelSteege\ProgressiveWebApp\Interfaces;
|
||||
namespace A2nt\ProgressiveWebApp\Interfaces;
|
||||
|
||||
interface ServiceWorkerCacheProvider {
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user